Added geolocation to event location map and fixed other related issues.
authorChuck Scott <cscott@gaslightmedia.com>
Mon, 27 Aug 2018 18:34:15 +0000 (14:34 -0400)
committerChuck Scott <cscott@gaslightmedia.com>
Mon, 27 Aug 2018 18:34:15 +0000 (14:34 -0400)
views/admin/events/edit.html [changed mode: 0644->0755]
views/admin/events/editLocation.html [changed mode: 0644->0755]

old mode 100644 (file)
new mode 100755 (executable)
index cea940f..07e07c3
                     var glmLat = $('#glmLat_' + locID).val();
                     var glmLng = $('#glmLng_' + locID).val();
 
-                    location[locID] = new google.maps.LatLng(glmLat, glmLng);
+                    {if $settings.selected_map_interface == 2}
+                        location[locID] = new google.maps.LatLng(glmLat, glmLng);
+                    {/if}
 
                     initMap(locID);
 
            }
 
             /*
-             * Google Maps
-             *  API reference: https://developers.google.com/maps/documentation/javascript/reference
+             * Mapping
              */
             var map = new Object();
             var geocoder = new Object();
 
             {if $settings.selected_map_interface == 1}
 
+                var nominatimAPI = "https://nominatim.openstreetmap.org/search/";
+            
                 /*
                  *  Leaflet Map
                  *  API reference: https://leafletjs.com/reference-1.3.2.html
                        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
                     // When estimate location button is clicked, geocode using address
                     $('#glm-estimate-location_' + locID).on('click', function() {
 
-                        // Stop any automatic updates
-                        mapLocationAuto[locID] = false;
+                        var addrStreet = $('#address_' + locID).val();
+                        var addrCity = $('#city_' + locID + ' option:selected').text();
+                        var addrState = $('#state_' + locID).val();
+                        var addrCountry = $('#country_' + locID).val();
+                        var addrZip = $('#zip_' + locID).val();
+
+                        var location = $.getJSON( nominatimAPI, {
+                            format: 'json',
+                            street: addrStreet,
+                            city: addrCity,
+                            state: addrState,
+                            country: addrCountry,
+                            postalcode: addrZip
+                        })
+                        .fail(function(data) {
+                            alert('Sorry, we were unable to get a location from the above address.');                        
+                        })
+                        .done(function( data ) {
+
+                            if( !data[0] || !data[0].lat || !data[0].lon ) {
+                                alert('Sorry, we were unable to get a location from the above address.');
+                            } else {
+            
+                                // Assign the new position to the hidden fields for submission
+                                glmLat = Number(data[0].lat);
+                                glmLng = Number(data[0].lon);
+                                $('#glmLat_' + locID).val(glmLat.toFixed(6));
+                                $('#glmLng_' + locID).val(glmLng.toFixed(6));
+                                    
+                                // Move map pointer to the proper location
+                                leafletMarker.setLatLng(new L.LatLng(glmLat, glmLng),{ draggable:'true' });
+                                map[locID].panTo(new L.LatLng(glmLat, glmLng));
 
-                        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) {
-
-                // Get all address parts
-                var geoAddr1 = $('#address_' + locID ).val().trim();
-                var geoAddr2 = '';  // $('#addr2').val().trim();
-                var geoCity = $('#city_' + locID).find('option:selected').text().trim();
-                var geoState = $('#state_' + locID).val();
-                var geoZIP = $('#zip_' + locID).val().trim();
-                var geoCountry = $('#country_' + locID).find('option:selected').text().trim();
-
-                // Assemble address string for
-                var geoAddress = geoAddr1 + ', ' + geoAddr2 + ', ' + geoCity + ', ' + geoState + ' ' + geoZIP + ', ' + geoCountry;
-
-                // Send to Google Geocoder
-                geocoder[locID].geocode( { 'address': geoAddress }, function(results, status) {
 
-                    // If we have a geocode solution
-                    if (status == google.maps.GeocoderStatus.OK) {
-
-                        // Center the map and locate the marger to the new location
-                        map[locID].setCenter(results[0].geometry.location);
-                        marker[locID].setPosition( results[0].geometry.location );
-
-                        // Assign the new position to the hidden fields for submission
-                        glmLat = results[0].geometry.location.lat();
-                        glmLng = results[0].geometry.location.lng();
-                        $('#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));
-
-                        // Otherwise tell the user.
-                    } else {
-                        alert('Not able to estimate map position from the current address.');
-                    }
-                });
-
-
-            }
+                function glmGeocode(locID) {
+    
+                    // Get all address parts
+                    var geoAddr1 = $('#address_' + locID ).val().trim();
+                    var geoAddr2 = '';  // $('#addr2').val().trim();
+                    var geoCity = $('#city_' + locID).find('option:selected').text().trim();
+                    var geoState = $('#state_' + locID).val();
+                    var geoZIP = $('#zip_' + locID).val().trim();
+                    var geoCountry = $('#country_' + locID).find('option:selected').text().trim();
+    
+                    // Assemble address string for
+                    var geoAddress = geoAddr1 + ', ' + geoAddr2 + ', ' + geoCity + ', ' + geoState + ' ' + geoZIP + ', ' + geoCountry;
+    
+                    // Send to Google Geocoder
+                    geocoder[locID].geocode( { 'address': geoAddress }, function(results, status) {
+    
+                        // If we have a geocode solution
+                        if (status == google.maps.GeocoderStatus.OK) {
+    
+                            // Center the map and locate the marger to the new location
+                            map[locID].setCenter(results[0].geometry.location);
+                            marker[locID].setPosition( results[0].geometry.location );
+    
+                            // Assign the new position to the hidden fields for submission
+                            glmLat = results[0].geometry.location.lat();
+                            glmLng = results[0].geometry.location.lng();
+                            $('#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));
+    
+                            // Otherwise tell the user.
+                        } else {
+                            alert('Not able to estimate map position from the current address.');
+                        }
+                    });
+    
+    
+                }
 
+            {/if}
+                
             /*
              * Misc support items
              */
old mode 100644 (file)
new mode 100755 (executable)
index cfe0234..55f5d94
@@ -4,8 +4,6 @@
 {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>
                         <select id="city_{ newLocID }" data-id="{ newLocID }" class="city-picklist location-address" name="{ newLocID }_city">
                             <option value="0"></option>
             {foreach from=$newLocation.fieldData.city.list item=v}
-                            <option value="{$v.value}"{if $v.default} selected="selected"{/if}>
-                                {$v.name}
-                            </option>
+                            <option value="{$v.value}"{if $v.default} selected="selected"{/if}>{$v.name}</option>
             {/foreach}
                         </select>
                     </td>