diff --git a/Classes/FormEngine/FieldControl/LocationMapWizard.php b/Classes/FormEngine/FieldControl/LocationMapWizard.php index 28594fb3..f3d4bf07 100644 --- a/Classes/FormEngine/FieldControl/LocationMapWizard.php +++ b/Classes/FormEngine/FieldControl/LocationMapWizard.php @@ -61,6 +61,7 @@ public function render(): array $resultArray['linkAttributes']['data-label-title'] = $this->getLanguageService()->sL('LLL:EXT:tt_address/Resources/Private/Language/locallang_db.xlf:tt_address.locationMapWizard'); $resultArray['linkAttributes']['data-label-close'] = $this->getLanguageService()->sL('LLL:EXT:tt_address/Resources/Private/Language/locallang_db.xlf:tt_address.locationMapWizard.close'); $resultArray['linkAttributes']['data-label-import'] = $this->getLanguageService()->sL('LLL:EXT:tt_address/Resources/Private/Language/locallang_db.xlf:tt_address.locationMapWizard.import'); + $resultArray['linkAttributes']['data-label-search'] = $this->getLanguageService()->sL('LLL:EXT:core/Resources/Private/Language/locallang_common.xlf:search'); $resultArray['linkAttributes']['data-lat'] = $lat; $resultArray['linkAttributes']['data-lon'] = $lon; $resultArray['linkAttributes']['data-glat'] = $gLat; diff --git a/Resources/Public/Backend/LocationMapWizard/leafletBackend.css b/Resources/Public/Backend/LocationMapWizard/leafletBackend.css index f2b3540b..cb2cb178 100644 --- a/Resources/Public/Backend/LocationMapWizard/leafletBackend.css +++ b/Resources/Public/Backend/LocationMapWizard/leafletBackend.css @@ -1,4 +1,5 @@ #t3js-location-map-wrap { + background: #EDEDED; position: absolute; width: 80vw; height: 80vh; @@ -21,11 +22,6 @@ border: 1px solid #CCC; } -.t3js-location-map-title>div.btn-group { - position: absolute; - left: 15px; -} - .t3js-location-map-title a { font-weight: bold; } @@ -34,6 +30,14 @@ background: rgb(237, 237, 237); font-family: Share, Verdana, Arial, Helvetica, sans-serif; font-size: 20px; - padding: 5px 15px; - text-align: center; + text-align: left; + position: relative; + padding: 0 15px 10px; +} + +#t3js-location-map-search { + margin-top: 10px; +} +.t3js-location-map-search-input { + max-width: 200px; } \ No newline at end of file diff --git a/Resources/Public/JavaScript/LeafletBackend.js b/Resources/Public/JavaScript/LeafletBackend.js index 23468cfe..08a458c6 100644 --- a/Resources/Public/JavaScript/LeafletBackend.js +++ b/Resources/Public/JavaScript/LeafletBackend.js @@ -15,14 +15,18 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/TtAddress/leaflet-core-1 $tilesUrl: null, $tilesCopy: null, $zoomLevel: 13, + $zoomLevelDetail: 13, $marker: null, $map: null }; + var geoCodeService = 'https://nominatim.openstreetmap.org/search/'; + $(function () { // basic variable initalisation LeafBE.$element = $('#location-map-container-a'); LeafBE.$labelTitle = LeafBE.$element.attr('data-label-title'); + LeafBE.$labelSearch = LeafBE.$element.attr('data-label-search'); LeafBE.$labelClose = LeafBE.$element.attr('data-label-close'); LeafBE.$labelImport = LeafBE.$element.attr('data-label-import'); LeafBE.$latitude = LeafBE.$element.attr('data-lat'); @@ -44,13 +48,19 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/TtAddress/leaflet-core-1 $('body').append( '
' + '
' + + '

' + LeafBE.$labelTitle + '

' + '' + - LeafBE.$labelTitle + + '' + '
' + '
' + '
' + @@ -144,6 +154,27 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/TtAddress/leaflet-core-1 // close map after import of coordinates. $('#t3js-location-map-wrap').removeClass('active'); }); + $('#t3js-location-map-search').on('submit', function (e) { + e.preventDefault(); + e.stopPropagation(); + + var params = { + q: $('#t3js-location-map-search-input').val(), + format: 'json', + addressdetails: true, + limit: 1 + }; + $.getJSON(geoCodeService, params, function (data) { + if (data.length > 0) { + var location = {lat: data[0].lat, lng: data[0].lon}; + LeafBE.$marker.setLatLng(location); + LeafBE.$map.panTo(location); + LeafBE.$map.setZoom(LeafBE.$zoomLevelDetail); + } + }); + + return false; + }); // close overlay without any further action $('#t3js-ttaddress-close-map').on('click', function () { $('#t3js-location-map-wrap').removeClass('active');