From 872e3101fedc0ec7ef4bdd2e41a90c19329106d9 Mon Sep 17 00:00:00 2001 From: Steve Sutton Date: Tue, 21 Aug 2018 16:50:39 -0400 Subject: [PATCH] Updates for openmaps Our new maps. --- glm-member-db/views/front/members/detail.html | 68 ++++++++- glm-member-db/views/front/members/list.html | 144 +++++++++++++++++- style.css | 2 +- 3 files changed, 207 insertions(+), 7 deletions(-) diff --git a/glm-member-db/views/front/members/detail.html b/glm-member-db/views/front/members/detail.html index 21a3eb3..23ff25d 100644 --- a/glm-member-db/views/front/members/detail.html +++ b/glm-member-db/views/front/members/detail.html @@ -113,9 +113,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
@@ -572,6 +583,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 @@ -611,9 +671,13 @@ // Load map google.maps.event.addDomListener(window, 'load', initMap); + {/if} {/if} {*detail_show_map*} + $(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 0d8d1a2..7bea4ae 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', '')}
@@ -126,7 +144,17 @@ {apply_filters('glm-member-db-front-members-list-mapTop', '')}
+ + {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} @@ -254,7 +282,9 @@
{apply_filters('glm-member-db-front-members-list-memberTop', '', $member.member_pointer)} + {if $settings.list_show_detail_link && !$member.has_no_profile.value} + {/if} {if $member.featured}
@@ -273,7 +303,9 @@ {else}
{/if} + {if $settings.list_show_detail_link && !$member.has_no_profile.value} + {/if}

{if $settings.list_show_detail_link && !$member.has_no_profile.value} @@ -515,11 +547,99 @@ {/if} // settings.list_show_search {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'), { @@ -529,9 +649,6 @@ 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); @@ -548,7 +665,7 @@ 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(); @@ -630,14 +747,33 @@ 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; + } + }); + {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() { diff --git a/style.css b/style.css index 10b477e..7753688 100644 --- a/style.css +++ b/style.css @@ -3,5 +3,5 @@ Theme Name: meetingsmichigan Author: Gaslight Media Author URI: http://www.gaslightmedia.com Description: A theme for meetingsmichigan -Version: 1.0.4 +Version: 1.0.5 */ -- 2.17.1