add fullscreen control

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
julien-nc · Jan 19, 2023 · 30f508e · 30f508e
1 parent fe96954
commit 30f508e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/css/maplibre.scss b/css/maplibre.scss
@@ -1,4 +1,6 @@
 .mapboxgl-ctrl-geocoder > input,
+.maplibregl-ctrl-fullscreen,
+.maplibregl-ctrl-shrink,
 .maplibregl-ctrl-terrain,
 .maplibregl-ctrl-terrain-enabled,
 .maplibregl-ctrl-geolocate,
@@ -9,6 +11,8 @@
 	border-radius: unset !important;
 }
 
+.maplibregl-ctrl-fullscreen,
+.maplibregl-ctrl-shrink,
 .maplibregl-ctrl-terrain,
 .maplibregl-ctrl-terrain-enabled,
 .maplibregl-ctrl-geolocate,
@@ -76,10 +80,12 @@
 .mapboxgl-ctrl-geocoder {
 	min-width: 200px;
 	width: 200px;
+	border-radius: var(--border-radius-large) !important;
 	> input {
 		color: var(--color-main-text) !important;
 		height: 36px !important;
 		padding: 6px 35px !important;
+		border-radius: var(--border-radius-large) !important;
 	}
 	&--suggestion {
 		color: var(--color-main-text) !important;

diff --git a/src/components/map/MaplibreMap.vue b/src/components/map/MaplibreMap.vue
@@ -56,7 +56,7 @@
 </template>
 
 <script>
-import { Map, NavigationControl, ScaleControl, GeolocateControl, Popup, TerrainControl } from 'maplibre-gl'
+import { Map, NavigationControl, ScaleControl, GeolocateControl, Popup, TerrainControl, FullscreenControl } from 'maplibre-gl'
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
 import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
 
@@ -270,6 +270,9 @@ export default {
 			})
 			this.map.addControl(tileControl, 'top-right')
 
+			const fullscreenControl = new FullscreenControl()
+			this.map.addControl(fullscreenControl, 'top-right')
+
 			// terrain
 			this.terrainControl = new TerrainControl({
 				source: 'terrain',