From 30f508e8ca9a5f3a1e5058c3108acffb84436a6e Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Thu, 19 Jan 2023 02:25:00 +0100
Subject: [PATCH] add fullscreen control

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 css/maplibre.scss                  | 6 ++++++
 src/components/map/MaplibreMap.vue | 5 ++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/css/maplibre.scss b/css/maplibre.scss
index 5aa74a524..3b5283d6e 100644
--- 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
index b103e9e2d..d0b497e62 100644
--- 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',