From: Steve Sutton <steve@gaslightmedia.com>
Date: Thu, 23 Aug 2018 17:51:18 +0000 (-0400)
Subject: Update for new maps
X-Git-Tag: v1.0.12^2~3
X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/index.cgi?a=commitdiff_plain;h=01eee0abcf8ecdbe6b14f33d39fd11acab8c1800;p=WP-Themes%2Fharborpointassociation2018.git

Update for new maps

openmaps
---

diff --git a/glm-member-db/views/front/members/detail.html b/glm-member-db/views/front/members/detail.html
index 6a8bb8f..7e87301 100644
--- a/glm-member-db/views/front/members/detail.html
+++ b/glm-member-db/views/front/members/detail.html
@@ -103,9 +103,20 @@
                 </div>
 
                 {if $settings.detail_show_map}
-                <script src="//maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
+                
                 <div id="glm-locationMap-container">
-                    <div id="glm-locationMap" class="glm-map small-12 columns">(map loads here)</div>
+      {if $settings.selected_map_interface == 1}
+                    <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>
+                    <div id="LeafletMapContainer" style="height: 250px; width: 100%;">(map loads here)</div>
+      {/if}
+      {if $settings.selected_map_interface == 2}
+                    <script src="//maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
+                    <script type="text/javascript">var enableDraggable = true;</script>
+                    <div id="glm-locationMap" class="glm-map glmgrid-small-12 glmgrid-columns">(map loads here)</div>
+      {/if}   
                 </div>
                 <div id="glm-member-detail-map-button" class="button map-button">view map</div>
 
@@ -554,6 +565,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 &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: 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
@@ -593,9 +653,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 b1d7934..d3d3189 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} 
+                <!--  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}/LeafletMarkerCluster/dist/MarkerCluster.Default.css" />
+                <script src="{$jsUrl}/LeafletMarkerCluster/dist/leaflet.markercluster-src.js"></script>
+                <link rel="stylesheet" href="{$jsUrl}/Leaflet.loading/src/Control.Loading.css" />
+                <script src="{$jsUrl}/Leaflet.loading/src/Control.Loading.js"></script>
+            {/if}
+            
+            {if $settings.selected_map_interface == 2}            
+                <!-- Google Map -->
+                <script src="//maps.googleapis.com/maps/api/js?&key={$settings.google_maps_api_key}"></script>
+            {/if}
+
+
+
 {include file='front/members/header.html'}
         {apply_filters('glm-member-db-front-members-list-pageTop', '')}
 <div class="glm-member-list-inner-wrapper">
@@ -123,10 +141,20 @@
         </div> <!-- glm-member-list-wrapper -->
         {/if} {*list_show_search*}
     {if $settings.list_show_map}
-        <script src="//maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
+
         {apply_filters('glm-member-db-front-members-list-mapTop', '')}
         <div id="glm-locationMap-container">
+
+            {if $settings.selected_map_interface == 1} 
+                <!--  Leaflet Map -->
+                <div id="LeafletMapContainer" style="height: 400px; width: 100%; border: 1px black solid; z-index: +0;"></div>
+            {/if}
+            
+            {if $settings.selected_map_interface == 2}            
+                <!-- Google Map -->
             <div id="glm-locationMap" class="glm-map">(map loads here)</div>
+            {/if}
+
         </div>
         {apply_filters('glm-member-db-front-members-list-mapBottom', '')}
     {/if}
@@ -528,11 +556,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 &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: 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'), {
@@ -561,7 +677,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();
@@ -589,7 +705,9 @@
                             //});
                         //}
 
-                {if $haveMembers}
+    
+            {if $mapItems}
+                var markers = [];
                     {foreach $mapItems as $m}
                       {if $m.lat != 0 && $m.lon != 0}
 
@@ -599,7 +717,7 @@
                             position: new google.maps.LatLng({$m.lat}, {$m.lon}),
                             draggable: false,
                             animation: google.maps.Animation.DROP,
-                            title: '{$m.member|escape}',
+                        title: '{$m.member_name|escape:quotes}',
                             descr: $('#map_info_' + {$m.id}).html(),
                             memberID: {$m.member}
                         });
@@ -611,6 +729,8 @@
                                 });
                             infowindow.open(map,this);
                         });
+    
+                    markers.push(marker);
 
                         // Extend the map bounds to include this marker
                         bounds.extend(marker.position);
@@ -618,6 +738,16 @@
                      {/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);
 
@@ -629,14 +759,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() {
 
@@ -657,4 +806,4 @@
     </div><!-- glm-member-db-list-view -->
 {include file='front/footer.html'}
 <!-- if not generic view passed in member list shortcode-->
-{/if}
\ No newline at end of file
+{/if}