#1519 Location improvements: reverse geocoding for auto location field

inc/classes/BxDolLocationField.php

@@ -61,12 +61,10 @@ class BxDolLocationField extends BxDolFactoryObject
                 $sLocationString = $aVars['lat'] . ', ' . $aVars['lng'];
             }
 
-            $aVars = array (
-                'name' => $aInput['name'],
-                'input' => $oForm->genInputSwitcher($aInputField),
-                'id_status' => $oForm->getInputId($aInput) . '_status',
-                'location_string' => $sLocationString,
-            );
+            $aVars['name'] = $aInput['name'];
+            $aVars['input'] = $oForm->genInputSwitcher($aInputField);
+            $aVars['id_status'] = $oForm->getInputId($aInput) . '_status';
+            $aVars['location_string'] = $sLocationString;
 
             $sRet = $oForm->getTemplate()->parseHtmlByName('location_field_plain_auto.html', $aVars);
         }

modules/base/general/template/css/forms.css

@@ -24,12 +24,3 @@
 .bx-base-general-use-as-thumb label {
     vertical-align:middle;
 }
-
-/* location input */
-
-.bx-form-input-location-cont > div {
-    float:left;
-    line-height:1.5rem;
-}
-
-

template/css/forms.css

@@ -709,3 +709,11 @@
 .bx-form-input-location-copyright {
     float:right;
 }
+
+.bx-form-input-location-auto-cont {
+    display:table;
+}
+.bx-form-input-location-auto-cont > div {
+    display:table-cell;
+    vertical-align:middle;
+}

template/location_field_plain_auto.html

@@ -1,11 +1,20 @@
 
-<div class="bx-form-input-location-cont bx-clearfix">
-    __input__
-    <div id="__id_status__" class="bx-def-margin-sec-left">__location_string__</div>
+<div class="bx-form-input-location-auto-cont bx-clearfix">
+    <div>__input__</div>
+    <div id="__id_status__" class="bx-def-padding-sec-left">
+        <span>__location_string__</span>
+        <div id="__id_status__copyright" class="bx-def-margin-thd-top bx-def-font-small bx-def-font-grayed"></div>
+    </div>    
 </div>
 
 <input type="hidden" name="__name___lat" value="__lat__" />
 <input type="hidden" name="__name___lng" value="__lng__" />
+<input type="hidden" name="__name___country" value="__country__" />
+<input type="hidden" name="__name___state" value="__state__" />
+<input type="hidden" name="__name___city" value="__city__" />
+<input type="hidden" name="__name___zip" value="__zip__" />
+<input type="hidden" name="__name___street" value="__street__" />
+<input type="hidden" name="__name___street_number" value="__street_number__" />
 
 <script>
     $('input[name=__name__][type=checkbox]').on('change', function () {
@@ -13,23 +22,69 @@
         var callbackOnLocationReset = function (error) {
             $('[name="__name___lat"]').val('');
             $('[name="__name___lng"]').val('');
-            $('#__id_status__').html("<bx_text_js:_sys_location_undefined />");
+            $('#__id_status__ span').html("<bx_text_js:_sys_location_undefined />");
             $(_self).prop("checked", false);
             $(_self).parents('.bx-switcher-cont').removeClass('on').addClass('off');
         }
 
         var callbackOnLocationSucess = function (position) {
-            $('[name="__name___lat"]').val(position.coords.latitude);
-            $('[name="__name___lng"]').val(position.coords.longitude);
-            $('#__id_status__').html(position.coords.latitude + ', ' + position.coords.longitude);
+
+            var iTimeout = 200;
+            if ('undefined' !== typeof(glBxLocationFieldPlainAutoGeocodingRequest) && glBxLocationFieldPlainAutoGeocodingRequest) { // cancel previous request
+                clearTimeout(glBxLocationFieldPlainAutoGeocodingRequest);
+                glBxLocationFieldPlainAutoGeocodingRequest = null;
+                iTimeout = 1000;
+            }
+
+            glBxLocationFieldPlainAutoGeocodingRequest = setTimeout(function () {
+                $.getJSON('https://nominatim.openstreetmap.org/reverse?lat=' + encodeURIComponent(position.coords.latitude) + '&lon=' + encodeURIComponent(position.coords.longitude) + '&format=json&addressdetails=1', function (oResult) {
+
+                    glBxLocationFieldPlainAutoGeocodingRequest = false;
+
+                    if (('object' === typeof oResult) && ('undefined' !== typeof oResult.display_name) && ('undefined' !== typeof oResult.address) && ('undefined' !== typeof oResult.address.country_code)) {
+                        $('[name="__name___lat"]').val(position.coords.latitude);
+                        $('[name="__name___lng"]').val(position.coords.longitude);
+
+                        $('[name="__name___country"]').val(oResult.address.country_code.toUpperCase());
+
+                        if ('undefined' !== typeof oResult.address.suburb)
+                            $('[name="__name___city"]').val(oResult.address.suburb);
+                        else if ('undefined' !== typeof oResult.address.town)
+                            $('[name="__name___city"]').val(oResult.address.town);
+                        else if ('undefined' !== typeof oResult.address.city)
+                            $('[name="__name___city"]').val(oResult.address.city);
+
+                        var oMap = {
+                            'postcode': '__name___zip',
+                            'state': '__name___state',
+                            'road': '__name___street',
+                            'house_number': '__name___street_number',
+                        }
+                        $.each(oMap, function (i) {
+                            if ('undefined' !== typeof oResult.address[i])
+                                $('[name="' + this + '"]').val(oResult.address[i]);
+                        });
+
+                        $('#__id_status__ span').html(oResult.display_name);
+                        if  ('undefined' !== typeof oResult.licence)
+                            $('#__id_status__copyright').html(oResult.licence);
+
+                    } 
+                    else {
+                        $('#__id_status__ span').html(position.coords.latitude + ', ' + position.coords.longitude);
+                    }
+                });
+            }, iTimeout);
+
+
         }
 
         if ($(this).is(':checked')) {
-            $('#__id_status__').html('<bx_text_js:_sys_location_determining />');
+            $('#__id_status__ span').html('<bx_text_js:_sys_location_determining />');
             if (navigator.geolocation)
                 navigator.geolocation.getCurrentPosition(callbackOnLocationSucess, callbackOnLocationReset);
             else
-                $('#__id_status__').html('<bx_text_js:_sys_location_geolocation_not_supported_by_browser />');
+                $('#__id_status__ span').html('<bx_text_js:_sys_location_geolocation_not_supported_by_browser />');
         }
         else {
             callbackOnLocationReset();