Adding the leaflet map to event edit page.

For the edit location part of the event edit page.
Adding new openmap leaflet javascript if option is set.

diff --git a/views/admin/events/edit.html b/views/admin/events/edit.html
index 1964a09..cea940f 100644 (file)
--- a/views/admin/events/edit.html
+++ b/views/admin/events/edit.html
@@ -1199,65 +1199,139 @@
             var location = new Object();
             var marker = new Object();
 
-            function initMap(locID) {
+            {if $settings.selected_map_interface == 1}
+
+                /*
+                 *  Leaflet Map
+                 *  API reference: https://leafletjs.com/reference-1.3.2.html
+                 */
+                function initMap(locID) {
+
+                    console.log( 'locID: ', locID );
+
+                    // Set default - Need to make this configurable
+                    var startLat = $('#glmLat_' + locID).val();
+                    var startLon = $('#glmLng_' + locID).val();
+                    var defZoom = Number({$settings.maps_default_zoom});
+
+                    map[locID] = L.map('locationMap_' + locID).setView([startLat, startLon], defZoom);
+                    //var leafletTileServer = '{$settings.leaflet_tile_server}' + {literal}'{z}/{x}/{y}.png'{/literal};
+                    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(map[locID]);
+
+                    // Geocoder Object (temp use)
+                    // TODO: Need replace from Google
+                    geocoder[locID] = new google.maps.Geocoder();
+
+                    // Marker
+                    var leafletMarker = L.marker([startLat, startLon], {
+                        draggable: true
+                    }).addTo(map[locID]);
+
+                    // Marker Drag/Drop action
+                    leafletMarker.on('dragend', function(event){
+                        var marker = event.target;
+                        var position = marker.getLatLng();
+
+                        marker.setLatLng(new L.LatLng(position.lat, position.lng),{ draggable:'true' });
+                        map[locID].panTo(new L.LatLng(position.lat, position.lng))
+
+                        // Assign it to the lat/lon fields for submission
+                        $('#glmLat_' + locID).val(position.lat.toFixed(6));
+                        $('#glmLng_' + locID).val(position.lng.toFixed(6));
+                    });
 
-                // Set default - Need to make this configurable
-                var startLat = $('#glmLat_' + locID).val();
-                var startLon = $('#glmLng_' + locID).val();
+                    // When estimate location button is clicked, geocode using address
+                    $('#glm-estimate-location_' + locID).on('click', function() {
 
-                location[locID] = new google.maps.LatLng(startLat, startLon);
-                map[locID] = new google.maps.Map(document.getElementById('locationMap_' + locID), {
-                    zoom: 15,
-                    disableDefaultUI: false,
-                    mapTypeId: google.maps.MapTypeId.MAP,
-                });
+                        // Stop any automatic updates
+                        mapLocationAuto[locID] = false;
 
-                geocoder[locID] = new google.maps.Geocoder();
-                marker[locID] = new google.maps.Marker({
-                    map: map[locID],
-                    position: location[locID],
-                    draggable: enableDraggable,
-                    animation: google.maps.Animation.DROP,
-                    title: "This is your location"
-                });
-                map[locID].setCenter(location[locID]);
+                        glmGeocode(locID);
+                    });
 
-                // Listen for an end of drag event for the map marker
-                google.maps.event.addListener(marker[locID],'dragend',function(event) {
+                    // When an address is updated and mapLocationAuto is set for that locID, geocode using address
+                    $('.location-address').on('change', function() {
+                        locID = $(this).attr('data-id');
+                        if (mapLocationAuto[locID]) {
+                            glmGeocode(locID);
+                        }
+                    });
 
-                    // Stop any automatic updates
-                    mapLocationAuto[locID] = false;
+                }
+            {/if}
 
-                    // Get the end postion
-                    glmLat = this.position.lat();
-                    glmLng = this.position.lng();
 
-                    // Assign it to the hidden fields for submission
-                    $('#glmLat_' + locID).val(glmLat.toFixed(6));
-                    $('#glmLng_' + locID).val(glmLng.toFixed(6));
+            {if $settings.selected_map_interface == 2}
+                function initMap(locID) {
 
-                    // Also display it to the user
-                    $('#mapPosition_' + locID).html('Lat ' + glmLat.toFixed(4) + ', Lon ' + glmLng.toFixed(4));
-                });
+                    // Set default - Need to make this configurable
+                    var startLat = $('#glmLat_' + locID).val();
+                    var startLon = $('#glmLng_' + locID).val();
 
-                // When estimate location button is clicked, geocode using address
-                $('#glm-estimate-location_' + locID).on('click', function() {
+                    location[locID] = new google.maps.LatLng(startLat, startLon);
+                    map[locID] = new google.maps.Map(document.getElementById('locationMap_' + locID), {
+                        zoom: 15,
+                        disableDefaultUI: false,
+                        mapTypeId: google.maps.MapTypeId.MAP,
+                    });
 
-                    // Stop any automatic updates
-                    mapLocationAuto[locID] = false;
+                    geocoder[locID] = new google.maps.Geocoder();
+                    marker[locID] = new google.maps.Marker({
+                        map: map[locID],
+                        position: location[locID],
+                        draggable: enableDraggable,
+                        animation: google.maps.Animation.DROP,
+                        title: "This is your location"
+                    });
+                    map[locID].setCenter(location[locID]);
 
-                    glmGeocode(locID);
-                });
+                    // Listen for an end of drag event for the map marker
+                    google.maps.event.addListener(marker[locID],'dragend',function(event) {
+
+                        // Stop any automatic updates
+                        mapLocationAuto[locID] = false;
+
+                        // Get the end postion
+                        glmLat = this.position.lat();
+                        glmLng = this.position.lng();
+
+                        // Assign it to the hidden fields for submission
+                        $('#glmLat_' + locID).val(glmLat.toFixed(6));
+                        $('#glmLng_' + locID).val(glmLng.toFixed(6));
+
+                        // Also display it to the user
+                        $('#mapPosition_' + locID).html('Lat ' + glmLat.toFixed(4) + ', Lon ' + glmLng.toFixed(4));
+                    });
+
+                    // When estimate location button is clicked, geocode using address
+                    $('#glm-estimate-location_' + locID).on('click', function() {
+
+                        // Stop any automatic updates
+                        mapLocationAuto[locID] = false;
 
-                // When an address is updated and mapLocationAuto is set for that locID, geocode using address
-                $('.location-address').on('change', function() {
-                    locID = $(this).attr('data-id');
-                    if (mapLocationAuto[locID]) {
                         glmGeocode(locID);
-                    }
-                });
+                    });
 
-            }
+                    // When an address is updated and mapLocationAuto is set for that locID, geocode using address
+                    $('.location-address').on('change', function() {
+                        locID = $(this).attr('data-id');
+                        if (mapLocationAuto[locID]) {
+                            glmGeocode(locID);
+                        }
+                    });
+
+                }
+            {/if}
 
             function glmGeocode(locID) {
 

diff --git a/views/admin/events/editLocation.html b/views/admin/events/editLocation.html
index d3b02fd..cfe0234 100644 (file)
--- a/views/admin/events/editLocation.html
+++ b/views/admin/events/editLocation.html
@@ -1,8 +1,16 @@
 
 <!-- Location -->
 
-<script src="//maps.googleapis.com/maps/api/js?{if $settings.google_maps_api_key != ''}&key={$settings.google_maps_api_key}{/if}"></script>
-<script type="text/javascript">var enableDraggable = true;</script>
+{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>
+    <!-- Use Google for Geocoding till we build a geocoding server -->
+    <script src="//maps.googleapis.com/maps/api/js?&key="></script>
+{/if}
+{if $settings.selected_map_interface == 2}
+    <script src="//maps.googleapis.com/maps/api/js?&key={$settings.google_maps_api_key}"></script>
+    <script type="text/javascript">var enableDraggable = true;</script>
+{/if}
 
 <!-- Add New City Dialog Box -->
 <div id="newCityDialog" class="glm-dialog-box" title="Enter a New City">
@@ -185,7 +193,15 @@
                                         </span>
                                     <div id="glm-estimate-location_{$loc.id}" class="button button-secondary">Map Location Using Above Address</div>
                                     <p>
-                                        <div id="locationMap_{$loc.id}" class="glm-map-edit">(map loads here)</div>
+                                        {if $settings.selected_map_interface == 1}
+                                            <!--  Leaflet Map -->
+                                            <div id="locationMap_{$loc.id}" style="height: 400px; width: 600px;"></div>
+                                        {/if}
+
+                                        {if $settings.selected_map_interface == 2}
+                                            <!-- Google Map -->
+                                            <div id="locationMap_{$loc.id}" class="glm-map-edit-small" style="height: 400; width: 600px;">(map loads here)</div>
+                                        {/if}
                                         <p>
                                             <b>Position:</b>
                                             &nbsp;Lat <input id="glmLat_{$loc.id}" name="Loc{$loc.id}_lat" type="text" value="{$loc.lat}" class="glm-form-text-input-veryshort">
@@ -324,7 +340,16 @@
                     -->
                         <div id="glm-estimate-location_{ newLocID }" class="button button-secondary">Map Location Using Address</div>
                         <p>
-                            <div id="locationMap_{ newLocID }" class="glm-map-edit">(map loads here)</div>
+                            {if $settings.selected_map_interface == 1}
+                                <!--  Leaflet Map -->
+                                <div id="locationMap_{ newLocID }" style="height: 400px; width: 600px;"></div>
+                            {/if}
+
+                            {if $settings.selected_map_interface == 2}
+                                <!-- Google Map -->
+                                <div id="locationMap_{ newLocID }" class="glm-map-edit-small" style="height: 400; width: 600px;">(map loads here)</div>
+                            {/if}
+
                             <p>
                                 <b>Position:</b>
                                 &nbsp;Lat <input id="glmLat_{ newLocID }" name="{ newLocID }_lat" type="text" value="{$newLocation.fieldData.lat}" class="glm-form-text-input-veryshort">