diff --git a/packages/geoadmin-coordinates/src/proj/CoordinateSystem.ts b/packages/geoadmin-coordinates/src/proj/CoordinateSystem.ts
index 890b0c9957..8728833cbc 100644
--- a/packages/geoadmin-coordinates/src/proj/CoordinateSystem.ts
+++ b/packages/geoadmin-coordinates/src/proj/CoordinateSystem.ts
@@ -13,7 +13,7 @@ import CoordinateSystemBounds from '@/proj/CoordinateSystemBounds'
  * could lead to initialization errors (even when initializing the constants before importing the
  * class). Thus we declare them here, at the root class of the coordinates systems.
  */
-export const STANDARD_ZOOM_LEVEL_1_25000_MAP: number = 15.5
+export const STANDARD_ZOOM_LEVEL_1_25000_MAP: number = 8
 export const SWISS_ZOOM_LEVEL_1_25000_MAP: number = 8
 
 /**
diff --git a/packages/mapviewer/.env.development b/packages/mapviewer/.env.development
index 7837c9089e..e7d8e9ea04 100644
--- a/packages/mapviewer/.env.development
+++ b/packages/mapviewer/.env.development
@@ -9,5 +9,5 @@ VITE_API_SERVICES_BASE_URL=https://sys-map.dev.bgdi.ch/api/
 VITE_API_SERVICE_KML_BASE_URL=https://sys-public.dev.bgdi.ch/
 VITE_APP_API_SERVICE_SHORTLINK_BASE_URL=https://sys-s.dev.bgdi.ch/
 VITE_APP_3D_TILES_BASE_URL=https://sys-3d.dev.bgdi.ch/
-VITE_APP_VECTORTILES_BASE_URL=https://sys-verctortiles.dev.bgdi.ch/
+VITE_APP_VECTORTILES_BASE_URL=https://sys-vectortiles.dev.bgdi.ch/
 VITE_APP_SERVICE_PROXY_BASE_URL=https://sys-proxy.dev.bgdi.ch/
diff --git a/packages/mapviewer/.env.integration b/packages/mapviewer/.env.integration
index 7fe354eb6b..e76b6455b5 100644
--- a/packages/mapviewer/.env.integration
+++ b/packages/mapviewer/.env.integration
@@ -8,5 +8,5 @@ VITE_API_SERVICES_BASE_URL=https://sys-map.int.bgdi.ch/api/
 VITE_API_SERVICE_KML_BASE_URL=https://sys-public.int.bgdi.ch/
 VITE_APP_API_SERVICE_SHORTLINK_BASE_URL=https://sys-s.int.bgdi.ch/
 VITE_APP_3D_TILES_BASE_URL=https://sys-3d.int.bgdi.ch/
-VITE_APP_VECTORTILES_BASE_URL=https://sys-verctortiles.int.bgdi.ch/
+VITE_APP_VECTORTILES_BASE_URL=https://sys-vectortiles.int.bgdi.ch/
 VITE_APP_SERVICE_PROXY_BASE_URL=https://sys-proxy.int.bgdi.ch/
diff --git a/packages/mapviewer/src/api/layers/layers.api.js b/packages/mapviewer/src/api/layers/layers.api.js
index e55e4db814..9dc219a9e1 100644
--- a/packages/mapviewer/src/api/layers/layers.api.js
+++ b/packages/mapviewer/src/api/layers/layers.api.js
@@ -10,8 +10,9 @@ import GeoAdminWMSLayer from '@/api/layers/GeoAdminWMSLayer.class'
 import GeoAdminWMTSLayer from '@/api/layers/GeoAdminWMTSLayer.class'
 import LayerTimeConfig from '@/api/layers/LayerTimeConfig.class'
 import LayerTimeConfigEntry from '@/api/layers/LayerTimeConfigEntry.class'
-import { getApi3BaseUrl } from '@/config/baseUrl.config'
+import { getApi3BaseUrl, getVectorTilesBaseUrl } from '@/config/baseUrl.config'
 import { DEFAULT_GEOADMIN_MAX_WMTS_RESOLUTION } from '@/config/map.config'
+import { VECTOR_LIGHT_BASE_MAP_STYLE_ID } from '@/config/vectortiles.config.js'
 
 // API file that covers the backend endpoint http://api3.geo.admin.ch/rest/services/all/MapServer/layersConfig
 
@@ -260,3 +261,17 @@ export const loadLayersConfigFromBackend = (lang) => {
         }
     })
 }
+
+export function loadVectorTileStyle() {
+    return new Promise((resolve, reject) => {
+        axios
+            .get(`${getVectorTilesBaseUrl()}styles/${VECTOR_LIGHT_BASE_MAP_STYLE_ID}/style.json`)
+            .then((response) => {
+                resolve(response.data)
+            })
+            .catch((err) => {
+                log.error('Unable to load vector tile style', err)
+                reject(err)
+            })
+    })
+}
diff --git a/packages/mapviewer/src/config/map.config.js b/packages/mapviewer/src/config/map.config.js
index ef56810e97..7d01121db4 100644
--- a/packages/mapviewer/src/config/map.config.js
+++ b/packages/mapviewer/src/config/map.config.js
@@ -1,11 +1,11 @@
-import { LV95 } from '@geoadmin/coordinates'
+import { WEBMERCATOR } from '@geoadmin/coordinates'
 
 /**
  * Default projection to be used throughout the application
  *
  * @type {CoordinateSystem}
  */
-export const DEFAULT_PROJECTION = LV95
+export const DEFAULT_PROJECTION = WEBMERCATOR
 
 /**
  * Default tile size to use when requesting WMS tiles with our internal WMSs (512px)
diff --git a/packages/mapviewer/src/config/vectortiles.config.js b/packages/mapviewer/src/config/vectortiles.config.js
index 311743fdd4..7142518080 100644
--- a/packages/mapviewer/src/config/vectortiles.config.js
+++ b/packages/mapviewer/src/config/vectortiles.config.js
@@ -5,7 +5,7 @@
  *
  * @type {string}
  */
-export const VECTOR_LIGHT_BASE_MAP_STYLE_ID = 'ch.swisstopo.leichte-basiskarte_world.vt'
+export const VECTOR_LIGHT_BASE_MAP_STYLE_ID = 'ch.swisstopo.basemap.vt'
 
 /**
  * Imagery base map style ID
@@ -14,4 +14,4 @@ export const VECTOR_LIGHT_BASE_MAP_STYLE_ID = 'ch.swisstopo.leichte-basiskarte_w
  *
  * @type {string}
  */
-export const VECTOR_TILES_IMAGERY_STYLE_ID = 'ch.swisstopo.leichte-basiskarte-imagery_world.vt'
+export const VECTOR_TILES_IMAGERY_STYLE_ID = 'ch.swisstopo.imagerybasemap.vt'
diff --git a/packages/mapviewer/src/modules/map/MapModule.vue b/packages/mapviewer/src/modules/map/MapModule.vue
index 96424e2630..22c8cee7be 100644
--- a/packages/mapviewer/src/modules/map/MapModule.vue
+++ b/packages/mapviewer/src/modules/map/MapModule.vue
@@ -5,7 +5,9 @@ import { useStore } from 'vuex'
 import CompareSlider from './components/CompareSlider.vue'
 import LocationPopup from './components/LocationPopup.vue'
 import WarningRibbon from './components/WarningRibbon.vue'
+
 const CesiumMap = defineAsyncComponent(() => import('./components/cesium/CesiumMap.vue'))
+const MapLibreMap = defineAsyncComponent(() => import('./components/maplibre/MaplibreMap.vue'))
 const OpenLayersMap = defineAsyncComponent(
     () => import('./components/openlayers/OpenLayersMap.vue')
 )
@@ -13,6 +15,7 @@ const OpenLayersMap = defineAsyncComponent(
 const store = useStore()
 
 const is3DActive = computed(() => store.state.cesium.active)
+const showMapLibre = computed(() => store.state.debug.showMapLibre)
 
 const displayLocationPopup = computed(
     () => store.state.map.locationPopupCoordinates && !store.state.ui.embed
@@ -33,6 +36,11 @@ const isCompareSliderActive = computed(() => {
             <LocationPopup v-if="displayLocationPopup" />
             <slot name="footer" />
         </CesiumMap>
+        <MapLibreMap v-else-if="showMapLibre">
+            <slot />
+            <LocationPopup v-if="displayLocationPopup" />
+            <slot name="footer" />
+        </MapLibreMap>
         <OpenLayersMap v-else>
             <!-- So that external modules can have access to the map instance through the provided 'getMap' -->
             <slot />
diff --git a/packages/mapviewer/src/modules/map/components/maplibre/MaplibreGeoJSONLayer.vue b/packages/mapviewer/src/modules/map/components/maplibre/MaplibreGeoJSONLayer.vue
new file mode 100644
index 0000000000..57aac1dd93
--- /dev/null
+++ b/packages/mapviewer/src/modules/map/components/maplibre/MaplibreGeoJSONLayer.vue
@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <slot />
+    </div>
+</template>
+<script>
+import axios from 'axios'
+
+import transformGeoadminGeoJSONStyleIntoMapboxStyle from '@/modules/map/components/maplibre/utils/transformGeoadminGeoJSONStyleIntoMapboxStyle.js'
+
+import addLayerToMaplibreMixin from './utils/addLayerToMaplibre-mixins.js'
+
+export default {
+    mixins: [addLayerToMaplibreMixin],
+    props: {
+        layerId: {
+            type: String,
+            required: true,
+        },
+        styleUrl: {
+            type: String,
+            required: true,
+        },
+        dataUrl: {
+            type: String,
+            required: true,
+        },
+        zIndex: {
+            type: Number,
+            default: -1,
+        },
+    },
+    created() {
+        axios.all([axios.get(this.dataUrl), axios.get(this.styleUrl)]).then((responses) => {
+            const data = responses[0].data
+            const geoadminStyle = responses[1].data
+            this.layerSource = {
+                type: 'geojson',
+                data: data,
+            }
+            this.layerStyle = {
+                id: this.layerId,
+                type: 'circle',
+                paint: transformGeoadminGeoJSONStyleIntoMapboxStyle(geoadminStyle),
+            }
+        })
+    },
+}
+</script>
\ No newline at end of file
diff --git a/packages/mapviewer/src/modules/map/components/maplibre/MaplibreInternalLayer.vue b/packages/mapviewer/src/modules/map/components/maplibre/MaplibreInternalLayer.vue
new file mode 100644
index 0000000000..f93f0edfd3
--- /dev/null
+++ b/packages/mapviewer/src/modules/map/components/maplibre/MaplibreInternalLayer.vue
@@ -0,0 +1,76 @@
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+
+import LayerTypes from '@/api/layers/LayerTypes.enum'
+import MaplibreGeoJSONLayer from '@/modules/map/components/maplibre/MaplibreGeoJSONLayer.vue'
+import MaplibreWMSLayer from '@/modules/map/components/maplibre/MaplibreWMSLayer.vue'
+import MaplibreWMTSLayer from '@/modules/map/components/maplibre/MaplibreWMTSLayer.vue'
+
+const { layerConfig, previousLayerId } = defineProps({
+    layerConfig: {
+        type: Object,
+        default: null,
+    },
+    previousLayerId: {
+        type: String,
+        default: null,
+    },
+})
+
+const store = useStore()
+// To be able to manage aggregate layers, we need to know the current map resolution
+const resolution = computed(() => store.getters.resolution)
+
+function shouldAggregateSubLayerBeVisible(subLayer) {
+    // min and max resolution are set in the API file to the lowest/highest possible value if undefined, so we don't
+    // have to worry about checking their validity
+    return resolution.value >= subLayer.minResolution && resolution.value <= subLayer.maxResolution
+}
+</script>
+
+<template>
+    <MaplibreWMTSLayer
+        v-if="layerConfig.type === LayerTypes.WMTS"
+        :wmts-layer-config="layerConfig"
+        :previous-layer-id="previousLayerId"
+    />
+    <MaplibreWMSLayer
+        v-if="layerConfig.type === LayerTypes.WMS"
+        :wms-layer-config="layerConfig"
+        :previous-layer-id="previousLayerId"
+    />
+    <MaplibreGeoJSONLayer
+        v-if="layerConfig.type === LayerTypes.GEOJSON"
+        :layer-id="layerConfig.id"
+        :data-url="layerConfig.geoJsonUrl"
+        :style-url="layerConfig.styleUrl"
+    /><!--
+    Aggregate layers are some kind of a edge case where two or more layers are joint together but only one of them
+    is visible depending on the map resolution.
+    We have to manage aggregate layers straight here otherwise we won't be able to make a recursive call to this
+    component in another child (that would be OpenLayersAggregateLayer.vue component, that doesn't work).
+    See https://vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components for more info
+    -->
+    <template v-if="layerConfig.type === LayerTypes.AGGREGATE">
+        <!-- we can't v-for and v-if at the same time, so we need to wrap all sub-layers in a <div> -->
+        <template
+            v-for="aggregateSubLayer in layerConfig.subLayers"
+            :key="aggregateSubLayer.subLayerId"
+        >
+            <maplibre-internal-layer
+                v-if="shouldAggregateSubLayerBeVisible(aggregateSubLayer)"
+                :layer-config="aggregateSubLayer.layer"
+                :previous-layer-id="previousLayerId"
+            />
+        </template>
+    </template>
+    <!--        <OpenLayersKMLLayer-->
+    <!--          v-if="layerConfig.type === LayerTypes.KML"-->
+    <!--          :layer-id="layerConfig.id"-->
+    <!--          :opacity="layerConfig.opacity"-->
+    <!--          :url="layerConfig.getURL()"-->
+    <!--          :z-index="zIndex"-->
+    <!--        />-->
+    <slot />
+</template>
diff --git a/packages/mapviewer/src/modules/map/components/maplibre/MaplibreMap.vue b/packages/mapviewer/src/modules/map/components/maplibre/MaplibreMap.vue
new file mode 100644
index 0000000000..5ec4ade0d6
--- /dev/null
+++ b/packages/mapviewer/src/modules/map/components/maplibre/MaplibreMap.vue
@@ -0,0 +1,135 @@
+<script setup>
+import { WEBMERCATOR, WGS84 } from '@geoadmin/coordinates'
+import { round } from '@geoadmin/numbers'
+import { Map } from 'maplibre-gl'
+import proj4 from 'proj4'
+import { computed, onMounted, provide, ref, useTemplateRef, watch } from 'vue'
+import { useStore } from 'vuex'
+
+import { getVectorTilesBaseUrl } from '@/config/baseUrl.config'
+import { VECTOR_LIGHT_BASE_MAP_STYLE_ID } from '@/config/vectortiles.config'
+import MaplibreInternalLayer from '@/modules/map/components/maplibre/MaplibreInternalLayer.vue'
+
+const dispatcher = {
+    dispatcher: 'MapLibreMap.vue',
+}
+
+const centerChangeTriggeredByMe = ref(false)
+const mapLibreMapElement = useTemplateRef('mapLibreContainer')
+
+const store = useStore()
+
+const zoom = computed(() => store.state.position.zoom - 1)
+const centerEpsg4326 = computed(() => store.getters.centerEpsg4326)
+const visibleLayers = computed(() => store.getters.visibleLayers)
+
+let mapLibreMap
+
+onMounted(() => {
+    mapLibreMap = new Map({
+        container: mapLibreMapElement.value,
+        style: `${getVectorTilesBaseUrl()}styles/${VECTOR_LIGHT_BASE_MAP_STYLE_ID}/testing/poc-terrain/style.json`,
+        center: centerEpsg4326.value,
+        zoom: zoom.value,
+        maxPitch: 75,
+    })
+
+    mapLibreMap.once('load', () => {
+        store.dispatch('mapModuleReady', dispatcher)
+    })
+
+    // Click management
+    let clickStartTimestamp = 0
+    let lastClickDuration = 0
+    mapLibreMap.on('mousedown', () => {
+        clickStartTimestamp = performance.now()
+    })
+    mapLibreMap.on('mouseup', () => {
+        lastClickDuration = performance.now() - clickStartTimestamp
+        clickStartTimestamp = 0
+    })
+    mapLibreMap.on('click', (e) => {
+        const clickLocation = proj4(WGS84.epsg, WEBMERCATOR.epsg, [
+            round(e.lngLat.lng, 6),
+            round(e.lngLat.lat, 6),
+        ])
+        store.dispatch('click', {
+            coordinate: clickLocation,
+            millisecondsSpentMouseDown: lastClickDuration,
+            ...dispatcher,
+        })
+    })
+
+    // position management
+    mapLibreMap.on('moveend', () => {
+        if (!mapLibreMap) {
+            return
+        }
+        const mapboxCenter = mapLibreMap.getCenter()
+        centerChangeTriggeredByMe.value = true
+        store.dispatch('setCenter', {
+            center: proj4(WGS84.epsg, WEBMERCATOR.epsg, [
+                round(mapboxCenter.lng, 6),
+                round(mapboxCenter.lat, 6),
+            ]),
+            ...dispatcher,
+        })
+        const newZoom = round(mapLibreMap.getZoom(), 3)
+        if (newZoom && newZoom !== zoom.value) {
+            store.dispatch('setZoom', {
+                zoom: newZoom + 1,
+                ...dispatcher,
+            })
+        }
+    })
+})
+
+provide('getMapLibreMap', () => mapLibreMap)
+
+watch(centerEpsg4326, (newCenter) => {
+    if (mapLibreMap) {
+        if (centerChangeTriggeredByMe.value) {
+            centerChangeTriggeredByMe.value = false
+        } else {
+            mapLibreMap.flyTo({
+                center: newCenter,
+                zoom: zoom.value,
+            })
+        }
+    }
+})
+watch(zoom, (newZoom) => {
+    mapLibreMap?.flyTo({
+        center: centerEpsg4326.value,
+        zoom: newZoom,
+    })
+})
+</script>
+
+<template>
+    <div
+        ref="mapLibreContainer"
+        class="maplibre-map"
+    >
+        <MaplibreInternalLayer
+            v-for="(layer, index) in visibleLayers.toReversed()"
+            :key="layer.id"
+            :layer-config="layer"
+            :previous-layer-id="index === 0 ? null : visibleLayers[index - 1].id"
+        />
+        <slot />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/scss/webmapviewer-bootstrap-theme';
+
+.maplibre-map {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute; // Element must be positioned to set a z-index
+    z-index: $zindex-map;
+}
+</style>
diff --git a/packages/mapviewer/src/modules/map/components/maplibre/MaplibreWMSLayer.vue b/packages/mapviewer/src/modules/map/components/maplibre/MaplibreWMSLayer.vue
new file mode 100644
index 0000000000..1eeb752f3e
--- /dev/null
+++ b/packages/mapviewer/src/modules/map/components/maplibre/MaplibreWMSLayer.vue
@@ -0,0 +1,73 @@
+<script setup>
+import { LV95, WEBMERCATOR, WGS84 } from '@geoadmin/coordinates'
+import { computed, onMounted, toRef } from 'vue'
+import { useStore } from 'vuex'
+
+import ExternalWMSLayer from '@/api/layers/ExternalWMSLayer.class'
+import GeoAdminWMSLayer from '@/api/layers/GeoAdminWMSLayer.class'
+import { getBaseUrlOverride } from '@/config/baseUrl.config'
+import useAddRasterLayer from '@/modules/map/components/maplibre/utils/useAddRasterLayer.composable'
+
+const { wmsLayerConfig, previousLayerId } = defineProps({
+    wmsLayerConfig: {
+        type: [GeoAdminWMSLayer, ExternalWMSLayer],
+        required: true,
+    },
+    previousLayerId: {
+        type: String,
+        default: null,
+    },
+})
+
+const store = useStore()
+const currentLang = computed(() => store.state.i18n.lang)
+
+const baseUrl = computed(() => {
+    let url = getBaseUrlOverride('wms') ?? wmsLayerConfig.baseUrl
+    if (!url.endsWith('?')) {
+        url = `${url}?`
+    }
+    const params = {
+        SERVICE: 'WMS',
+        VERSION: '1.3.0',
+        REQUEST: 'GetMap',
+        LAYERS: wmsLayerConfig.technicalName ?? wmsLayerConfig.id,
+        FORMAT: `image/${wmsLayerConfig.format ?? 'png'}`,
+        LANG: currentLang.value,
+    }
+    return `${url}${Object.entries(params)
+        .map(([key, value]) => `${key}=${value}`)
+        .join('&')}`
+})
+
+const tileSize = 256
+const sourceId = computed(() => `source-${wmsLayerConfig.id}`)
+const layerSource = computed(() => ({
+    type: 'raster',
+    tiles: [
+        `${baseUrl.value}&WIDTH=${tileSize}&HEIGHT=${tileSize}&BBOX={bbox-epsg-3857}&CRS=${WEBMERCATOR.epsg}`,
+    ],
+    tileSize: tileSize,
+    bounds: LV95.getBoundsAs(WGS84).flatten,
+}))
+const layer = computed(() => ({
+    id: wmsLayerConfig.id,
+    type: 'raster',
+    source: sourceId.value,
+}))
+const opacity = computed(() => wmsLayerConfig.opacity)
+
+onMounted(() => {
+    useAddRasterLayer(
+        toRef(layer),
+        toRef(sourceId),
+        toRef(layerSource),
+        toRef(opacity),
+        toRef(() => previousLayerId)
+    )
+})
+</script>
+
+<template>
+    <slot />
+</template>
diff --git a/packages/mapviewer/src/modules/map/components/maplibre/MaplibreWMTSLayer.vue b/packages/mapviewer/src/modules/map/components/maplibre/MaplibreWMTSLayer.vue
new file mode 100644
index 0000000000..0b299f4b6d
--- /dev/null
+++ b/packages/mapviewer/src/modules/map/components/maplibre/MaplibreWMTSLayer.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { LV95, WEBMERCATOR, WGS84 } from '@geoadmin/coordinates'
+import { computed, onMounted, toRef } from 'vue'
+
+import ExternalWMTSLayer from '@/api/layers/ExternalWMTSLayer.class'
+import GeoAdminWMTSLayer from '@/api/layers/GeoAdminWMTSLayer.class'
+import useAddRasterLayer from '@/modules/map/components/maplibre/utils/useAddRasterLayer.composable'
+import { getWmtsXyzUrl } from '@/utils/layerUtils'
+
+const { wmtsLayerConfig, previousLayerId } = defineProps({
+    wmtsLayerConfig: {
+        type: [GeoAdminWMTSLayer, ExternalWMTSLayer],
+        required: true,
+    },
+    previousLayerId: {
+        type: String,
+        default: null,
+    },
+})
+
+const sourceId = computed(() => `source-${wmtsLayerConfig.id}`)
+const layerSource = computed(() => ({
+    type: 'raster',
+    tiles: [
+        getWmtsXyzUrl(wmtsLayerConfig, WEBMERCATOR, {
+            addTimestamp: true,
+        }),
+    ],
+    bounds: LV95.getBoundsAs(WGS84).flatten,
+    tileSize: 256,
+}))
+const layer = computed(() => ({
+    id: wmtsLayerConfig.id,
+    type: 'raster',
+    source: sourceId.value,
+}))
+const opacity = computed(() => wmtsLayerConfig.opacity)
+
+onMounted(() => {
+    useAddRasterLayer(
+        toRef(layer),
+        toRef(sourceId),
+        toRef(layerSource),
+        toRef(opacity),
+        toRef(() => previousLayerId)
+    )
+})
+</script>
+
+<template>
+    <slot />
+</template>
diff --git a/packages/mapviewer/src/modules/map/components/maplibre/utils/addLayerToMaplibre-mixins.js b/packages/mapviewer/src/modules/map/components/maplibre/utils/addLayerToMaplibre-mixins.js
new file mode 100644
index 0000000000..e7de283908
--- /dev/null
+++ b/packages/mapviewer/src/modules/map/components/maplibre/utils/addLayerToMaplibre-mixins.js
@@ -0,0 +1,20 @@
+import { randomIntBetween } from '@geoadmin/numbers'
+
+const Z_INDEX_FOR_LABELS_IN_STYLE = 121
+
+const addLayerToMaplibreMixin = {
+    inject: ['getMapLibreMap'],
+    data() {
+        return {
+            layerStyle: null,
+            layerSource: null,
+            sourceId: `source-${this.layerId ? this.layerId : randomIntBetween(0, 100000)}`,
+        }
+    },
+    computed: {
+        zIndexForThisLayer: function () {
+            return Z_INDEX_FOR_LABELS_IN_STYLE + (this.zIndex === -1 ? 0 : this.zIndex)
+        },
+    },
+}
+export default addLayerToMaplibreMixin
diff --git a/packages/mapviewer/src/modules/map/components/maplibre/utils/transformGeoadminGeoJSONStyleIntoMapboxStyle.js b/packages/mapviewer/src/modules/map/components/maplibre/utils/transformGeoadminGeoJSONStyleIntoMapboxStyle.js
new file mode 100644
index 0000000000..9efa5c8381
--- /dev/null
+++ b/packages/mapviewer/src/modules/map/components/maplibre/utils/transformGeoadminGeoJSONStyleIntoMapboxStyle.js
@@ -0,0 +1,22 @@
+
+export default function transformGeoadminGeoJSONStyleIntoMapboxStyle(geoadminStyle) {
+  if (geoadminStyle.values) {
+    let mapboxStyle = {
+      "circle-radius": 8,
+      "circle-color": ["match", ["get", geoadminStyle.property]],
+      "circle-stroke-color": "#FFFFFF",
+      "circle-stroke-width": 1
+    };
+
+    geoadminStyle.values.forEach(({value, vectorOptions}) => {
+      mapboxStyle["circle-color"].push(value, vectorOptions.fill.color);
+    });
+    // default value
+    mapboxStyle["circle-color"].push("#eee");
+    return mapboxStyle;
+  } else if (geoadminStyle.ranges) {
+    return geoadminStyle.ranges;
+  } else {
+    return geoadminStyle;
+  }
+}
diff --git a/packages/mapviewer/src/modules/map/components/maplibre/utils/useAddRasterLayer.composable.js b/packages/mapviewer/src/modules/map/components/maplibre/utils/useAddRasterLayer.composable.js
new file mode 100644
index 0000000000..c1faad2ce2
--- /dev/null
+++ b/packages/mapviewer/src/modules/map/components/maplibre/utils/useAddRasterLayer.composable.js
@@ -0,0 +1,96 @@
+import log from '@geoadmin/log'
+import { inject, onBeforeUnmount, onMounted, toValue, watch } from 'vue'
+
+export default function useAddTileLayer(layer, sourceId, source, opacity, previousLayerId) {
+    const getMapLibreMap = inject('getMapLibreMap', () => undefined, true)
+
+    addLayerAndSourceToMap(toValue(layer), toValue(sourceId), toValue(source))
+
+    onMounted(() => {
+        addLayerAndSourceToMap(toValue(layer), toValue(sourceId), toValue(source))
+    })
+
+    onBeforeUnmount(() => {
+        removeLayerAndSourceFromMap(toValue(layer))
+    })
+
+    watch(
+        () => toValue(previousLayerId),
+        () => {
+            removeLayerFromMap(toValue(layer))
+            addSourceToMap(toValue(sourceId), toValue(source))
+            addLayerToMap(toValue(layer), toValue(previousLayerId))
+        }
+    )
+    watch(
+        () => toValue(source),
+        () => {
+            removeLayerAndSourceFromMap(toValue(layer))
+            addLayerAndSourceToMap(toValue(layer), toValue(sourceId), toValue(source))
+        },
+        {
+            deep: true,
+        }
+    )
+    watch(opacity, () => {
+        const mapLibreMap = getMapLibreMap()
+        if (mapLibreMap?.getLayer(toValue(layer).id)) {
+            mapLibreMap.setPaintProperty(toValue(layer).id, 'raster-opacity', opacity.value)
+        }
+    })
+
+    function addSourceToMap(sourceId, source) {
+        const mapLibreMap = getMapLibreMap()
+        if (!mapLibreMap || !sourceId || !source || !!mapLibreMap.getSource(sourceId)) {
+            return false
+        }
+        mapLibreMap.addSource(sourceId, source)
+        return true
+    }
+
+    function addLayerToMap(layer, previousLayerId) {
+        const mapLibreMap = getMapLibreMap()
+        if (!mapLibreMap || !layer) {
+            return
+        }
+        if (toValue(previousLayerId)) {
+            mapLibreMap.addLayer(layer, toValue(previousLayerId))
+        } else {
+            const mapLibreLayers = mapLibreMap.getStyle().layers
+            // Find the index of the first symbol layer in the map style
+            const firstSymbolLayer = mapLibreLayers.find((layer) => layer.type === 'symbol')
+            mapLibreMap.addLayer(layer, firstSymbolLayer?.id)
+        }
+        mapLibreMap.setPaintProperty(layer.id, 'raster-opacity', opacity.value)
+    }
+
+    function addLayerAndSourceToMap(layer, sourceId, source) {
+        if (addSourceToMap(sourceId, source)) {
+            addLayerToMap(layer, previousLayerId)
+        } else {
+            log.error('Could not add source to map', sourceId, source)
+        }
+    }
+
+    function removeSourceFromMap() {
+        const mapLibreMap = getMapLibreMap()
+        if (toValue(sourceId) && mapLibreMap.getSource(toValue(sourceId))) {
+            mapLibreMap.removeSource(toValue(sourceId))
+        }
+    }
+
+    function removeLayerFromMap(layer) {
+        const mapLibreMap = getMapLibreMap()
+        if (!mapLibreMap || !layer) {
+            return
+        }
+        if (mapLibreMap.getLayer(layer.id)) {
+            mapLibreMap.removeLayer(layer.id)
+        }
+    }
+
+    function removeLayerAndSourceFromMap(layer) {
+        removeLayerFromMap(layer)
+        removeSourceFromMap()
+    }
+}
diff --git a/packages/mapviewer/src/modules/map/components/toolbox/GeolocButton.vue b/packages/mapviewer/src/modules/map/components/toolbox/GeolocButton.vue
index 3d93df7777..109c1e9547 100644
--- a/packages/mapviewer/src/modules/map/components/toolbox/GeolocButton.vue
+++ b/packages/mapviewer/src/modules/map/components/toolbox/GeolocButton.vue
@@ -70,7 +70,6 @@ function toggleGeolocation() {
         <GeoadminTooltip
             placement="left"
             :tooltip-content="tooltipContent"
-            :use-extra-padding="true"
         >
             <button
                 class="toolbox-button d-print-none"
diff --git a/packages/mapviewer/src/modules/map/components/toolbox/Toggle3dButton.vue b/packages/mapviewer/src/modules/map/components/toolbox/Toggle3dButton.vue
index d9293e93c8..cea343675e 100644
--- a/packages/mapviewer/src/modules/map/components/toolbox/Toggle3dButton.vue
+++ b/packages/mapviewer/src/modules/map/components/toolbox/Toggle3dButton.vue
@@ -57,7 +57,6 @@ function toggle3d() {
 <template>
     <GeoadminTooltip
         placement="left"
-        :use-extra-padding="true"
         :tooltip-content="tooltipContent"
     >
         <button
diff --git a/packages/mapviewer/src/modules/map/components/toolbox/ZoomButtons.vue b/packages/mapviewer/src/modules/map/components/toolbox/ZoomButtons.vue
index 73ae000430..05abcc796b 100644
--- a/packages/mapviewer/src/modules/map/components/toolbox/ZoomButtons.vue
+++ b/packages/mapviewer/src/modules/map/components/toolbox/ZoomButtons.vue
@@ -72,7 +72,6 @@ function decreaseZoom() {
         <GeoadminTooltip
             placement="left"
             :tooltip-content="t('zoom_out')"
-            :use-extra-padding
         >
             <button
                 ref="zoomOutButton"
diff --git a/packages/mapviewer/src/modules/menu/components/debug/DebugToolbar.vue b/packages/mapviewer/src/modules/menu/components/debug/DebugToolbar.vue
index 4eae7ab8c0..4289b52b93 100644
--- a/packages/mapviewer/src/modules/menu/components/debug/DebugToolbar.vue
+++ b/packages/mapviewer/src/modules/menu/components/debug/DebugToolbar.vue
@@ -23,6 +23,7 @@ const showPrint = ref(false)
 
 const currentProjection = computed(() => store.state.position.projection)
 const is3dActive = computed(() => store.state.cesium.active)
+const showMapLibre = computed(() => store.state.debug.showMapLibre)
 const showTileDebugInfo = computed(() => store.state.debug.showTileDebugInfo)
 const showLayerExtents = computed(() => store.state.debug.showLayerExtents)
 
@@ -55,6 +56,12 @@ function toggleShowLayerFinder() {
 function toggleShowPrint() {
     showPrint.value = !showPrint.value
 }
+function toggleMapLibre() {
+    if (!showMapLibre.value && !isMercatorTheCurrentProjection.value) {
+        toggleProjection()
+    }
+    store.dispatch('toggleShowMapLibre', dispatcher)
+}
 </script>
 
 <template>
@@ -116,7 +123,25 @@ function toggleShowPrint() {
                                 {{ currentProjection.epsg }}
                             </label>
                         </div>
-
+                        <div
+                            v-if="!is3dActive"
+                            class="mb-1"
+                        >
+                            <h5 class="text-decoration-underline">Framework</h5>
+                            <div class="d-flex gap-1 justify-content-around">
+                                <div>
+                                    <button
+                                        class="toolbox-button m-auto"
+                                        type="button"
+                                        :class="{ active: showMapLibre }"
+                                        @click="toggleMapLibre"
+                                    >
+                                        <FontAwesomeIcon :icon="['fas', 'earth-europe']" />
+                                    </button>
+                                    <label class="text-center">MapLibre</label>
+                                </div>
+                            </div>
+                        </div>
                         <div
                             v-if="!is3dActive"
                             class="d-flex flex-column align-items-center"
diff --git a/packages/mapviewer/src/modules/menu/components/menu/MenuTray.vue b/packages/mapviewer/src/modules/menu/components/menu/MenuTray.vue
index 349f13e9c4..48f0a892ce 100644
--- a/packages/mapviewer/src/modules/menu/components/menu/MenuTray.vue
+++ b/packages/mapviewer/src/modules/menu/components/menu/MenuTray.vue
@@ -38,6 +38,7 @@ const singleModeSections = ref([
 ])
 
 const is3dMode = computed(() => store.state.cesium.active)
+const showMapLibre = computed(() => store.state.debug.showMapLibre)
 const showImportFile = computed(() => store.state.ui.importFile)
 const showDrawingOverlay = computed(() => store.state.drawing.drawingOverlay.show)
 const mapModuleReady = computed(() => store.state.app.isMapReady)
@@ -105,7 +106,7 @@ function addRefBySectionId(el) {
             @close-menu-section="onCloseMenuSection"
         />
         <MenuPrintSection
-            v-if="!is3dMode"
+            v-if="!is3dMode && !showMapLibre"
             :ref="addRefBySectionId"
             @open-menu-section="onOpenMenuSection"
         />
diff --git a/packages/mapviewer/src/setup-fontawesome.js b/packages/mapviewer/src/setup-fontawesome.js
index b53f85cccd..3bdc1d7abf 100644
--- a/packages/mapviewer/src/setup-fontawesome.js
+++ b/packages/mapviewer/src/setup-fontawesome.js
@@ -61,6 +61,7 @@ import {
     faLocationCrosshairs,
     faLocationPinLock,
     faMagnifyingGlass,
+    faMap,
     faMapMarkerAlt,
     faMinus,
     faMinusCircle,
@@ -137,6 +138,7 @@ library.add(
     faLocationCrosshairs,
     faLocationPinLock,
     faMagnifyingGlass,
+    faMap,
     faMapMarkerAlt,
     faMinus,
     faMinusCircle,
diff --git a/packages/mapviewer/src/store/debug.store.js b/packages/mapviewer/src/store/debug.store.js
index 3009f6144d..46c584577a 100644
--- a/packages/mapviewer/src/store/debug.store.js
+++ b/packages/mapviewer/src/store/debug.store.js
@@ -10,6 +10,7 @@ const mutations = {
         (state.showTileDebugInfo = showTileDebugInfo),
     setShowLayerExtents: (state, { showLayerExtents }) =>
         (state.showLayerExtents = showLayerExtents),
+    setShowMapLibre: (state, { showMapLibre }) => (state.showMapLibre = showMapLibre),
 }
 mutations[SET_HAS_URL_OVERRIDES_MUTATION_KEY] = (state, { hasOverrides }) =>
     (state.hasBaseUrlOverride = hasOverrides)
@@ -20,6 +21,7 @@ export default {
         showTileDebugInfo: false,
         showLayerExtents: false,
         hasBaseUrlOverride: false,
+        showMapLibre: true,
     },
     getters: {},
     actions: {
@@ -38,6 +40,9 @@ export default {
                 dispatcher,
             })
         },
+        toggleShowMapLibre({ commit, state }, { dispatcher }) {
+            commit('setShowMapLibre', { showMapLibre: !state.showMapLibre, dispatcher })
+        },
     },
     mutations,
 }
diff --git a/packages/mapviewer/src/store/plugins/app-readiness.plugin.js b/packages/mapviewer/src/store/plugins/app-readiness.plugin.js
index 2c0f6d4751..4016a2728e 100644
--- a/packages/mapviewer/src/store/plugins/app-readiness.plugin.js
+++ b/packages/mapviewer/src/store/plugins/app-readiness.plugin.js
@@ -32,6 +32,7 @@ const appReadinessPlugin = (store) => {
                 state.ui.width > 0 &&
                 state.ui.height > 0 &&
                 Object.keys(state.layers.config).length > 0 &&
+                state.layers.vectorTileStyle !== null &&
                 state.topics.config.length > 0
             ) {
                 store.dispatch('setAppIsReady', dispatcher)
diff --git a/packages/mapviewer/src/views/MapView.vue b/packages/mapviewer/src/views/MapView.vue
index 9d273fe363..7ad6f77743 100644
--- a/packages/mapviewer/src/views/MapView.vue
+++ b/packages/mapviewer/src/views/MapView.vue
@@ -24,6 +24,7 @@ const DrawingModule = defineAsyncComponent(() => import('@/modules/drawing/Drawi
 const store = useStore()
 
 const is3DActive = computed(() => store.state.cesium.active)
+const showMapLibre = computed(() => store.state.debug.showMapLibre)
 const isDrawingMode = computed(() => store.state.drawing.drawingOverlay.show)
 const isPhoneMode = computed(() => store.state.ui.mode === UIModes.PHONE)
 const showLoadingBar = computed(() => store.getters.showLoadingBar)
@@ -42,7 +43,7 @@ const loadDrawingModule = computed(() => {
                 geoloc-button
                 :full-screen-button="!isDrawingMode"
                 :toggle3d-button="!isDrawingMode"
-                compass-button
+                :compass-button="!showMapLibre"
             >
                 <TimeSliderButton v-if="!is3DActive" />
             </MapToolbox>
@@ -57,7 +58,7 @@ const loadDrawingModule = computed(() => {
                         <div class="d-flex flex-column align-items-start">
                             <BackgroundSelector class="p-2 background-selector" />
                             <OpenLayersScale
-                                v-if="!is3DActive"
+                                v-if="!is3DActive && !showMapLibre"
                                 class="p-1"
                             />
                         </div>
@@ -78,7 +79,7 @@ const loadDrawingModule = computed(() => {
                         v-if="!isPhoneMode"
                         #bottom-left
                     >
-                        <template v-if="!is3DActive">
+                        <template v-if="!is3DActive && !showMapLibre">
                             <OpenLayersScale />
                             <OpenLayersMouseTracker />
                         </template>