Update the other map on troutcreek

They have two maps.

diff --git a/js/courseMap.js b/js/courseMap.js
index 738972c..af7e212 100644 (file)
--- a/js/courseMap.js
+++ b/js/courseMap.js
@@ -2,30 +2,57 @@ var Map = {
     _map: null,
     _latLngBounds: null,
     _infoWindow: null,
+    _defZoom: 9,
+    leafletMap: '',
+    leafletTileServer: 'https://maps.gaslightmedia.com/08172018-c1feaf327f962d6c7c98b52003d1fa82/' + '{z}/{x}/{y}.png',
+    leafletMinZoom: 3,
+    leafletMaxZoom: 19,
 
     init: function()
     {
-        var canvas = document.getElementById('map-canvas');
-        var myOptions = {
-            scrollwheel: false,
-            zoom: 9,
-            mapTypeControl: true,
-            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
-            navigationControl: true,
-            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
-            mapTypeId: google.maps.MapTypeId.ROADMAP
-        }
+        Map.leafletMap = L.map('map-canvas').setView([45.306347,-84.707336], Map._defZoom);
+
 
-        Map._map = new google.maps.Map(canvas, myOptions);
-        Map._latLngBounds = new google.maps.LatLngBounds();
-        Map._infoWindow = new google.maps.InfoWindow;
+        // Loading features
+        var loadingControl = L.Control.loading({
+            separate: true,
+            delayIndicator: 500
+        });
+        Map.leafletMap.addControl(loadingControl);
 
+        // Init Map
+        L.tileLayer(Map.leafletTileServer, {
+           attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.gaslightmedia.com/">Gaslight Media</a>',
+           minZoom: Map.leafletMinZoom,
+           maxZoom: Map.leafletMaxZoom,
+           id: 'nothot'
+        }).addTo(Map.leafletMap);
         jQuery.get( mapBaseUrl + "/xml/courseMap.xml", Map._loadData, 'xml');
     },
 
     _loadData: function(data)
     {
         var markers = data.documentElement.getElementsByTagName("marker");
+        var LeafIcon = L.Icon.extend({
+            options: {
+                // shadowUrl: mapBaseUrl + '/icons/shadow.png'
+            }
+        });
+
+        var redIcon = new LeafIcon({
+            iconUrl: mapBaseUrl + '/icons/red-marker.png',
+            iconSize: [21, 34],
+            iconAnchor: [10, 30]
+        });
+
+        var greenIcon = new LeafIcon({
+            iconUrl: mapBaseUrl + '/icons/green-marker.png',
+            iconSize: [21, 34],
+            iconAnchor: [10, 30]
+        });
+
+        var shadowUrl = mapBaseUrl + '/icons/shadow.png';
+
         for (i = 0; i < markers.length; i++) {
             var name = markers[i].getAttribute('name');
             var street = markers[i].getAttribute('street');
@@ -37,11 +64,11 @@ var Map = {
             var distTo = markers[i].getAttribute('distTo');
             var zIndex = markers[i].getAttribute('zIndex');
 
-            var point = new google.maps.LatLng(
-                parseFloat(lat),
-                parseFloat(lng)
-            );
-            Map._latLngBounds.extend(point);
+                       // var point = new google.maps.LatLng(
+                       //      parseFloat(lat),
+                       //      parseFloat(lng)
+                       // );
+                       // // Map._latLngBounds.extend(point);
 
             var html = '<table><tbody><tr>';
             html += '<td><b>' + name + '</b><br>' +
@@ -53,36 +80,32 @@ var Map = {
             html += '</tr></tbody></table>';
 
             if (distTo) {
-                var pinColor = "FE7569";
+                var pinColor = "FE7569"; // red
+                // Create marker for this member and and to Feature Group
+                var leafletMarker = L.marker([lat, lng], {
+                    title: name,
+                    icon: redIcon,
+                    iconSize: [21, 34],
+                    shadowSize: [40, 37]
+                })
+                .bindPopup( html )
+                .addTo(Map.leafletMap);
             } else {
-                var pinColor = "6ABD45";
+                var pinColor = "6ABD45"; // green
+                // Create marker for this member and and to Feature Group
+                var leafletMarker = L.marker([lat, lng], {
+                    title: name,
+                    icon: greenIcon,
+                    iconSize: [21, 34],
+                    shadowSize: [40, 37]
+                })
+                .bindPopup( html )
+                .addTo(Map.leafletMap);
             }
-            var pinImage = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
-                new google.maps.Size(21, 34),
-                new google.maps.Point(0, 0),
-                new google.maps.Point(10, 34)
-            );
-            var pinShadow = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_shadow",
-                new google.maps.Size(40, 37),
-                new google.maps.Point(0, 0),
-                new google.maps.Point(12, 35)
-            );
-            var marker = new google.maps.Marker({
-                title: name,
-                position: point,
-                map: Map._map,
-                icon: pinImage,
-                shadow: pinShadow
-            });
-
-
-            Map._bindInfoWindow(marker, Map._map, Map._infoWindow, html);
+
         }
 
-        Map._map.setCenter(
-            Map._latLngBounds.getCenter()
-        );
-        Map._map.fitBounds(Map._latLngBounds);
+
     },
 
     _bindInfoWindow: function(marker, map, infoWindow, html)

diff --git a/js/old-courseMap.js b/js/old-courseMap.js
new file mode 100644 (file)
index 0000000..f189273
--- /dev/null
+++ b/js/old-courseMap.js
@@ -0,0 +1,97 @@
+var Map = {
+    _map: null,
+    _latLngBounds: null,
+    _infoWindow: null,
+
+    init: function()
+    {
+        var canvas = document.getElementById('map-canvas');
+        var myOptions = {
+            scrollwheel: false,
+            zoom: 8,
+            mapTypeControl: true,
+            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
+            navigationControl: true,
+            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
+            mapTypeId: google.maps.MapTypeId.ROADMAP
+        }
+
+        Map._map = new google.maps.Map(canvas, myOptions);
+        Map._latLngBounds = new google.maps.LatLngBounds();
+        Map._infoWindow = new google.maps.InfoWindow;
+
+        jQuery.get( mapBaseUrl + "/xml/courseMap.xml", Map._loadData, 'xml');
+    },
+
+    _loadData: function(data)
+    {
+        var markers = data.documentElement.getElementsByTagName("marker");
+        for (i = 0; i < markers.length; i++) {
+            var name = markers[i].getAttribute('name');
+            var street = markers[i].getAttribute('street');
+            var city = markers[i].getAttribute('city');
+            var state = markers[i].getAttribute('state');
+            var zip = markers[i].getAttribute('zip');
+            var lat = markers[i].getAttribute('lat');
+            var lng = markers[i].getAttribute('lng');
+            var distTo = markers[i].getAttribute('distTo');
+            var zIndex = markers[i].getAttribute('zIndex');
+
+            var point = new google.maps.LatLng(
+                parseFloat(lat),
+                parseFloat(lng)
+            );
+            Map._latLngBounds.extend(point);
+
+            var html = '<table><tbody><tr>';
+            html += '<td><b>' + name + '</b><br>' +
+                        street + '<br>' + city + ', ' + state + ' ' + zip;
+            if (distTo) {
+                html += '<br>' + distTo + ' Miles from Trout Creek';
+            }
+            html += '</td>';
+            html += '</tr></tbody></table>';
+
+            if (distTo) {
+                var pinColor = "FE7569";
+            } else {
+                var pinColor = "6ABD45";
+            }
+            var pinImage = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
+                new google.maps.Size(21, 34),
+                new google.maps.Point(0, 0),
+                new google.maps.Point(10, 34)
+            );
+            var pinShadow = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_shadow",
+                new google.maps.Size(40, 37),
+                new google.maps.Point(0, 0),
+                new google.maps.Point(12, 35)
+            );
+            var marker = new google.maps.Marker({
+                title: name,
+                position: point,
+                map: Map._map,
+                icon: pinImage,
+                shadow: pinShadow
+            });
+
+
+            Map._bindInfoWindow(marker, Map._map, Map._infoWindow, html);
+        }
+
+        Map._map.setCenter(
+            Map._latLngBounds.getCenter()
+        );
+        Map._map.fitBounds(Map._latLngBounds);
+    },
+
+    _bindInfoWindow: function(marker, map, infoWindow, html)
+    {
+        google.maps.event.addListener(marker, 'click', function() {
+            infoWindow.setContent(html);
+            infoWindow.open(map, marker);
+        });
+    }
+};
+
+jQuery(document).ready(Map.init);

diff --git a/lib/courseMap.php b/lib/courseMap.php
index 5b71371..1bb5917 100644 (file)
--- a/lib/courseMap.php
+++ b/lib/courseMap.php
@@ -1,21 +1,29 @@
 <?php
 
 add_shortcode( 'troutcreek-course-map', function( $atts ){
-    wp_enqueue_script(
-        'google-map',
-        'https://maps.google.com/maps/api/js?key=AIzaSyCdmRuCoTJoqWVQSbJ4Bymv4zNGzBGTbVI',
-        array(),
-        '1.0.0',
-        true
-    );
+    // wp_enqueue_script(
+    //     'google-map',
+    //     'https://maps.google.com/maps/api/js?key=AIzaSyCdmRuCoTJoqWVQSbJ4Bymv4zNGzBGTbVI',
+    //     array(),
+    //     '1.0.0',
+    //     true
+    // );
     wp_enqueue_script(
         'course-map',
         get_template_directory_uri() . '/js/courseMap.js',
-        array( 'google-map' ),
-        '1.0',
+        null,//array( 'google-map' ),
+        '1.1',
         true
     );
-    return '<script>
+    $jsUrl = get_template_directory_uri() . '/js';
+    $return .= '
+        <!--  Leaflet Map -->
+        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
+        <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
+        <link rel="stylesheet" href="'.$jsUrl.'/Leaflet.loading/src/Control.Loading.css" />
+        <script src="'.$jsUrl.'/Leaflet.loading/src/Control.Loading.js"></script>
+    ';
+    return $return . '<script>
         var mapBaseUrl = "' . get_template_directory_uri() . '";
     </script>
     <div id="map-canvas" style="width: 100%; height:400px;"></div>';

diff --git a/lib/interactiveMap.php b/lib/interactiveMap.php
index 7dde15c..06062a2 100644 (file)
--- a/lib/interactiveMap.php
+++ b/lib/interactiveMap.php
@@ -12,7 +12,7 @@ add_shortcode( 'troutcreek-interactive-map', function( $atts ){
         'course-map',
         get_template_directory_uri() . '/js/interactive.js',
         null,//array( 'google-map' ),
-        '1.0',
+        '1.1',
         true
     );
     $jsUrl = get_template_directory_uri() . '/js';