Update for events detail page

Bring in leaflet

diff --git a/glm-member-db-events/views/front/events/detail.html b/glm-member-db-events/views/front/events/detail.html
index 975524d..1325da1 100644 (file)
--- a/glm-member-db-events/views/front/events/detail.html
+++ b/glm-member-db-events/views/front/events/detail.html
@@ -8,7 +8,7 @@
         </div>
     </div>
     {if $event}
-        
+
 
     <div class="row collapse"><!-- .row #1 -->
         <div class="small-12 large-9 large-centered column"><!-- .small-12 .large-9 .large-centered .columns -->
@@ -207,6 +207,75 @@
             $("#glm-event-detail-takeback-mini span").css('opacity','1');
         }
 
+        {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;
+            var eventLat = $("#event-lat").attr('rel');
+            var eventLon = $("#event-lon").attr('rel');
+            var mapType = "eventDetail-map";
+            var mapOptions = { dragging: false, zoomControl: false };
+            var attributionText = 'Map &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> Contrib, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
+
+            function initMap() {
+
+                var leafletMap = L.map(mapType, mapOptions ).setView([eventLat, eventLon], {$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: attributionText,
+                    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([eventLat, eventLon]).addTo(leafletMap);
+
+            }
+
+            $(window).load(function(){
+                initMap();
+            });
+
+            jQuery('#map-dialog').dialog({
+                height: 490,
+                width: 630,
+                modal: true,
+                autoOpen: false
+            });
+
+            var largeMapInit = false;
+            jQuery("#eventDetail-map").click(function(e){
+                e.preventDefault();
+                jQuery("#map-dialog").dialog('open');
+                if (!largeMapInit) {
+                    mapType = "map_canvas";
+                    mapOptions = {};
+                    attributionText = '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>';
+                    initMap();
+                    largeMapinit = true;
+                }
+            });
+
+        {/if}
+
+
         // Replace the phone separation character with whatever is set in the management
         {if $settings.phone_infix}
             //var processedPhone = $('.glm-event-detail-contact-phone .glm-field-value').text().trim().replace(/[^a-zA-Z0-9 ]/g, '{$settings.phone_infix}');