From f1649002c59ae5089fe5736a5951719fb874957b Mon Sep 17 00:00:00 2001 From: Laury GvR Date: Wed, 22 Aug 2018 17:02:34 -0400 Subject: [PATCH] Replace list view google map code with leaflet code --- glm-member-db/views/front/members/detail.html | 230 +++++----- glm-member-db/views/front/members/list.html | 392 ++++++++++++------ 2 files changed, 378 insertions(+), 244 deletions(-) diff --git a/glm-member-db/views/front/members/detail.html b/glm-member-db/views/front/members/detail.html index bb3b1fa..ec65c0d 100644 --- a/glm-member-db/views/front/members/detail.html +++ b/glm-member-db/views/front/members/detail.html @@ -3,10 +3,42 @@ {apply_filters('glm-member-db-front-members-detail-pageTop', '', $member.id)} {if $haveMember} - + {if $settings.detail_show_map} + {/if} + {if $settings.detail_show_directions} + {/if} @@ -27,7 +59,7 @@ Visit Website {/if} - +
@@ -101,10 +133,21 @@
- {if $settings.detail_show_map} - + {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
@@ -117,14 +160,13 @@ - {/if} + {/if}
{apply_filters('glm-member-db-front-members-detail-attributesTop', '', $member.id)} - {if $featuredImage}
@@ -154,7 +196,6 @@ Back to top
- {apply_filters('glm-member-db-front-members-detail-descriptionAfter', '', $member.id)} {apply_filters('glm-member-db-front-members-detail-imageGalleryBefore', '', $member.id)} {if $settings.detail_show_imagegallery && $haveImageGallery} @@ -488,17 +529,66 @@ $(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 */ var myLocation = false; - {if $member.lat != 0 && $member.lon != 0} + {if $member.lat != 0 && $member.lon != 0} var memberlocation = new google.maps.LatLng({$member.lat}, {$member.lon}); - {else} + {else} var memberlocation = new google.maps.LatLng({$settings.maps_default_lat}, {$settings.maps_default_lon}); - {/if} + {/if} function initMap() { @@ -511,7 +601,7 @@ }); // Create a marker for this member - {if $member.lat != 0 && $member.lon != 0} + {if $member.lat != 0 && $member.lon != 0} var marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng({$member.lat}, {$member.lon}), @@ -519,120 +609,20 @@ animation: google.maps.Animation.DROP, 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.'); - //}); - //} + {/if} } // 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 diff --git a/glm-member-db/views/front/members/list.html b/glm-member-db/views/front/members/list.html index 1ec004a..ae614d0 100644 --- a/glm-member-db/views/front/members/list.html +++ b/glm-member-db/views/front/members/list.html @@ -31,6 +31,24 @@ {if $settings.list_map_show_opened}map-opened{else}map-closed{/if} {if $settings.list_show_search_filters_opened}filters-opened{else}filters-closed{/if} "> + + {if $settings.selected_map_interface == 1} + + + + + + + + {/if} + + {if $settings.selected_map_interface == 2} + + + {/if} + + + {include file='front/members/header.html'} {apply_filters('glm-member-db-front-members-list-pageTop', '')}
@@ -123,10 +141,20 @@
{/if} {*list_show_search*} {if $settings.list_show_map} - + {apply_filters('glm-member-db-front-members-list-mapTop', '')}
-
(map loads here)
+ + {if $settings.selected_map_interface == 1} + +
+ {/if} + + {if $settings.selected_map_interface == 2} + +
(map loads here)
+ {/if} +
{apply_filters('glm-member-db-front-members-list-mapBottom', '')} {/if} @@ -516,130 +544,246 @@ }); {/if} // settings.list_show_search - {if $settings.list_show_map} - /* - * Google Maps - * API reference: https://developers.google.com/maps/documentation/javascript/reference - */ - - - // Create a Google Map object - var map = new google.maps.Map(document.getElementById('glm-locationMap'), { - center: new google.maps.LatLng({$settings.maps_default_lat}, {$settings.maps_default_lon}), - zoom: {$settings.maps_default_zoom}, - disableDefaultUI: false, - mapTypeId: google.maps.MapTypeId.MAP, - }); - - $("#glm-member-list-map-toggle").click( function() { - $(".glm-member-db-{$view}-view").toggleClass("map-opened"); - $(".glm-member-db-{$view}-view").toggleClass("map-closed"); - var center = map.getCenter(); - google.maps.event.trigger(map, "resize"); - map.setCenter(center); - - var currentScroll = $(window).scrollTop(); // get current position - var mapTop = $("#glm-locationMap-container").offset().top-10; - {if $settings.list_show_search}fixmeTop = $('#glm-member-list-filters-button').offset().top;{/if} - if (currentScroll >= mapTop) { - $('body,html').animate({ - scrollTop: $("#glm-locationMap-container").offset().top-100 - }, 50); - } else { - $('body,html').animate({ - scrollTop: $("#glm-locationMap-container").offset().top-100 - }, 400); - } - }); - var geocoder = new google.maps.Geocoder(); - var bounds = new google.maps.LatLngBounds(); - var infowindow = new google.maps.InfoWindow(); - - // Don't Try HTML5 to get user geolocation - //if(navigator.geolocation) { - //navigator.geolocation.getCurrentPosition(function(position) { - //var 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 - //}); - //}); - //} - - - {if $mapItems} - var markers = []; - {foreach $mapItems as $m} - {if $m.lat != 0 && $m.lon != 0} - - // Create a marker for this member - var marker = new google.maps.Marker({ - map: map, - position: new google.maps.LatLng({$m.lat}, {$m.lon}), - draggable: false, - animation: google.maps.Animation.DROP, - title: '{$m.member_name|escape:quotes}', - descr: $('#map_info_' + {$m.id}).html(), - memberID: {$m.member} - }); - - // Add a click listener for this marker - marker.addListener('click', function() { - infowindow.setOptions({ - content: this.descr - }); - infowindow.open(map,this); - }); - - markers.push(marker); - - // Extend the map bounds to include this marker - bounds.extend(marker.position); - - {/if} - {/foreach} - - {if $settings.use_cluster_markers} - var markerCluster = new MarkerClusterer(map, markers, - { - imagePath: '{$baseUrl}/js/googleMapsMarkerClusterer/images/m', - gridSize: 30, - maxZoom: 14, - minimunClusterSize: 3 - }); - {/if} - - // Fit map to bounds of all markers - map.fitBounds(bounds); - - // Check for first map idle (completely loaded) - Check max zoom - var mapLoadedListener = google.maps.event.addListener(map, 'idle', function() { - if (map.getZoom() > 14) { - this.setZoom(14); - } - google.maps.event.removeListener(mapLoadedListener); - }); - - {else} - - - {/if} // havemembers - + {if $settings.list_show_map} - {/if} // settings.list_show_map + /* + * Map operations + */ + + var startLat = $('#glmLat').val(); + var startLon = $('#glmLng').val(); + var defZoom = Number({$settings.maps_default_zoom}); + + {if $settings.selected_map_interface == 1} + + /* + * Leaflet Map + * API reference: https://leafletjs.com/reference-1.3.2.html + */ + + function initMap() { + + var leafletMap = L.map('LeafletMapContainer').setView([{$settings.maps_default_lat}, {$settings.maps_default_lon}], defZoom); + var leafletTileServer = '{$settings.leaflet_tile_server}/{$settings.leaflet_tile_server_key}/' + {literal}'{z}/{x}/{y}.png'{/literal}; + var leafletMinZoom = 3; + var leafletMaxZoom = 19; + var clusterRadiusMax = 40; + var geocoder; + + // Loading features + var loadingControl = L.Control.loading({ + separate: true, + delayIndicator: 500 + }); + leafletMap.addControl(loadingControl); + + // Init Map + L.tileLayer(leafletTileServer, { + attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Gaslight Media', + minZoom: leafletMinZoom, + maxZoom: leafletMaxZoom, + id: 'nothot' + }).addTo(leafletMap); + + + {if $mapItems} + + {if $settings.use_cluster_markers} + var markerGroup = L.markerClusterGroup({ + maxClusterRadius: clusterRadiusMax + }); + {else} + var markerGroup = L.featureGroup({ + maxClusterRadius: clusterRadiusMax + }); + {/if} + + + {foreach $mapItems as $m} + {if $m.lat != 0 && $m.lon != 0} + + // Create marker for this member and and to Feature Group + var leafletMarker = L.marker([{$m.lat}, {$m.lon}], { title: '{$m.member_name|escape:quotes}' }) + .bindPopup($('#map_info_' + {$m.id}).html()) + .addTo(markerGroup); + + {/if} + {/foreach} + + leafletMap.addLayer(markerGroup); + + // Get outer bounds of all markers in the Feature Group + leafletMap.fitBounds(markerGroup.getBounds()); + + {/if} // havemembers + + // When a marker is clicked, display the pop-up near the center of the map. + + leafletMap.on('popupopen', function(e) { + var px = leafletMap.project(e.popup._latlng); + px.y -= e.popup._container.clientHeight/2; + leafletMap.panTo(leafletMap.unproject(px),{ animate: true }); + }); + + + } + + {/if} + + {if $settings.selected_map_interface == 2} + + /* + * Google Maps + * API reference: https://developers.google.com/maps/documentation/javascript/reference + */ + + function initMap() { + + // Create a Google Map object + var map = new google.maps.Map(document.getElementById('glm-locationMap'), { + center: new google.maps.LatLng({$settings.maps_default_lat}, {$settings.maps_default_lon}), + zoom: {$settings.maps_default_zoom}, + disableDefaultUI: false, + mapTypeId: google.maps.MapTypeId.MAP, + }); + + var center = map.getCenter(); + google.maps.event.trigger(map, "resize"); + map.setCenter(center); + + var currentScroll = $(window).scrollTop(); // get current position + var mapTop = $("#glm-locationMap-container").offset().top-10; + {if $settings.list_show_search}fixmeTop = $('#glm-member-list-filters-button').offset().top;{/if} + if (currentScroll >= mapTop) { + $('body,html').animate({ + scrollTop: $("#glm-locationMap-container").offset().top-100 + }, 50); + } else { + $('body,html').animate({ + scrollTop: $("#glm-locationMap-container").offset().top-100 + }, 400); + } + + var geocoder = new google.maps.Geocoder(); + var bounds = new google.maps.LatLngBounds(); + var infowindow = new google.maps.InfoWindow(); + + // Don't Try HTML5 to get user geolocation + //if(navigator.geolocation) { + //navigator.geolocation.getCurrentPosition(function(position) { + //var 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 + //}); + //}); + //} + + + {if $mapItems} + var markers = []; + {foreach $mapItems as $m} + {if $m.lat != 0 && $m.lon != 0} + + // Create a marker for this member + var marker = new google.maps.Marker({ + map: map, + position: new google.maps.LatLng({$m.lat}, {$m.lon}), + draggable: false, + animation: google.maps.Animation.DROP, + title: '{$m.member_name|escape:quotes}', + descr: $('#map_info_' + {$m.id}).html(), + memberID: {$m.member} + }); + + // Add a click listener for this marker + marker.addListener('click', function() { + infowindow.setOptions({ + content: this.descr + }); + infowindow.open(map,this); + }); + + markers.push(marker); + + // Extend the map bounds to include this marker + bounds.extend(marker.position); + + {/if} + {/foreach} + + {if $settings.use_cluster_markers} + var markerCluster = new MarkerClusterer(map, markers, + { + imagePath: '{$baseUrl}/js/googleMapsMarkerClusterer/images/m', + gridSize: 30, + maxZoom: 14, + minimunClusterSize: 3 + }); + {/if} + + // Fit map to bounds of all markers + map.fitBounds(bounds); + + // Check for first map idle (completely loaded) - Check max zoom + var mapLoadedListener = google.maps.event.addListener(map, 'idle', function() { + if (map.getZoom() > 14) { + this.setZoom(14); + } + google.maps.event.removeListener(mapLoadedListener); + }); + } // initMap + + {else} + + + {/if} // havemembers + + {/if} + + {/if} // settings.list_show_map + + // Handle Map View/Hide + var mapInitialized = false; + $("#glm-member-list-map-toggle").click( function() { + $(".glm-member-db-{$view}-view").toggleClass("map-opened"); + $(".glm-member-db-{$view}-view").toggleClass("map-closed"); + if (!mapInitialized) { + initMap(); + mapInitialized = true; + } + var currentScroll = $(window).scrollTop(); // get current position + var mapTop = $("#glm-locationMap-container").offset().top-10; + {if $settings.list_show_search}fixmeTop = $('#glm-member-list-filters-button').offset().top;{/if} + if (currentScroll >= mapTop) { + $('body,html').animate({ + scrollTop: $("#glm-locationMap-container").offset().top-100 + }, 50); + } else { + $('body,html').animate({ + scrollTop: $("#glm-locationMap-container").offset().top-100 + }, 400); + } + }); + {if $settings.list_map_show_opened} + // Start with map opened + initMap(); + mapInitialized = true; + {/if} + // Processes click-through counts for website links $('.glm-member-list-website-link').on('click', function() { -- 2.17.1