Fix Map Attribution Problems (#10696)

* Fix Map Attribution Errors * Move "Limit" Dropdown to the left * fix pagination styles * move attribution to the left
2026-01-29 00:27:59 -05:00 · 2021-12-27 20:35:52 +01:00
parent 54ec5b2436
commit 04c65e6d09
8 changed files with 54 additions and 21 deletions
--- 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
--- 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;
--- 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 } : {}),
 			});
--- 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
--- 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');
--- a/app/src/layouts/map/map.vue
+++ b/app/src/layouts/map/map.vue
@@ -52,9 +52,8 @@

 		<template v-if="loading || itemCount > 0">
 			<div class="footer">
-				<div class="pagination">
+				<div v-if="totalPages > 1" class="pagination">
 					<v-pagination
-						v-if="totalPages > 1"
 						:length="totalPages"
 						:total-visible="7"
 						show-first-last
@@ -298,6 +297,7 @@ export default defineComponent({
 	background-color: var(--background-page);
 	border: var(--border-width) solid var(--background-page);
 	border-radius: var(--border-radius);
+	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);

 	span {
 		width: auto;
@@ -320,13 +320,13 @@ export default defineComponent({

 .footer {
 	position: absolute;
-	right: 10px;
-	bottom: 10px;
-	left: 10px;
+	right: 0;
+	bottom: 0;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	box-sizing: border-box;
+	padding: 10px;
 	overflow: hidden;
 	background-color: transparent !important;

@@ -334,10 +334,7 @@ export default defineComponent({
 		--v-button-height: 28px;

 		display: inline-block;
-
-		button {
-			box-shadow: 0 0 2px 1px rgb(0 0 0 / 0.2);
-		}
+		margin-right: 10px;
 	}
 }

@@ -351,3 +348,12 @@ export default defineComponent({
 	opacity: 0;
 }
 </style>
+<style lang="scss">
+.footer {
+	.pagination {
+		button {
+			box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
+		}
+	}
+}
+</style>
--- a/app/src/styles/lib/_mapbox.scss
+++ b/app/src/styles/lib/_mapbox.scss
@@ -112,10 +112,21 @@
 	font-size: 0.8em;
 	color: var(--foreground-normal);
 	background: var(--background-input);
-	border-radius: 6px 0 0 0;
-	border: 1px solid var(--border-normal);
-	border-right: none;
-	border-bottom: none;
+	border-radius: 0 6px 0 0;
+	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
+
+	a {
+		color: var(--foreground-normal);
+
+		&:hover {
+			color: var(--foreground-normal-alt);
+		}
+	}
+}
+
+.maplibregl-ctrl-bottom-left {
+	display: flex;
+	flex-direction: column-reverse;
 }

 .mapboxgl-ctrl-geocoder {
--- a/app/src/utils/geometry/basemap.ts
+++ b/app/src/utils/geometry/basemap.ts
@@ -8,6 +8,7 @@ export type BasemapSource = {
 	type: 'raster' | 'tile' | 'style';
 	url: string;
 	tileSize?: number;
+	attribution?: string;
 };

 const defaultBasemap: BasemapSource = {
@@ -15,6 +16,7 @@ const defaultBasemap: BasemapSource = {
 	type: 'raster',
 	url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
 	tileSize: 256,
+	attribution: '© OpenStreetMap contributors',
 };

 const baseStyle: Style = {
@@ -38,6 +40,7 @@ export function getStyleFromBasemapSource(basemap: BasemapSource): Style | strin
 	} else {
 		const style: Style = { ...baseStyle };
 		const source: RasterSource = { type: 'raster' };
+		if (basemap.attribution) source.attribution = basemap.attribution;
 		if (basemap.type == 'raster') {
 			source.tiles = expandUrl(basemap.url);
 			source.tileSize = basemap.tileSize || 512;