diff --git a/api/src/database/system-data/fields/settings.yaml b/api/src/database/system-data/fields/settings.yaml index 09cbea2bd7..d3fbff5ccc 100644 --- a/api/src/database/system-data/fields/settings.yaml +++ b/api/src/database/system-data/fields/settings.yaml @@ -343,3 +343,12 @@ fields: type: _neq: 'raster' hidden: true + - field: attribution + name: $t:fields.directus_settings.attribution + type: string + schema: + is_nullable: true + meta: + interface: input + options: + placeholder: $t:fields.directus_settings.attribution_placeholder diff --git a/app/src/interfaces/map/map.vue b/app/src/interfaces/map/map.vue index 5f1c273033..23fc944852 100644 --- a/app/src/interfaces/map/map.vue +++ b/app/src/interfaces/map/map.vue @@ -73,6 +73,7 @@ import maplibre, { Map, NavigationControl, GeolocateControl, + AttributionControl, } from 'maplibre-gl'; import MapboxDraw from '@mapbox/mapbox-gl-draw'; // @ts-ignore @@ -181,6 +182,7 @@ export default defineComponent({ watch(location, updateProjection); const controls = { + attribution: new AttributionControl(), draw: new MapboxDraw(getDrawOptions(geometryType)), fitData: new ButtonControl('mapboxgl-ctrl-fitdata', fitDataBounds), navigation: new NavigationControl({ @@ -250,9 +252,9 @@ export default defineComponent({ map = new Map({ container: container.value!, style: style.value, - customAttribution: '© OpenStreetMap contributors', dragRotate: false, - logoPosition: 'bottom-right', + logoPosition: 'bottom-left', + attributionControl: false, ...props.defaultView, ...(mapboxKey ? { accessToken: mapboxKey } : {}), }); @@ -269,6 +271,7 @@ export default defineComponent({ const { longitude, latitude } = event.coords; location.value = [longitude, latitude]; }); + map.addControl(controls.attribution, 'bottom-left'); map.addControl(controls.navigation, 'top-left'); map.addControl(controls.geolocate, 'top-left'); map.addControl(controls.fitData, 'top-left'); @@ -503,8 +506,8 @@ export default defineComponent({ .basemap-select { position: absolute; + right: 10px; bottom: 10px; - left: 10px; display: flex; align-items: center; justify-content: space-between; diff --git a/app/src/interfaces/map/options.vue b/app/src/interfaces/map/options.vue index e84744480b..10dcec82cb 100644 --- a/app/src/interfaces/map/options.vue +++ b/app/src/interfaces/map/options.vue @@ -85,7 +85,6 @@ export default defineComponent({ map = new Map({ container: mapContainer.value!, style: style.value, - customAttribution: '© OpenStreetMap contributors', ...(defaultView.value || {}), ...(mapboxKey ? { accessToken: mapboxKey } : {}), }); diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml index 33e6d711d6..fe45f62023 100644 --- a/app/src/lang/translations/en-US.yaml +++ b/app/src/lang/translations/en-US.yaml @@ -971,6 +971,8 @@ fields: basemaps_style: Mapbox Style mapbox_key: Mapbox Access Token mapbox_placeholder: pk.eyJ1Ijo..... + attribution: Attribution + attribution_placeholder: © OpenStreetMap contributors transforms_note: The Sharp method name and its arguments. See https://sharp.pixelplumbing.com/api-constructor for more information. additional_transforms: Additional Transformations project_name: Project Name diff --git a/app/src/layouts/map/components/map.vue b/app/src/layouts/map/components/map.vue index a5291aaec2..4fe08da72b 100644 --- a/app/src/layouts/map/components/map.vue +++ b/app/src/layouts/map/components/map.vue @@ -11,7 +11,6 @@ import 'maplibre-gl/dist/maplibre-gl.css'; import maplibre, { MapboxGeoJSONFeature, MapLayerMouseEvent, - AttributionControl, NavigationControl, GeolocateControl, LngLatBoundsLike, @@ -20,6 +19,7 @@ import maplibre, { LngLatLike, AnyLayer, Map, + AttributionControl, } from 'maplibre-gl'; import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'; import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'; @@ -86,7 +86,7 @@ export default defineComponent({ return getStyleFromBasemapSource(source); }); - const attributionControl = new AttributionControl({ compact: true }); + const attributionControl = new AttributionControl(); const navigationControl = new NavigationControl({ showCompass: false, }); @@ -125,8 +125,8 @@ export default defineComponent({ map = new Map({ container: 'map-container', style: style.value, - customAttribution: '© OpenStreetMap contributors', dragRotate: false, + attributionControl: false, ...props.camera, ...(mapboxKey ? { accessToken: mapboxKey } : {}), }); @@ -134,7 +134,7 @@ export default defineComponent({ if (geocoderControl) { map.addControl(geocoderControl as any, 'top-right'); } - map.addControl(attributionControl, 'top-right'); + map.addControl(attributionControl, 'bottom-left'); map.addControl(navigationControl, 'top-left'); map.addControl(geolocateControl, 'top-left'); map.addControl(fitDataControl, 'top-left'); diff --git a/app/src/layouts/map/map.vue b/app/src/layouts/map/map.vue index fb40096c28..d72cce745f 100644 --- a/app/src/layouts/map/map.vue +++ b/app/src/layouts/map/map.vue @@ -52,9 +52,8 @@