Getting leaflet to work

Updating the reg detail page for leaflet.

diff --git a/css/front.css b/css/front.css
index 650ed58..85f383f 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -54,7 +54,7 @@
     margin: 0;
     height: 250px;
     overflow: hidden;
-    background: url('../assets/fingerUpRed.png');
+    /* background: url('../assets/fingerUpRed.png'); */
     background-position: center center;
     background-size: cover;
     position: relative;

diff --git a/views/front/registrations/registration.html b/views/front/registrations/registration.html
index a150783..8e83465 100644 (file)
--- a/views/front/registrations/registration.html
+++ b/views/front/registrations/registration.html
@@ -2,6 +2,17 @@
 {* Underscore Templates for the Event Registration App *}
 {* Template for Logged in Account *}
 
+{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>
+{/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>
+{/if}
+
 {literal}
 <script type="text/template" id="account-template">
     <span>Logged in as <%= fname %><%= lname %></span>
@@ -610,6 +621,7 @@ jQuery(function($){
     regEvent.setClasses( {$regClassesJSON} );
     regEvent.setClassRegistrants( {$regJSON} );
     var glmApp = new app.Views.Front.App();
+    var mapIsDone = false;
 
     {if isset($regEvent.locations) && $regEvent.locations}
         $("#glm-reg-detail-map-button").click(function() {
@@ -631,6 +643,10 @@ jQuery(function($){
 
             });
             $(this).html(mapBtnTxt);
+            if ( !mapIsDone ) {
+                initMap();
+                mapIsDone = true;
+            }
         });
         {if $regEvent.locations.lat !=0 && $regEvent.locations.lon != 0}
             //var eventlocation = new google.maps.LatLng({$regEvent.locations.lat}, {$regEvent.locations.lon});
@@ -638,27 +654,57 @@ jQuery(function($){
             //var eventlocation = new google.maps.LatLng({$settings.maps_default_lat}, {$settings.maps_default_lon});
         {/if}
         function initMap() {
-            // Set default - Need to make this configurable
-            //var map = new google.maps.Map(document.getElementById('glm-reg-map'), {
-            //    zoom: {$settings.maps_default_zoom},
-            //    center: eventlocation,
-            //    disableDefaultUI: false,
-            //    mapTypeId: google.maps.MapTypeId.MAP,
-            //});
-
-            // Create a marker for this event
-            {if $regEvent.locations.lat !=0 && $regEvent.locations.lon != 0}
-                    //var marker = new google.maps.Marker({
-                    //    map: map,
-                    //    position: new google.maps.LatLng({$regEvent.locations.lat}, {$regEvent.locations.lon}),
-                    //    draggable: false,
-                    //    animation: google.maps.Animation.DROP,
-                    //    title: ''
-                    //});
-                 {/if}
+            {if $settings.selected_map_interface == 1}
+            var leafletMap = L.map('glm-reg-map').setView([{$regEvent.locations.lat},{$regEvent.locations.lon}], 13);
+                var leafletTileServer = '{$settings.leaflet_tile_server}/{$settings.leaflet_tile_server_key}/' + {literal}'{z}/{x}/{y}.png'{/literal};
+                var leafletMinZoom = 5;
+                var leafletMaxZoom = 18;
+
+                // 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);
+
+                {if $regEvent.locations.lat !=0 && $regEvent.locations.lon != 0}
+                    // Marker
+                    var leafletMarker = L.marker([{$regEvent.locations.lat}, {$regEvent.locations.lon}]).addTo(leafletMap);
+
+                    leafletMap.panTo( [{$regEvent.locations.lat}, {$regEvent.locations.lon}] );
+                {/if}
+            {/if}
+
+            {if $settings.elected_map_interface == 2}
+                // Set default - Need to make this configurable
+                var map = new google.maps.Map(document.getElementById('glm-reg-map'), {
+                   zoom: {$settings.maps_default_zoom},
+                   center: eventlocation,
+                   disableDefaultUI: false,
+                   mapTypeId: google.maps.MapTypeId.MAP,
+                });
+
+                // Create a marker for this event
+                {if $regEvent.locations.lat !=0 && $regEvent.locations.lon != 0}
+                    var marker = new google.maps.Marker({
+                       map: map,
+                       position: new google.maps.LatLng({$regEvent.locations.lat}, {$regEvent.locations.lon}),
+                       draggable: false,
+                       animation: google.maps.Animation.DROP,
+                       title: ''
+                    });
+                {/if}
+            {/if}
 
         }
-        //google.maps.event.addDomListener(window, 'load', initMap);
+        // initMap();
     {/if}
 
     $('#glm-reg-event-detail-link').click(function(){