From e9751917a4ef9cbf6c30c22daaa776e6087428f3 Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Wed, 22 Aug 2018 14:50:29 -0400
Subject: [PATCH] Replaced map code with non-google map script

---
 glm-member-db/views/front/members/detail.html | 188 +++++++-----------
 1 file changed, 73 insertions(+), 115 deletions(-)

diff --git a/glm-member-db/views/front/members/detail.html b/glm-member-db/views/front/members/detail.html
index 5da458b..e388598 100644
--- a/glm-member-db/views/front/members/detail.html
+++ b/glm-member-db/views/front/members/detail.html
@@ -1,11 +1,9 @@
 {include file='front/members/header.html'}
 
-
-
 {apply_filters('glm-member-db-front-members-detail-pageTop', '', $member.id)}
 
 {if $haveMember}
-<!--        <script src="http://maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>-->
+
     {if $settings.detail_show_map}
 <!--        <div id="glm-locationMap-container" class="row">
             <div id="glm-locationMap" class="glm-map small-12 columns">(map loads here)</div>
@@ -135,10 +133,21 @@
                     </div>
                 </div>
 
-                {if $settings.detail_show_map}
-                <script src="//maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
+    {if $settings.detail_show_map}
+                
                 <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>
 
@@ -151,7 +160,7 @@
                         <input type="submit" class="button map-button text-center" id="MemberDrivingDirectionSubmit" name="MemberDrivingDirectionSubmit" value="Directions">
                     </form>
 
-                {/if}
+     {/if}
             </div>
 
 
@@ -525,6 +534,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
@@ -548,7 +606,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}),
@@ -556,120 +614,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
 
-- 
2.17.1