Use map settings from settings endpoint (#881)

assets/js/src/core/components/geo-map/components/address-search-field/address-search-field.tsx

@@ -17,6 +17,7 @@ import { useTranslation } from 'react-i18next'
 import { ERROR_ADDRESS_NOT_FOUND, geoCode } from '@Pimcore/components/geo-map/utils/geocode'
 import { useAlertModal } from '@Pimcore/components/modal/alert-modal/hooks/use-alert-modal'
 import { type GeoPoint } from '@Pimcore/components/geo-map/types/geo-types'
+import { useSettings } from '@Pimcore/modules/app/settings/hooks/use-settings'
 
 interface AddressSearchFieldProps {
   onSearch: (geoPoint?: GeoPoint) => void
@@ -26,13 +27,14 @@ interface AddressSearchFieldProps {
 export const AddressSearchField = (props: AddressSearchFieldProps): React.JSX.Element => {
   const { t } = useTranslation()
   const alertModal = useAlertModal()
+  const settings = useSettings()
 
   const onSearch = async (value: string): Promise<void> => {
     if (value === '') {
       props.onSearch(undefined); return
     }
 
-    await geoCode(value)
+    await geoCode(value, settings.maps.geocoding_url_template as string)
       .then(props.onSearch)
       .catch((error: Error) => {
         if (error.message === ERROR_ADDRESS_NOT_FOUND) {

assets/js/src/core/components/geo-map/geo-map.tsx

@@ -24,6 +24,7 @@ import { type GeoPoints, type GeoPoint, type GeoType, type GeoBounds } from '@Pi
 import { addGeoPolyLineToolbar } from '@Pimcore/components/geo-map/toolbar/add-geo-poly-line-toolbar'
 import { addGeoPolygonToolbar } from '@Pimcore/components/geo-map/toolbar/add-geo-polygon-toolbar'
 import { addGeoBoundsToolbar } from '@Pimcore/components/geo-map/toolbar/add-geo-bounds-toolbar'
+import { useSettings } from '@Pimcore/modules/app/settings/hooks/use-settings'
 
 L.Icon.Default.mergeOptions({
   iconRetinaUrl: '/bundles/pimcorestudioui/img/leaflet/marker-icon-2x.png',
@@ -64,6 +65,7 @@ const GeoMap = forwardRef<GeoMapAPI, GeoMapProps>((props, ref): React.JSX.Elemen
   const [key, setKey] = useState<number>(0)
   const [isVisible, setIsVisible] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
+  const settings = useSettings()
 
   const geoMapApi: GeoMapAPI = {
     reset: () => {
@@ -94,15 +96,14 @@ const GeoMap = forwardRef<GeoMapAPI, GeoMapProps>((props, ref): React.JSX.Elemen
       } else {
         map.setView([props.lat ?? 0, props.lng ?? 0], props.zoom ?? 1)
       }
-
-      L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      L.tileLayer(settings.maps.tile_layer_url_template as string, {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
       }).addTo(map)
 
       const featureGroup = L.featureGroup().addTo(map)
 
       if (props.mode === 'geoPoint') {
-        addGeoPointToolbar(map, featureGroup, value as GeoPoint, props.onChange, props.disabled)
+        addGeoPointToolbar(map, featureGroup, settings.maps.reverse_geocoding_url_template as string, value as GeoPoint, props.onChange, props.disabled)
       } else if (props.mode === 'geoPolyLine') {
         addGeoPolyLineToolbar(map, featureGroup, value as GeoPoints, props.onChange, props.disabled)
       } else if (props.mode === 'geoPolygon') {

assets/js/src/core/components/geo-map/toolbar/add-geo-point-toolbar.ts

@@ -16,7 +16,7 @@ import { reverseGeocode } from '@Pimcore/components/geo-map/utils/geocode'
 import { type GeoPoint } from '@Pimcore/components/geo-map/types/geo-types'
 import { convertLatLngToGeoPoint } from '@Pimcore/components/geo-map/utils/lat-lng-convert'
 
-export const addGeoPointToolbar = (leafletMap: L.Map, featureGroup: L.FeatureGroup, geoPoint?: GeoPoint, onChange?: (geoPoint: GeoPoint) => void, disabled?: boolean): void => {
+export const addGeoPointToolbar = (leafletMap: L.Map, featureGroup: L.FeatureGroup, reverseGeoCodeUrlTemplate: string, geoPoint?: GeoPoint, onChange?: (geoPoint: GeoPoint) => void, disabled?: boolean): void => {
   leafletMap.addLayer(featureGroup)
 
   const marker = geoPoint !== undefined ? L.marker([geoPoint.latitude, geoPoint.longitude]) : undefined
@@ -53,7 +53,7 @@ export const addGeoPointToolbar = (leafletMap: L.Map, featureGroup: L.FeatureGro
     featureGroup.addLayer(layer)
 
     if (featureGroup.getLayers().length === 1) {
-      await reverseGeocode(layer).catch((error) => {
+      await reverseGeocode(layer, reverseGeoCodeUrlTemplate).catch((error) => {
         console.error(error)
       })
       onChange?.(convertLatLngToGeoPoint(layer.getLatLng()))
@@ -63,7 +63,7 @@ export const addGeoPointToolbar = (leafletMap: L.Map, featureGroup: L.FeatureGro
   leafletMap.on('draw:editmove', async function (e) {
     const layer = e.layer as L.Marker
 
-    await reverseGeocode(layer).catch((error) => {
+    await reverseGeocode(layer, reverseGeoCodeUrlTemplate).catch((error) => {
       console.error(error)
     })
     onChange?.(convertLatLngToGeoPoint(layer.getLatLng()))

assets/js/src/core/components/geo-map/utils/geocode.ts

@@ -16,8 +16,8 @@ import { type GeoPoint } from '@Pimcore/components/geo-map/types/geo-types'
 
 export const ERROR_ADDRESS_NOT_FOUND = 'address_not_found'
 
-export const geoCode = async (address: string): Promise<GeoPoint> => {
-  const geoCodeUrl = 'https://nominatim.openstreetmap.org/search?q={q}&addressdetails=1&format=json&limit=1'.replace('{q}', encodeURIComponent(address))
+export const geoCode = async (address: string, geoCodeUrlTemplate: string): Promise<GeoPoint> => {
+  const geoCodeUrl = geoCodeUrlTemplate.replace('{q}', encodeURIComponent(address))
 
   const response = await fetch(geoCodeUrl)
 
@@ -36,10 +36,10 @@ export const geoCode = async (address: string): Promise<GeoPoint> => {
   }
 }
 
-export const reverseGeocode = async (layerObj: L.Marker): Promise<void> => {
-  const reverseGeocodeUrl = 'https://nominatim.openstreetmap.org/reverse?format=json&lat={lat}&lon={lng}'
+export const reverseGeocode = async (layerObj: L.Marker, reverseGeoCodeUrlTemplate: string): Promise<void> => {
+  const reverseGeocodeUrl = reverseGeoCodeUrlTemplate
     .replace('{lat}', layerObj.getLatLng().lat.toString())
-    .replace('{lng}', layerObj.getLatLng().lng.toString())
+    .replace('{lon}', layerObj.getLatLng().lng.toString())
 
   await fetch(reverseGeocodeUrl).then(async (response: Response | undefined | null) => {
     if (response === undefined || response === null) {

public/build/8e3f61a4-5f5b-4758-b7d9-a5e3651538a1/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "vendor": {
+      "js": [
+        "/bundles/pimcorestudioui/build/8e3f61a4-5f5b-4758-b7d9-a5e3651538a1/vendor.js"
+      ]
+    }
+  }
+}

public/build/8e3f61a4-5f5b-4758-b7d9-a5e3651538a1/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/8e3f61a4-5f5b-4758-b7d9-a5e3651538a1/vendor.js": "/bundles/pimcorestudioui/build/8e3f61a4-5f5b-4758-b7d9-a5e3651538a1/vendor.js"
+}

public/build/9047379e-01ae-4baf-a8d5-068f8abb8b74/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/9047379e-01ae-4baf-a8d5-068f8abb8b74/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/9047379e-01ae-4baf-a8d5-068f8abb8b74/core-dll.js"
+      ]
+    }
+  }
+}