From: Steve Sutton Date: Tue, 11 Sep 2018 20:43:12 +0000 (-0400) Subject: Update the other map on troutcreek X-Git-Tag: v1.0.18^2 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=0f62df2697e67ebcb965751ef2d3be6bcf9c6d17;p=WP-Themes%2Ftroutcreek.git Update the other map on troutcreek They have two maps. --- diff --git a/js/courseMap.js b/js/courseMap.js index 738972c..af7e212 100644 --- 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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Gaslight Media', + 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 = ''; html += '
' + name + '
' + @@ -53,36 +80,32 @@ var Map = { html += '
'; 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 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 = ''; + html += ''; + html += '
' + name + '
' + + street + '
' + city + ', ' + state + ' ' + zip; + if (distTo) { + html += '
' + distTo + ' Miles from Trout Creek'; + } + html += '
'; + + 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 --- a/lib/courseMap.php +++ b/lib/courseMap.php @@ -1,21 +1,29 @@ + $jsUrl = get_template_directory_uri() . '/js'; + $return .= ' + + + + + + '; + return $return . '
'; diff --git a/lib/interactiveMap.php b/lib/interactiveMap.php index 7dde15c..06062a2 100644 --- 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';