Added Leaflet maps support

diff --git a/models/front/events/detail.php b/models/front/events/detail.php
old mode 100644 (file)
new mode 100755 (executable)
index cec9868..9b9c1b0
--- a/models/front/events/detail.php
+++ b/models/front/events/detail.php
@@ -74,22 +74,50 @@ class GlmMembersFront_events_detail extends GlmMembersFront_events_baseAction
         }
 
         $categories = $this->getCategories();
-        wp_register_script(
-            'googlemaps-js',
-            '//maps.googleapis.com/maps/api/js?key=' . $this->config['settings']['google_maps_api_key'],
-            null,
-            GLM_MEMBERS_EVENTS_PLUGIN_VERSION,
-            true
-        );
-        wp_enqueue_script('googlemaps-js');
-        wp_register_script(
-            'event-geocoder-js',
-            GLM_MEMBERS_EVENTS_PLUGIN_BASE_URL . '/js/geoCoder.js',
-            array('jquery'),
-            GLM_MEMBERS_EVENTS_PLUGIN_VERSION,
-            true
-        );
-        wp_enqueue_script('event-geocoder-js');
+
+        /*
+         * Leaflet Maps
+         */
+        if ($this->config['settings']['selected_map_interface'] == 1) {
+
+            // Load Leaflet Maps Style and API
+            wp_enqueue_style('event-leaflet-style', 'https://unpkg.com/leaflet@1.3.3/dist/leaflet.css');
+            wp_enqueue_script('event-leaflet-script', 'https://unpkg.com/leaflet@1.3.3/dist/leaflet.js');
+
+            // Load Leaflet Maps "Loading Icon" Add-on Style and Script
+            wp_enqueue_style('event-leaflet-loading-style', GLM_MEMBERS_PLUGIN_JS_URL.'/Leaflet.loading/src/Control.Loading.css');
+            wp_enqueue_script('event-leaflet-loading-script', GLM_MEMBERS_PLUGIN_JS_URL.'/Leaflet.loading/src/Control.Loading.js');
+
+        }
+
+        /*
+         * Google Maps
+         */
+        if ($this->config['settings']['selected_map_interface'] == 2) {
+
+            // Google Maps API
+            wp_register_script(
+                'googlemaps-js',
+                '//maps.googleapis.com/maps/api/js?key=' . $this->config['settings']['google_maps_api_key'],
+                null,
+                GLM_MEMBERS_EVENTS_PLUGIN_VERSION,
+                true
+            );
+            wp_enqueue_script('googlemaps-js');
+
+            // Google Geocoder
+            wp_register_script(
+                'event-geocoder-js',
+                GLM_MEMBERS_EVENTS_PLUGIN_BASE_URL . '/js/geoCoder.js',
+                array('jquery'),
+                GLM_MEMBERS_EVENTS_PLUGIN_VERSION,
+                true
+            );
+            wp_enqueue_script('event-geocoder-js');
+
+        }
+        // End of maps
+
         wp_register_script(
             'event-dashboard-js',
             GLM_MEMBERS_EVENTS_PLUGIN_BASE_URL . '/js/dashboard.js',

diff --git a/views/front/events/detail.html b/views/front/events/detail.html
old mode 100644 (file)
new mode 100755 (executable)
index 647cd2c..9b72bda
--- a/views/front/events/detail.html
+++ b/views/front/events/detail.html
@@ -25,14 +25,17 @@
                         {if $event.locations}
                             <div class="event-google-map glmgrid-small-12 glmgrid-medium-5 glmgrid-medium-uncentered glmgrid-columns">
                                 {if $event.locations.lat && $event.locations.address}
-<!--                                 
                                     <div id="eventDetailMap">
+                {if $settings.selected_map_interface == 1}
+                                        <div id="eventDetail-map" title="Click to enlarge" style="height: 250px; width: 350px;">map...</div>
+                {/if}                                        
+                {if $settings.selected_map_interface == 2}
                                         <div id="eventDetail-map" title="Click to enlarge">map...</div>
+                {/if}                                        
                                         <div id="map-dialog"><div id="map_canvas" style="width:500px; height:400px">Loading...</div></div>
                                     </div>
                                     <div id="event-lat" rel="{$event.locations.lat}"></div>
                                     <div id="event-lon" rel="{$event.locations.lon}"></div>
--->                                    
                                     <form id="EventDrivingDirectionsForm" name="EventDrivingDirectionsForm" flexy:ignore="yes" method="post" action="">
                                         <input type="hidden" id="EventLocation" name="EventLocation" value="{$event.locations.name}">
                                         <input type="hidden" id="EventLat" name="EventLat" value="{$event.locations.lat}">
@@ -44,14 +47,12 @@
                     {elseif $event.member && ($event.use_member_location.value || $event.other_ref_dest) }
                         <div class="glmgrid-small-12 glmgrid-medium-5 glmgrid-columns">
                             {if $event.member.lat}
-<!--    
                                 <div id="eventDetailMap">
                                     <div id="eventDetail-map" title="Click to enlarge">map...</div>
                                     <div id="map-dialog"><div id="map_canvas" style="width:500px; height:400px">Loading...</div></div>
                                 </div>
                                 <div id="event-lat" rel="{$event.member.lat}"></div>
                                 <div id="event-lon" rel="{$event.member.lon}"></div>
--->                                
                                 <form id="EventDrivingDirectionsForm" name="EventDrivingDirectionsForm" flexy:ignore="yes" method="post" action="">
                                     <input type="hidden" id="EventLocation" name="EventLocation" value="{$event.member.member_name}">
                                     <input type="hidden" id="EventLat" name="EventLat" value="{$event.member.lat}">
@@ -112,7 +113,12 @@
                                                 {$rec.name}
                                             {/if}
                                             {if $expired} <span style="color:red;"> (Expired) </span> {/if}
-                                        </span>
+                                        </span>        jQuery('#map-dialog').dialog({
+            height: 490,
+            width: 630,
+            modal: true,
+            autoOpen: false
+        });
                                     </div>
                                 {else}
                                     {if $rec.name && $rec.name != 'Imported' && $rec.name != 'Imported Event Schedule' }
@@ -198,6 +204,76 @@
         var view_select = $("#glm-event-view-select");
         view_select.hide();
 
+
+        {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}');