From: Steve Sutton Date: Wed, 22 Aug 2018 21:14:41 +0000 (-0400) Subject: Update for new maps X-Git-Tag: v1.2.37~1 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=62526fa4ae9ac78858aed75463d1dd42f25df263;p=WP-Themes%2Fmountpleasantwow.git Update for new maps open maps --- diff --git a/glm-member-db/views/front/members/detail.html b/glm-member-db/views/front/members/detail.html index 8684e88..c91485e 100644 --- a/glm-member-db/views/front/members/detail.html +++ b/glm-member-db/views/front/members/detail.html @@ -136,9 +136,20 @@ {if $settings.detail_show_map} - +
-
(map loads here)
+ {if $settings.selected_map_interface == 1} + + + + +
(map loads here)
+ {/if} + {if $settings.selected_map_interface == 2} + + +
(map loads here)
+ {/if}
view map
@@ -524,6 +535,55 @@ $(this).html(mapBtnTxt); }); + {if $settings.selected_map_interface == 1} + + /* + * Leaflet Map + * API reference: https://leafletjs.com/reference-1.3.2.html + */ + + // Get member location if available, otherwise use this site's default locatgion + var myLocation = false; + {if $member.lat != 0 && $member.lon != 0} + var memberLat = {$member.lat}; + var memberLon = {$member.lon}; + {else} + var memberLat = {$settings.maps_default_lat}}; + var memberLon = {$settings.maps_default_lon}}; + {/if} + + function initMap() { + + var leafletMap = L.map('LeafletMapContainer').setView([memberLat, memberLon], {$settings.maps_default_zoom}); + var leafletTileServer = '{$settings.leaflet_tile_server}/{$settings.leaflet_tile_server_key}/' + {literal}'{z}/{x}/{y}.png'{/literal}; + var leafletMinZoom = 5; + var leafletMaxZoom = 18; + var geocoder; + + + // Tile server + L.tileLayer(leafletTileServer, { + attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Gaslight Media', + minZoom: leafletMinZoom, + maxZoom: leafletMaxZoom, + id: 'nothot' + }).addTo(leafletMap); + + var loadingControl = L.Control.loading({ + separate: true, + delayIndicator: 500 + }); + leafletMap.addControl(loadingControl); + + // Marker + var leafletMarker = L.marker([memberLat, memberLon]).addTo(leafletMap); + + } + + {/if} + + {if $settings.selected_map_interface == 2} + /* * Google Maps * API reference: https://developers.google.com/maps/documentation/javascript/reference @@ -556,119 +616,19 @@ title: '{$member.member|escape}' }); {/if} - // Don't Try HTML5 to get user geolocation - //if(navigator.geolocation) { - //navigator.geolocation.getCurrentPosition(function(position) { - //myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); - //var pinIcon = new google.maps.MarkerImage( - //'https://maps.google.com/mapfiles/kml/shapes/man.png', - //null, /* size is determined at runtime */ - //null, /* origin is 0,0 */ - //null, /* anchor is bottom center of the scaled image */ - //new google.maps.Size(30, 30) - //); - //var myMarker = new google.maps.Marker({ - //map: map, - //position: myLocation, - //draggable: false, - //animation: google.maps.Animation.DROP, - //title: 'My Location', - //icon: pinIcon, - //zIndex: 100 - //}); - //$('#glm-startLocation').attr('placeholder', 'Leave blank for your current location or enter address here.'); - //}); - //} } // Load map google.maps.event.addDomListener(window, 'load', initMap); + {/if} {/if} {*detail_show_map*} -// Direction code is below, but since we're sending them offsite to google maps this is no longer necessary. -// -// {if $settings.detail_show_directions} -// -// var directionsDisplay; -// var directionsService = new google.maps.DirectionsService(); -// -// // Display map with route from specified location to member location -// function calcRoute() { -// -// // If an address was input, use that, otherwise use detected location if available -// var start = $('#glm-startLocation').val(); -// if (start == '' ) { -// if (myLocation != false) { -// start = myLocation; -// } -// } -// -// // If no start location available, tell user -// if (start == '') { -// alert('No starting location. Please enter address.'); -// return; -// } -// -// // Switch to directions map being visible -// $('#glm-directionsMap-container').removeClass('glm-hidden'); -// $('#glm-locationMap-container').addClass('glm-hidden'); -// $('#glm-showLocationButton').removeClass('glm-hidden'); -// -// // Initialize the directions map with a default center location -// directionsDisplay = new google.maps.DirectionsRenderer(); -// var mapOptions = { -// zoom:7, -// center: memberlocation -// } -// directionsMap = new google.maps.Map(document.getElementById("glm-directionsMap"), mapOptions); -// directionsDisplay.setMap(directionsMap); -// -// // Get directions type selected -// var directionsType = $('#directionsType').find(':selected').val(); -// -// // Specify origin and destination then get route -// var request = { -// origin: start, -// destination: memberlocation, -// travelMode: google.maps.TravelMode[directionsType] -// }; -// directionsService.route(request, function(result, status) { -// if (status == google.maps.DirectionsStatus.OK) { -// directionsDisplay.setDirections(result); -// $('#directions-panel').html(''); -// directionsDisplay.setPanel(document.getElementById('directions-panel')); -// } -// }); -// -// // Check for first map idle (completely loaded) - Check max initial zoom -// var mapLoadedListener = google.maps.event.addListener(directionsMap, 'idle', function() { -// if (directionsMap.getZoom() > 16) { -// this.setZoom(16); -// } -// google.maps.event.removeListener(mapLoadedListener); -// }); -// -// } -// -// // Trigger route map either by button or input of address -// $('#glm-showDirectionsButton' ).click( function() { -// calcRoute(); -// }); -// $('#glm-startLocation' ).change( function() { -// calcRoute(); -// }); -// -// // Switch back to member location map -// $('#glm-showLocationButton').click( function() { -// $('#glm-directionsMap-container').addClass('glm-hidden'); -// $('#glm-locationMap-container').removeClass('glm-hidden'); -// $('#glm-showLocationButton').addClass('glm-hidden'); -// }); -// -// {/if} {*detail_show_directions*} + $(window).load(function(){ + initMap(); + }); }); // jquery