From 13a18741463d13fb9c3cb9302012bc7947570f9f Mon Sep 17 00:00:00 2001 From: Chuck Scott Date: Tue, 21 Aug 2018 13:58:56 -0400 Subject: [PATCH] Added Leaflet maps support --- models/front/events/detail.php | 60 +++++++++++++++++------- views/front/events/detail.html | 86 ++++++++++++++++++++++++++++++++-- 2 files changed, 125 insertions(+), 21 deletions(-) mode change 100644 => 100755 models/front/events/detail.php mode change 100644 => 100755 views/front/events/detail.html diff --git a/models/front/events/detail.php b/models/front/events/detail.php old mode 100644 new mode 100755 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 new mode 100755 index 647cd2c..9b72bda --- a/views/front/events/detail.html +++ b/views/front/events/detail.html @@ -25,14 +25,17 @@ {if $event.locations}
{if $event.locations.lat && $event.locations.address} -
@@ -44,14 +47,12 @@ {elseif $event.member && ($event.use_member_location.value || $event.other_ref_dest) }
{if $event.member.lat} - @@ -112,7 +113,12 @@ {$rec.name} {/if} {if $expired} (Expired) {/if} - + jQuery('#map-dialog').dialog({ + height: 490, + width: 630, + modal: true, + autoOpen: false + });
{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 © OpenStreetMap Contrib, CC-BY-SA'; + + 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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Gaslight Media'; + 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}'); -- 2.17.1