diff --git a/package.json b/package.json
index dd23858c8..a2c0b0a6a 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "build-ci": "npm ci --workspaces --include-workspace-root --install-links",
     "test": "lerna run test --parallel --no-bail",
     "watch": "lerna run watch --parallel --stream",
-    "lint": "lerna run lint:prettier:check,lint:eslint:check  --parallel --no-bail",
+    "lint": "lerna run lint:prettier:check,lint:eslint:check,lint:svelte:check  --parallel --no-bail",
     "lint:fix": "lerna run lint:prettier:fix,lint:eslint:fix --parallel --no-bail",
     "build-package-lock": "lerna run build-package-lock",
     "storybook": "lerna run --scope=@opendatasoft/visualizations-react storybook"
diff --git a/packages/visualizations-react/src/index.ts b/packages/visualizations-react/src/index.ts
index 72ee97818..481e1be5c 100644
--- a/packages/visualizations-react/src/index.ts
+++ b/packages/visualizations-react/src/index.ts
@@ -16,7 +16,7 @@ import type {
     MarkdownTextProps,
     ChoroplethGeoJsonProps,
     ChoroplethVectorTilesProps,
-    MapPoiProps,
+    PoiMapProps,
     TableProps,
 } from '@opendatasoft/visualizations';
 import reactifySvelte from 'reactify';
@@ -39,5 +39,5 @@ export const ChoroplethSvg = reactifySvelte<ChoroplethGeoJsonProps>(
     _ChoroplethSvg,
     'ods-visualizations-choropleth-svg'
 );
-export const PoiMap = reactifySvelte<MapPoiProps>(_PoiMap, 'ods-visualizations-poi-map');
+export const PoiMap = reactifySvelte<PoiMapProps>(_PoiMap, 'ods-visualizations-poi-map');
 export const Table = reactifySvelte<TableProps>(_Table, 'ods-visualizations-table');
diff --git a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
index 2f78b9bf7..18cf127df 100644
--- a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
+++ b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
@@ -154,7 +154,7 @@ const meta: ComponentMeta<typeof PoiMap> = {
 
 export default meta;
 
-const Template: ComponentStory<typeof PoiMap> = (args) => (
+const Template: ComponentStory<typeof PoiMap> = args => (
     <div
         style={{
             width: '50%',
diff --git a/packages/visualizations-react/stories/Poi/sources.ts b/packages/visualizations-react/stories/Poi/sources.ts
index 6bf5818e7..22de70686 100644
--- a/packages/visualizations-react/stories/Poi/sources.ts
+++ b/packages/visualizations-react/stories/Poi/sources.ts
@@ -1,7 +1,7 @@
 
 import { PoiMapData } from '@opendatasoft/visualizations';
 
-const sources : PoiMapData["sources"] = {
+const sources : Required<PoiMapData>["value"]["sources"] = {
     cities : {
         type: 'geojson', 
         data: {
diff --git a/packages/visualizations-react/stories/Table/data.ts b/packages/visualizations-react/stories/Table/data.ts
index e3017b246..527627f32 100644
--- a/packages/visualizations-react/stories/Table/data.ts
+++ b/packages/visualizations-react/stories/Table/data.ts
@@ -8,6 +8,7 @@ export default [
         wordCount: 1200,
         readingTime: 5.5,
         url: 'https://example.com/lorem-ipsum',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'pellentesque nec blog post',
@@ -19,6 +20,7 @@ export default [
         wordCount: 800,
         readingTime: 3.8,
         url: 'https://example.com/pellentesque-nec',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'fusce sit amet blog post',
@@ -30,6 +32,7 @@ export default [
         wordCount: 1500,
         readingTime: 7.2,
         url: 'https://example.com/fusce-sit-amet',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'vestibulum nec blog post',
@@ -40,6 +43,7 @@ export default [
         wordCount: 1000,
         readingTime: 4.5,
         url: 'https://example.com/vestibulum-nec',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'Cras At Blog Post',
@@ -51,6 +55,7 @@ export default [
         wordCount: 1300,
         readingTime: 6.0,
         url: 'https://example.com/cras-at',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'Quisque A Blog Post',
@@ -62,6 +67,7 @@ export default [
         wordCount: 900,
         readingTime: 4.0,
         url: 'https://example.com/quisque-a',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'Ut Vitae Blog Post',
@@ -73,6 +79,7 @@ export default [
         wordCount: 1100,
         readingTime: 5.0,
         url: 'https://example.com/ut-vitae',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'Integer Id Blog Post',
@@ -84,6 +91,7 @@ export default [
         wordCount: 950,
         readingTime: 4.2,
         url: 'https://example.com/integer-id',
+        geopoint: [2.357573,48.837904],
     },
     {
         title: 'Undefined row',
@@ -94,6 +102,7 @@ export default [
         wordCount: undefined,
         readingTime: null,
         url: undefined,
+        geopoint: undefined,
     },
     {
         title: 'Empty row',
diff --git a/packages/visualizations-react/stories/Table/options.ts b/packages/visualizations-react/stories/Table/options.ts
index 4fe14796a..1a360a977 100644
--- a/packages/visualizations-react/stories/Table/options.ts
+++ b/packages/visualizations-react/stories/Table/options.ts
@@ -71,6 +71,43 @@ export const columns: Column[] = [
             display: () => 'link',
         },
     },
+    {
+        title: 'Geo point',
+        key: 'geopoint',
+        dataFormat: 'geo',
+        options: {
+            mapOptions: {
+                style: 'https://demotiles.maplibre.org/style.json',
+                interactive: false,
+            },
+            display: (v: unknown) => `longitude: ${(v as number[])[0]}, latitude: ${(v as number[])[1]}`,
+            sources: (coordinates: unknown) => ({
+                'table-stories' : {
+                    type: 'geojson', 
+                    data: {
+                        type: 'FeatureCollection',
+                        features: [
+                            {
+                                id: 1,
+                                type: 'Feature',
+                                geometry: {
+                                    type: 'Point',
+                                    coordinates,
+                                },
+                            },
+                        ],
+                    }
+                },
+            }),
+            layers: () => ([{
+                id:'table-stories-layer',
+                source: 'table-stories',
+                type: 'circle',
+                color: 'black',
+                borderColor: 'white',
+            }])
+        },
+    },
 ];
 
 const options: TableOptions = {
diff --git a/packages/visualizations/src/components/Map/Svg/Choropleth.svelte b/packages/visualizations/src/components/ChoroplethMap/Svg/Choropleth.svelte
similarity index 100%
rename from packages/visualizations/src/components/Map/Svg/Choropleth.svelte
rename to packages/visualizations/src/components/ChoroplethMap/Svg/Choropleth.svelte
diff --git a/packages/visualizations/src/components/Map/Svg/Map.svelte b/packages/visualizations/src/components/ChoroplethMap/Svg/Map.svelte
similarity index 100%
rename from packages/visualizations/src/components/Map/Svg/Map.svelte
rename to packages/visualizations/src/components/ChoroplethMap/Svg/Map.svelte
diff --git a/packages/visualizations/src/components/Map/Svg/index.ts b/packages/visualizations/src/components/ChoroplethMap/Svg/index.ts
similarity index 100%
rename from packages/visualizations/src/components/Map/Svg/index.ts
rename to packages/visualizations/src/components/ChoroplethMap/Svg/index.ts
diff --git a/packages/visualizations/src/components/Map/Svg/types.ts b/packages/visualizations/src/components/ChoroplethMap/Svg/types.ts
similarity index 100%
rename from packages/visualizations/src/components/Map/Svg/types.ts
rename to packages/visualizations/src/components/ChoroplethMap/Svg/types.ts
diff --git a/packages/visualizations/src/components/Map/WebGl/ChoroplethGeoJson.svelte b/packages/visualizations/src/components/ChoroplethMap/WebGl/ChoroplethGeoJson.svelte
similarity index 100%
rename from packages/visualizations/src/components/Map/WebGl/ChoroplethGeoJson.svelte
rename to packages/visualizations/src/components/ChoroplethMap/WebGl/ChoroplethGeoJson.svelte
diff --git a/packages/visualizations/src/components/Map/WebGl/ChoroplethVectorTiles.svelte b/packages/visualizations/src/components/ChoroplethMap/WebGl/ChoroplethVectorTiles.svelte
similarity index 100%
rename from packages/visualizations/src/components/Map/WebGl/ChoroplethVectorTiles.svelte
rename to packages/visualizations/src/components/ChoroplethMap/WebGl/ChoroplethVectorTiles.svelte
diff --git a/packages/visualizations/src/components/Map/WebGl/MapRender.svelte b/packages/visualizations/src/components/ChoroplethMap/WebGl/MapRender.svelte
similarity index 99%
rename from packages/visualizations/src/components/Map/WebGl/MapRender.svelte
rename to packages/visualizations/src/components/ChoroplethMap/WebGl/MapRender.svelte
index ec02ee310..637c1e7ae 100644
--- a/packages/visualizations/src/components/Map/WebGl/MapRender.svelte
+++ b/packages/visualizations/src/components/ChoroplethMap/WebGl/MapRender.svelte
@@ -1,5 +1,3 @@
-<svelte:options immutable={true} />
-
 <script lang="ts">
     import maplibregl, {
         Map as MapType,
diff --git a/packages/visualizations/src/components/ChoroplethMap/WebGl/index.ts b/packages/visualizations/src/components/ChoroplethMap/WebGl/index.ts
new file mode 100644
index 000000000..1838ef4cc
--- /dev/null
+++ b/packages/visualizations/src/components/ChoroplethMap/WebGl/index.ts
@@ -0,0 +1,4 @@
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+export { default as ChoroplethGeoJson } from './ChoroplethGeoJson.svelte';
+export { default as ChoroplethVectorTiles } from './ChoroplethVectorTiles.svelte';
diff --git a/packages/visualizations/src/components/Map/constants.ts b/packages/visualizations/src/components/ChoroplethMap/constants.ts
similarity index 100%
rename from packages/visualizations/src/components/Map/constants.ts
rename to packages/visualizations/src/components/ChoroplethMap/constants.ts
diff --git a/packages/visualizations/src/components/Map/mapStyles.ts b/packages/visualizations/src/components/ChoroplethMap/mapStyles.ts
similarity index 100%
rename from packages/visualizations/src/components/Map/mapStyles.ts
rename to packages/visualizations/src/components/ChoroplethMap/mapStyles.ts
diff --git a/packages/visualizations/src/components/Map/types.ts b/packages/visualizations/src/components/ChoroplethMap/types.ts
similarity index 100%
rename from packages/visualizations/src/components/Map/types.ts
rename to packages/visualizations/src/components/ChoroplethMap/types.ts
diff --git a/packages/visualizations/src/components/Map/utils.ts b/packages/visualizations/src/components/ChoroplethMap/utils.ts
similarity index 100%
rename from packages/visualizations/src/components/Map/utils.ts
rename to packages/visualizations/src/components/ChoroplethMap/utils.ts
diff --git a/packages/visualizations/src/components/Legend/ColorsLegend.svelte b/packages/visualizations/src/components/Legend/ColorsLegend.svelte
index 8321f1ac8..7bf45d17d 100644
--- a/packages/visualizations/src/components/Legend/ColorsLegend.svelte
+++ b/packages/visualizations/src/components/Legend/ColorsLegend.svelte
@@ -1,5 +1,3 @@
-<svelte:options immutable={true} />
-
 <script lang="ts">
     import { onDestroy } from 'svelte';
     import { debounce } from 'lodash';
diff --git a/packages/visualizations/src/components/Map/Poi/Poi.svelte b/packages/visualizations/src/components/Map/Poi/Poi.svelte
new file mode 100644
index 000000000..bc4b81313
--- /dev/null
+++ b/packages/visualizations/src/components/Map/Poi/Poi.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+    import CategoryLegend from '../../Legend/CategoryLegend.svelte';
+    import SourceLink from '../../utils/SourceLink.svelte';
+    import WelGlMap from '../WebGl';
+
+    import type { PoiMapProps } from './types';
+    import { DEFAULT_ASPECT_RATIO } from './constants';
+
+    // ensure exported type matches declared props
+    type $$Props = PoiMapProps;
+
+    export let data: $$Props['data'];
+    export let options: $$Props['options'];
+
+    // Used in front of console and error messages to debug multiple maps on a same page
+    const mapId = Math.floor(Math.random() * 1000);
+
+    $: ({
+        title,
+        subtitle,
+        description,
+        legend,
+        sourceLink,
+        aspectRatio = DEFAULT_ASPECT_RATIO,
+    } = options);
+
+    $: cssVarStyles = `--aspect-ratio:${aspectRatio};`;
+</script>
+
+<figure class="map-card maps-container" style={cssVarStyles}>
+    {#if title || subtitle}
+        <figcaption>
+            {#if title}
+                <h3>
+                    {title}
+                </h3>
+            {/if}
+            {#if subtitle}
+                <p>
+                    {subtitle}
+                </p>
+            {/if}
+        </figcaption>
+    {/if}
+    <div class="main" aria-describedby={description ? mapId.toString() : undefined}>
+        {#key options.style}
+            <WelGlMap {options} data={data.value} />
+        {/key}
+    </div>
+    {#if description}
+        <p id={mapId.toString()} class="a11y-invisible-description">{description}</p>
+    {/if}
+    {#if legend}
+        <CategoryLegend legendOptions={legend} />
+    {/if}
+    {#if sourceLink}
+        <SourceLink source={sourceLink} />
+    {/if}
+</figure>
+
+<style>
+    .map-card {
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        position: relative;
+    }
+    figcaption {
+        margin: 0 0 1em 0;
+    }
+    figcaption p,
+    figcaption h3 {
+        margin: 0;
+    }
+
+    .main {
+        aspect-ratio: var(--aspect-ratio);
+        flex-grow: 1;
+        position: relative;
+        display: block;
+    }
+    /* Suitable for elements that are used via aria-describedby or aria-labelledby */
+    .a11y-invisible-description {
+        display: none;
+    }
+</style>
diff --git a/packages/visualizations/src/components/Map/Poi/constants.ts b/packages/visualizations/src/components/Map/Poi/constants.ts
new file mode 100644
index 000000000..363c10060
--- /dev/null
+++ b/packages/visualizations/src/components/Map/Poi/constants.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const DEFAULT_ASPECT_RATIO = 1;
diff --git a/packages/visualizations/src/components/Map/Poi/index.ts b/packages/visualizations/src/components/Map/Poi/index.ts
new file mode 100644
index 000000000..01da635af
--- /dev/null
+++ b/packages/visualizations/src/components/Map/Poi/index.ts
@@ -0,0 +1,3 @@
+import PoiMap from './Poi.svelte';
+
+export default PoiMap;
diff --git a/packages/visualizations/src/components/Map/Poi/types.ts b/packages/visualizations/src/components/Map/Poi/types.ts
new file mode 100644
index 000000000..64e41573a
--- /dev/null
+++ b/packages/visualizations/src/components/Map/Poi/types.ts
@@ -0,0 +1,20 @@
+import type { Async } from '../../../types';
+import type { Source } from '../../types';
+import type { WebGlMapData, WebGlMapOptions } from '../WebGl/types';
+import type { CategoryLegend } from '../../Legend/types';
+
+export type PoiMapData = Async<WebGlMapData>;
+
+export type PoiMapOptions = WebGlMapOptions & {
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    legend?: CategoryLegend;
+    /** Link button to source */
+    sourceLink?: Source;
+};
+
+export type PoiMapProps = {
+    data: PoiMapData;
+    options: PoiMapOptions;
+};
diff --git a/packages/visualizations/src/components/Map/WebGl/WebGl.svelte b/packages/visualizations/src/components/Map/WebGl/WebGl.svelte
new file mode 100644
index 000000000..238aa0d7d
--- /dev/null
+++ b/packages/visualizations/src/components/Map/WebGl/WebGl.svelte
@@ -0,0 +1,256 @@
+<script lang="ts">
+    import type { LngLatBoundsLike } from 'maplibre-gl';
+    import { onDestroy, onMount } from 'svelte';
+
+    import createDeepEqual from '../../../stores/createDeepEqual';
+
+    import Map from './WebGl';
+    import {
+        getCenterZoomOptions,
+        getMapLayers,
+        getMapOptions,
+        getMapSources,
+        getMapStyle,
+        getPopupConfigurationByLayers,
+    } from './utils';
+    import type { WebGlMapData, WebGlMapOptions } from './types';
+
+    export let options: WebGlMapOptions;
+    export let data: WebGlMapData = {};
+
+    $: ({
+        bbox: _bbox,
+        center: _center,
+        zoom,
+        minZoom,
+        maxZoom,
+        interactive,
+        images,
+        transformRequest,
+        cooperativeGestures,
+        preserveDrawingBuffer,
+    } = getMapOptions(options));
+
+    const bbox = createDeepEqual(_bbox);
+    const center = createDeepEqual(_center);
+    $: bbox.update(_bbox);
+    $: center.update(_center);
+
+    $: style = getMapStyle(options.style);
+    $: sources = getMapSources(data.sources);
+    $: layers = getMapLayers(data.layers);
+    $: popupConfigurationByLayers = getPopupConfigurationByLayers(data.layers);
+
+    let container: HTMLElement;
+    const map = new Map();
+
+    const onDisable = () => {
+        map.setBbox($bbox);
+    };
+    $: map.toggleInteractivity(interactive ? 'enable' : 'disable', { onDisable });
+    $: map.setBbox($bbox);
+    $: map.setMinZoom(minZoom);
+    $: map.setMaxZoom(maxZoom);
+    $: map.setSourcesAndLayers(sources, layers);
+    $: map.setPopupConfigurationByLayers(popupConfigurationByLayers);
+    $: map.jumpTo(getCenterZoomOptions({ zoom, center: $center }));
+    $: map.loadImages(images);
+
+    // Lifecycle
+    onMount(() => {
+        const mapOptions = {
+            bounds: $bbox as LngLatBoundsLike,
+            ...getCenterZoomOptions({ zoom, center: $center }),
+            transformRequest,
+            minZoom,
+            maxZoom,
+            cooperativeGestures,
+            preserveDrawingBuffer,
+        };
+        map.initialize(style, container, mapOptions);
+    });
+    onDestroy(() => map.destroy());
+</script>
+
+<div class="ods-visualization__map-container" bind:this={container} />
+
+<style>
+    .ods-visualization__map-container {
+        height: 100%;
+        width: 100%;
+    }
+    .ods-visualization__map-container :global(canvas) {
+        cursor: default;
+    }
+
+    /* To add classes programmatically in svelte we will use a global selector.
+    We place it inside a local selector to obtain some encapsulation and avoid side effects */
+
+    /* --- POPUP ---  */
+    .ods-visualization__map-container :global(.maplibregl-popup) {
+        /* To be above map controls (z-index: 2)*/
+        z-index: 3;
+        height: auto;
+        max-height: 100%;
+        box-sizing: border-box;
+    }
+    .ods-visualization__map-container :global(.maplibregl-popup--as-sidebar),
+    .ods-visualization__map-container :global(.maplibregl-popup--as-modal) {
+        flex-direction: column;
+        transform: translate(0px, 0px) !important;
+        padding: 13px 13px 0px 13px;
+    }
+
+    .ods-visualization__map-container :global(.maplibregl-popup--as-modal) {
+        width: 100%;
+    }
+    .ods-visualization__map-container :global(.maplibregl-popup--as-sidebar) {
+        /* 300px for content and 26px for padding */
+        width: calc(300px + 26px);
+    }
+
+    .ods-visualization__map-container :global(.maplibregl-popup--as-tooltip) {
+        width: 300px;
+        max-height: 50%;
+    }
+
+    /* --- POPUP TIP ---  */
+    .ods-visualization__map-container
+        :global(.maplibregl-popup--as-sidebar > .maplibregl-popup-tip),
+    .ods-visualization__map-container :global(.maplibregl-popup--as-modal > .maplibregl-popup-tip) {
+        display: none;
+    }
+
+    /* --- POPUP CONTENT ---  */
+    .ods-visualization__map-container :global(.maplibregl-popup > .maplibregl-popup-content) {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        padding: 0px;
+        border-radius: 6px;
+        max-height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        box-sizing: border-box;
+        box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.26);
+    }
+    :global(.ods-visualization__map-popup-feature-content),
+    :global(.ods-visualization__map-popup-feature-content--loading) {
+        margin: 13px;
+    }
+    /* Add a more opacity and blur effect on map when cooperative gesture is shown */
+    :global(.maplibregl-cooperative-gesture-screen) {
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(2px);
+    }
+
+    /* --- POPUP CLOSE BUTTON ---  */
+    /* Hide close button and offset when its display is as a tooltip
+     * Hidden offset allow to center the arrows wrapper
+     */
+    :global(.maplibregl-popup--as-tooltip .ods-visualization__map-popup-navigation-close-button),
+    :global(.maplibregl-popup--as-tooltip
+            .ods-visualization__map-popup-navigation-controls-offset) {
+        display: none;
+    }
+
+    /* --- POPUP NAVIGATION CONTROLS ---  */
+    :global(.ods-visualization__map-popup-navigation-controls) {
+        --navigation-button-size: 36px;
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        gap: 6px;
+        margin: 6px;
+        max-height: var(--navigation-button-size);
+    }
+    :global(.ods-visualization__map-popup-arrows-wrapper) {
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    :global(.ods-visualization__map-popup-navigation-controls-offset) {
+        width: var(--navigation-button-size);
+        flex-shrink: 0;
+    }
+
+    :global(.ods-visualization__map-popup-navigation-arrow-button) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0px;
+        width: var(--navigation-button-size);
+        height: var(--navigation-button-size);
+        background: none;
+        border: none;
+        cursor: pointer;
+    }
+    :global(.ods-visualization__map-popup-navigation-arrow-button:disabled) {
+        cursor: not-allowed;
+    }
+    :global(.ods-visualization__map-popup-navigation-arrow-button-icon) {
+        width: 6px;
+        height: 6px;
+        border-top: 2px solid;
+        border-left: 2px solid;
+    }
+
+    :global(#prevButton.ods-visualization__map-popup-navigation-arrow-button
+            .ods-visualization__map-popup-navigation-arrow-button-icon) {
+        transform: rotate(-45deg);
+    }
+
+    :global(#nextButton.ods-visualization__map-popup-navigation-arrow-button
+            .ods-visualization__map-popup-navigation-arrow-button-icon) {
+        transform: rotate(135deg);
+    }
+
+    :global(.ods-visualization__map-popup-navigation-arrow-button:disabled
+            .ods-visualization__map-popup-navigation-arrow-button-icon) {
+        opacity: 0.5;
+    }
+
+    :global(.ods-visualization__map-popup-navigation-close-button) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--navigation-button-size);
+        height: var(--navigation-button-size);
+        padding: 0px;
+        border: none;
+        background: none;
+        cursor: pointer;
+        flex-shrink: 0;
+    }
+    :global(.ods-visualization__map-popup-navigation-close-button-icon) {
+        position: relative;
+        display: block;
+        width: 14px;
+        height: 14px;
+    }
+
+    :global(.ods-visualization__map-popup-navigation-close-button-icon:before),
+    :global(.ods-visualization__map-popup-navigation-close-button-icon:after) {
+        position: absolute;
+        left: 6px;
+        content: '';
+        height: 100%;
+        width: 2px;
+        border-radius: 2px;
+        background-color: #333;
+    }
+    :global(.ods-visualization__map-popup-navigation-close-button-icon:before) {
+        transform: rotate(45deg);
+    }
+    :global(.ods-visualization__map-popup-navigation-close-button-icon:after) {
+        transform: rotate(-45deg);
+    }
+
+    /* --- CONTROLS --- */
+    .ods-visualization__map-container :global(.maplibregl-ctrl.maplibregl-ctrl-group) {
+        margin-top: 13px;
+        margin-right: 13px;
+        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.26);
+    }
+</style>
diff --git a/packages/visualizations/src/components/MapPoi/Map.ts b/packages/visualizations/src/components/Map/WebGl/WebGl.ts
similarity index 99%
rename from packages/visualizations/src/components/MapPoi/Map.ts
rename to packages/visualizations/src/components/Map/WebGl/WebGl.ts
index 0af0261d9..dc733d5aa 100644
--- a/packages/visualizations/src/components/MapPoi/Map.ts
+++ b/packages/visualizations/src/components/Map/WebGl/WebGl.ts
@@ -29,6 +29,7 @@ import {
     POPUP_WIDTH,
     POPUP_NAVIGATION_CONTROLS_OFFSET_CLASSNAME,
     DEFAULT_SORT_KEY_VALUE,
+    POPUP_DISPLAY,
 } from './constants';
 import type {
     PopupConfigurationByLayers,
@@ -36,7 +37,6 @@ import type {
     PopupDisplayTypes,
     Images,
 } from './types';
-import { POPUP_DISPLAY } from './types';
 
 const CURSOR = {
     DEFAULT: 'default',
diff --git a/packages/visualizations/src/components/MapPoi/constants.ts b/packages/visualizations/src/components/Map/WebGl/constants.ts
similarity index 52%
rename from packages/visualizations/src/components/MapPoi/constants.ts
rename to packages/visualizations/src/components/Map/WebGl/constants.ts
index 4a6787173..f34c2442c 100644
--- a/packages/visualizations/src/components/MapPoi/constants.ts
+++ b/packages/visualizations/src/components/Map/WebGl/constants.ts
@@ -1,11 +1,12 @@
 import type {
-    ControlPosition,
     DataDrivenPropertyValueSpecification,
-    PopupOptions,
     StyleSpecification,
+    ControlPosition,
+    PopupOptions,
 } from 'maplibre-gl';
-import type { Color } from '../types';
-import { POPUP_DISPLAY, PopupDisplayTypes } from './types';
+import type { Color } from '../../types';
+
+import type { PopupDisplayTypes } from './types';
 
 export const DEFAULT_BASEMAP_STYLE: StyleSpecification = {
     version: 8,
@@ -13,9 +14,6 @@ export const DEFAULT_BASEMAP_STYLE: StyleSpecification = {
     sources: {},
     layers: [],
 };
-
-export const DEFAULT_ASPECT_RATIO = 1;
-
 export const DEFAULT_DARK_GREY: Color = '#515457';
 
 export const DEFAULT_SORT_KEY_VALUE: DataDrivenPropertyValueSpecification<number> = [
@@ -25,24 +23,35 @@ export const DEFAULT_SORT_KEY_VALUE: DataDrivenPropertyValueSpecification<number
     0,
 ];
 
+export const POPUP_DISPLAY = {
+    tooltip: 'tooltip',
+    sidebar: 'sidebar',
+    modal: 'modal',
+} as const;
+
 export const POPUP_WIDTH = 300;
 
 export const CONTROL_POSITION: ControlPosition = 'top-right';
 
 // Update styles in ./MapRender.svelte if one of these classnames must change.
-const POPUP_CLASSNAME = 'poi-map__popup';
-export const POPUP_FEATURE_CONTENT = 'poi-map__popup-feature-content';
-export const POPUP_FEATURE_CONTENT_LOADING = 'poi-map__popup-feature-content--loading';
-export const POPUP_NAVIGATION_CONTROLS_CLASSNAME = 'poi-map__popup-navigation-controls';
+const POPUP_CLASSNAME = 'maplibregl-popup';
+export const POPUP_FEATURE_CONTENT = 'ods-visualization__map-popup-feature-content';
+export const POPUP_FEATURE_CONTENT_LOADING =
+    'ods-visualization__map-popup-feature-content--loading';
+export const POPUP_NAVIGATION_CONTROLS_CLASSNAME =
+    'ods-visualization__map-popup-navigation-controls';
 export const POPUP_NAVIGATION_CONTROLS_OFFSET_CLASSNAME =
-    'poi-map__popup-navigation-controls-offset';
-export const POPUP_NAVIGATION_ARROWS_WRAPPER_CLASSNAME = 'poi-map__popup-arrows-wrapper';
-export const POPUP_NAVIGATION_ARROW_BUTTON_CLASSNAME = 'poi-map__popup-navigation-arrow-button';
+    'ods-visualization__map-popup-navigation-controls-offset';
+export const POPUP_NAVIGATION_ARROWS_WRAPPER_CLASSNAME =
+    'ods-visualization__map-popup-arrows-wrapper';
+export const POPUP_NAVIGATION_ARROW_BUTTON_CLASSNAME =
+    'ods-visualization__map-popup-navigation-arrow-button';
 export const POPUP_NAVIGATION_ARROW_BUTTON_ICON_CLASSNAME =
-    'poi-map__popup-navigation-arrow-button-icon';
-export const POPUP_NAVIGATION_CLOSE_BUTTON_CLASSNAME = 'poi-map__popup-navigation-close-button';
+    'ods-visualization__map-popup-navigation-arrow-button-icon';
+export const POPUP_NAVIGATION_CLOSE_BUTTON_CLASSNAME =
+    'ods-visualization__map-popup-navigation-close-button';
 export const POPUP_NAVIGATION_CLOSE_BUTTON_ICON_CLASSNAME =
-    'poi-map__popup-navigation-close-button-icon';
+    'ods-visualization__map-popup-navigation-close-button-icon';
 
 export const POPUP_DISPLAY_CLASSNAME_MODIFIER: Record<PopupDisplayTypes, string> = {
     [POPUP_DISPLAY.tooltip]: `${POPUP_CLASSNAME}--as-tooltip`,
@@ -51,7 +60,7 @@ export const POPUP_DISPLAY_CLASSNAME_MODIFIER: Record<PopupDisplayTypes, string>
 };
 
 export const POPUP_OPTIONS: PopupOptions = {
-    className: POPUP_CLASSNAME,
     closeButton: false,
     closeOnClick: false,
+    maxWidth: 'none',
 };
diff --git a/packages/visualizations/src/components/Map/WebGl/index.ts b/packages/visualizations/src/components/Map/WebGl/index.ts
index 1838ef4cc..3349a9dcf 100644
--- a/packages/visualizations/src/components/Map/WebGl/index.ts
+++ b/packages/visualizations/src/components/Map/WebGl/index.ts
@@ -1,4 +1,4 @@
+import WebGl from './WebGl.svelte';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
-export { default as ChoroplethGeoJson } from './ChoroplethGeoJson.svelte';
-export { default as ChoroplethVectorTiles } from './ChoroplethVectorTiles.svelte';
+export default WebGl;
diff --git a/packages/visualizations/src/components/MapPoi/types.ts b/packages/visualizations/src/components/Map/WebGl/types.ts
similarity index 85%
rename from packages/visualizations/src/components/MapPoi/types.ts
rename to packages/visualizations/src/components/Map/WebGl/types.ts
index 7ac3457be..988e7c702 100644
--- a/packages/visualizations/src/components/MapPoi/types.ts
+++ b/packages/visualizations/src/components/Map/WebGl/types.ts
@@ -1,35 +1,30 @@
 import type {
     CircleLayerSpecification,
-    SymbolLayerSpecification,
-    StyleSpecification,
     GeoJSONFeature,
+    GestureOptions,
     LngLatLike,
     RequestTransformFunction,
-    GestureOptions,
     StyleImageMetadata,
+    StyleSpecification,
+    SymbolLayerSpecification,
 } from 'maplibre-gl';
+
 import type { BBox, GeoJsonProperties } from 'geojson';
-import type { Async } from '../../types';
-import type { Color, Source } from '../types';
-import type { CategoryLegend } from '../Legend/types';
+import type { POPUP_DISPLAY } from './constants';
+import type { Color } from '../../types';
 
-// To render data layers on the map
-export type PoiMapData = Partial<{
+export type WebGlMapData = Partial<{
     sources: StyleSpecification['sources'];
     layers: Layer[];
 }>;
 
-export type Images = Record<
-    string,
-    { id: string; url: string; options?: Partial<StyleImageMetadata> }
->;
-export interface PoiMapOptions {
+export interface WebGlMapOptions {
     /*
      * To render a basemap. Could be:
      * - A MapLibre style URL; See https://maplibre.org/maplibre-gl-js/docs/API/types/maplibregl.MapOptions.
      * - Or an object with a 'sources' and a 'layers' keys. Useful when using a Raster or WMS basemap.
      */
-    style?: string | PoiMapStyleOption;
+    style?: string | WebGlMapStyleOption;
     /**
      * A callback run before the Map makes a request for an external URL.
      * The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests.
@@ -51,12 +46,6 @@ export interface PoiMapOptions {
     aspectRatio?: number;
     // Is the map interactive for the user (zoom, move, tooltips...)
     interactive?: boolean;
-    title?: string;
-    subtitle?: string;
-    description?: string;
-    legend?: CategoryLegend;
-    /** Link button to source */
-    sourceLink?: Source;
     cooperativeGestures?: boolean | GestureOptions;
     /** If true, the map's canvas can be exported to an image using toDataURL. This is false by default as a performance optimization. */
     preserveDrawingBuffer?: boolean;
@@ -64,7 +53,7 @@ export interface PoiMapOptions {
     images?: Images;
 }
 
-export type PoiMapStyleOption = Partial<Pick<StyleSpecification, 'sources' | 'layers'>>;
+export type WebGlMapStyleOption = Partial<Pick<StyleSpecification, 'sources' | 'layers'>>;
 
 // Supported layers
 export type LayerSpecification = CircleLayerSpecification | SymbolLayerSpecification;
@@ -116,13 +105,10 @@ export type SymbolLayer = BaseLayer & {
 
 export type Layer = CircleLayer | SymbolLayer;
 
-export const POPUP_DISPLAY = {
-    tooltip: 'tooltip',
-    sidebar: 'sidebar',
-    modal: 'modal',
-} as const;
-
-export type PopupDisplayTypes = keyof typeof POPUP_DISPLAY;
+export type GeoPoint = {
+    lat: number;
+    lon: number;
+};
 
 export type PopupLayer = {
     /**
@@ -136,16 +122,14 @@ export type PopupLayer = {
     getLoadingContent: () => string;
 };
 
-export type GeoPoint = {
-    lat: number;
-    lon: number;
-};
+export type PopupDisplayTypes = keyof typeof POPUP_DISPLAY;
+
 /** A configuration map for popups where keys are layer ids and values are PopupLayer object. */
 export type PopupConfigurationByLayers = { [key: string]: PopupLayer };
 
 export type CenterZoomOptions = { zoom?: number; center?: LngLatLike };
 
-export type MapPoiProps = {
-    data: Async<PoiMapData>;
-    options: PoiMapOptions;
-};
+export type Images = Record<
+    string,
+    { id: string; url: string; options?: Partial<StyleImageMetadata> }
+>;
diff --git a/packages/visualizations/src/components/MapPoi/utils.ts b/packages/visualizations/src/components/Map/WebGl/utils.ts
similarity index 88%
rename from packages/visualizations/src/components/MapPoi/utils.ts
rename to packages/visualizations/src/components/Map/WebGl/utils.ts
index 9ad5d9e8f..e93331dd3 100644
--- a/packages/visualizations/src/components/MapPoi/utils.ts
+++ b/packages/visualizations/src/components/Map/WebGl/utils.ts
@@ -1,38 +1,33 @@
 import type {
     CircleLayerSpecification,
     ExpressionSpecification,
-    MapOptions,
+    MapOptions as MapLibreMapOptions,
     StyleSpecification,
     ExpressionInputType,
     SymbolLayerSpecification,
     FilterSpecification,
 } from 'maplibre-gl';
 
-import { isGroupByForMatchExpression, Color } from '../types';
+import { isGroupByForMatchExpression, Color } from '../../types';
 
 import type {
-    CenterZoomOptions,
     CircleLayer,
     LayerSpecification,
     Layer,
-    PoiMapData,
-    PoiMapOptions,
+    WebGlMapData,
+    WebGlMapOptions,
     PopupConfigurationByLayers,
     SymbolLayer,
+    CenterZoomOptions,
 } from './types';
-import {
-    DEFAULT_DARK_GREY,
-    DEFAULT_BASEMAP_STYLE,
-    DEFAULT_ASPECT_RATIO,
-    DEFAULT_SORT_KEY_VALUE,
-} from './constants';
+import { DEFAULT_DARK_GREY, DEFAULT_BASEMAP_STYLE, DEFAULT_SORT_KEY_VALUE } from './constants';
 
-export const getMapStyle = (style: PoiMapOptions['style']): MapOptions['style'] => {
+export const getMapStyle = (style: WebGlMapOptions['style']): MapLibreMapOptions['style'] => {
     if (!style) return DEFAULT_BASEMAP_STYLE;
     if (typeof style === 'string') return style;
     return { ...DEFAULT_BASEMAP_STYLE, ...style };
 };
-export const getMapSources = (sources: PoiMapData['sources']): StyleSpecification['sources'] => {
+export const getMapSources = (sources: WebGlMapData['sources']): StyleSpecification['sources'] => {
     if (!sources) return DEFAULT_BASEMAP_STYLE.sources;
     return sources;
 };
@@ -156,38 +151,26 @@ export const getPopupConfigurationByLayers = (layers?: Layer[]): PopupConfigurat
     return configurationByLayers;
 };
 
-export const getMapOptions = (options: PoiMapOptions) => {
+export const getMapOptions = (options: WebGlMapOptions) => {
     const {
-        aspectRatio = DEFAULT_ASPECT_RATIO,
         bbox,
         zoom,
         maxZoom,
         minZoom,
         center,
         interactive = true,
-        title,
-        subtitle,
-        description,
-        legend,
-        sourceLink,
         transformRequest,
         cooperativeGestures,
         preserveDrawingBuffer = false,
         images,
     } = options;
     return {
-        aspectRatio,
         bbox,
         zoom,
         minZoom,
         maxZoom,
         center,
         interactive,
-        title,
-        subtitle,
-        description,
-        legend,
-        sourceLink,
         transformRequest,
         cooperativeGestures,
         preserveDrawingBuffer,
diff --git a/packages/visualizations/src/components/Map/index.ts b/packages/visualizations/src/components/Map/index.ts
new file mode 100644
index 000000000..08ecd636f
--- /dev/null
+++ b/packages/visualizations/src/components/Map/index.ts
@@ -0,0 +1,7 @@
+export { default as WebGlMap } from './WebGl';
+export { default as PoiMap } from './Poi';
+
+export { POPUP_DISPLAY } from './WebGl/constants';
+
+export * from './WebGl/types';
+export * from './Poi/types';
diff --git a/packages/visualizations/src/components/MapPoi/Map.svelte b/packages/visualizations/src/components/MapPoi/Map.svelte
deleted file mode 100644
index 6e9328027..000000000
--- a/packages/visualizations/src/components/MapPoi/Map.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts">
-    import createDeepEqual from '../../stores/createDeepEqual';
-
-    import MapRender from './MapRender.svelte';
-
-    import {
-        getMapStyle,
-        getMapSources,
-        getMapLayers,
-        getPopupConfigurationByLayers,
-        getMapOptions,
-    } from './utils';
-    import type { MapPoiProps } from './types';
-
-    // ensure exported type matches declared props
-    type $$Props = MapPoiProps;
-
-    export let data: $$Props['data'];
-    export let options: $$Props['options'];
-
-    $: ({ style: styleOptions } = options);
-    $: style = getMapStyle(styleOptions);
-    $: sources = getMapSources(data.value?.sources);
-    $: layers = getMapLayers(data.value?.layers);
-    $: popupConfigurationByLayers = getPopupConfigurationByLayers(data.value?.layers);
-
-    $: ({
-        bbox: _bbox,
-        center: _center,
-        zoom,
-        minZoom,
-        maxZoom,
-        title,
-        subtitle,
-        description,
-        legend,
-        sourceLink,
-        aspectRatio,
-        interactive,
-        images,
-        transformRequest,
-        cooperativeGestures,
-        preserveDrawingBuffer,
-    } = getMapOptions(options));
-
-    const bbox = createDeepEqual(_bbox);
-    const center = createDeepEqual(_center);
-    $: bbox.update(_bbox);
-    $: center.update(_center);
-</script>
-
-<div>
-    {#key style}
-        <MapRender
-            {style}
-            {sources}
-            {layers}
-            {popupConfigurationByLayers}
-            bbox={$bbox}
-            center={$center}
-            {zoom}
-            {minZoom}
-            {maxZoom}
-            {title}
-            {subtitle}
-            {description}
-            {legend}
-            {sourceLink}
-            {aspectRatio}
-            {interactive}
-            {images}
-            {transformRequest}
-            {cooperativeGestures}
-            {preserveDrawingBuffer}
-        />
-    {/key}
-</div>
diff --git a/packages/visualizations/src/components/MapPoi/MapRender.svelte b/packages/visualizations/src/components/MapPoi/MapRender.svelte
deleted file mode 100644
index 0fc415138..000000000
--- a/packages/visualizations/src/components/MapPoi/MapRender.svelte
+++ /dev/null
@@ -1,320 +0,0 @@
-<svelte:options immutable={true} />
-
-<script lang="ts">
-    import type { BBox } from 'geojson';
-    import type {
-        LngLatBoundsLike,
-        LngLatLike,
-        MapOptions,
-        StyleSpecification,
-        GestureOptions,
-    } from 'maplibre-gl';
-    import { onDestroy, onMount } from 'svelte';
-    import CategoryLegend from '../Legend/CategoryLegend.svelte';
-    import type { CategoryLegend as CategoryLegendType } from '../Legend/types';
-    import SourceLink from '../utils/SourceLink.svelte';
-    import type { Source } from '../types';
-
-    import Map from './Map';
-    import { getCenterZoomOptions } from './utils';
-    import type { PopupConfigurationByLayers, PoiMapOptions } from './types';
-
-    // Base style, sources and layers
-    export let style: MapOptions['style'];
-    export let sources: StyleSpecification['sources'];
-    export let layers: StyleSpecification['layers'];
-    export let transformRequest: MapOptions['transformRequest'];
-
-    // Options
-    export let bbox: BBox | undefined;
-    export let zoom: number | undefined;
-    export let minZoom: number | undefined;
-    export let maxZoom: number | undefined;
-    export let center: LngLatLike | undefined;
-    export let images: PoiMapOptions['images'];
-    export let aspectRatio: number;
-    export let interactive: boolean;
-    export let title: string | undefined;
-    export let subtitle: string | undefined;
-    export let legend: CategoryLegendType | undefined;
-    export let description: string | undefined;
-    export let cooperativeGestures: boolean | GestureOptions | undefined;
-    export let preserveDrawingBuffer: boolean;
-    // Data source link
-    export let sourceLink: Source | undefined;
-
-    // Used in front of console and error messages to debug multiple maps on a same page
-    const mapId = Math.floor(Math.random() * 1000);
-
-    export let popupConfigurationByLayers: PopupConfigurationByLayers;
-
-    let container: HTMLElement;
-    const map = new Map();
-
-    const onDisable = () => {
-        map.setBbox(bbox);
-    };
-
-    $: map.toggleInteractivity(interactive ? 'enable' : 'disable', { onDisable });
-    $: map.setBbox(bbox);
-    $: map.setMinZoom(minZoom);
-    $: map.setMaxZoom(maxZoom);
-    $: map.setSourcesAndLayers(sources, layers);
-    $: map.setPopupConfigurationByLayers(popupConfigurationByLayers);
-    $: map.jumpTo(getCenterZoomOptions({ zoom, center }));
-    $: map.loadImages(images);
-    $: cssVarStyles = `--aspect-ratio:${aspectRatio};`;
-
-    // Lifecycle
-    onMount(() => {
-        const options = {
-            bounds: bbox as LngLatBoundsLike,
-            ...getCenterZoomOptions({ zoom, center }),
-            transformRequest,
-            minZoom,
-            maxZoom,
-            cooperativeGestures,
-            preserveDrawingBuffer,
-        };
-        map.initialize(style, container, options);
-    });
-    onDestroy(() => map.destroy());
-</script>
-
-<figure class="map-card maps-container" style={cssVarStyles}>
-    {#if title || subtitle}
-        <figcaption>
-            {#if title}
-                <h3>
-                    {title}
-                </h3>
-            {/if}
-            {#if subtitle}
-                <p>
-                    {subtitle}
-                </p>
-            {/if}
-        </figcaption>
-    {/if}
-    <div class="main" aria-describedby={description ? mapId.toString() : undefined}>
-        <div id="map" bind:this={container} />
-    </div>
-    {#if description}
-        <p id={mapId.toString()} class="a11y-invisible-description">{description}</p>
-    {/if}
-    {#if legend}
-        <CategoryLegend legendOptions={legend} />
-    {/if}
-    {#if sourceLink}
-        <SourceLink source={sourceLink} />
-    {/if}
-</figure>
-
-<style>
-    #map {
-        height: 400px;
-    }
-    #map :global(canvas) {
-        cursor: default;
-    }
-    @supports (aspect-ratio: auto) {
-        #map {
-            height: auto;
-            aspect-ratio: var(--aspect-ratio);
-        }
-    }
-    .map-card {
-        display: flex;
-        flex-direction: column;
-        margin: 0;
-        position: relative;
-    }
-    figcaption {
-        margin: 0 0 1em 0;
-    }
-    figcaption p,
-    figcaption h3 {
-        margin: 0;
-    }
-
-    /* To add classes programmatically in svelte we will use a global selector.
-    We place it inside a local selector to obtain some encapsulation and avoid side effects */
-
-    /* --- POPUP ---  */
-    .map-card :global(.poi-map__popup) {
-        /* To be above map controls (z-index: 2)*/
-        z-index: 3;
-        height: auto;
-        max-height: 100%;
-        box-sizing: border-box;
-        max-width: none !important;
-    }
-    .map-card :global(.poi-map__popup.poi-map__popup--as-sidebar),
-    .map-card :global(.poi-map__popup.poi-map__popup--as-modal) {
-        flex-direction: column;
-        transform: translate(0px, 0px) !important;
-        padding: 13px 13px 0px 13px;
-    }
-
-    .map-card :global(.poi-map__popup.poi-map__popup--as-modal) {
-        width: 100% !important;
-    }
-    .map-card :global(.poi-map__popup.poi-map__popup--as-sidebar) {
-        /* 300px for content and 26px for padding */
-        width: calc(300px + 26px) !important;
-    }
-
-    .map-card :global(.poi-map__popup.poi-map__popup--as-tooltip) {
-        width: 300px !important;
-        max-height: 50%;
-    }
-
-    /* --- POPUP TIP ---  */
-    .map-card :global(.poi-map__popup.poi-map__popup--as-sidebar > .maplibregl-popup-tip),
-    :global(.poi-map__popup.poi-map__popup--as-modal > .maplibregl-popup-tip) {
-        display: none;
-    }
-
-    /* --- POPUP CONTENT ---  */
-    .map-card :global(.poi-map__popup > .maplibregl-popup-content) {
-        display: flex;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        padding: 0px;
-        border-radius: 6px;
-        max-height: 100%;
-        overflow-y: auto;
-        overflow-x: hidden;
-        box-sizing: border-box;
-        box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.26);
-    }
-    .map-card :global(.poi-map__popup .poi-map__popup-feature-content),
-    .map-card :global(.poi-map__popup .poi-map__popup-feature-content--loading) {
-        margin: 13px;
-    }
-    /* Add a more opacity and blur effect on map when cooperative gesture is shown */
-    .map-card :global(.maplibregl-cooperative-gesture-screen) {
-        background: rgba(0, 0, 0, 0.6);
-        backdrop-filter: blur(2px);
-    }
-
-    /* --- POPUP CLOSE BUTTON ---  */
-    /* Hide close button and offset when its display is as a tooltip
-     * Hidden offset allow to center the arrows wrapper
-     */
-    .map-card :global(.poi-map__popup--as-tooltip .poi-map__popup-navigation-close-button),
-    .map-card :global(.poi-map__popup--as-tooltip .poi-map__popup-navigation-controls-offset) {
-        display: none;
-    }
-
-    /* --- POPUP NAVIGATION CONTROLS ---  */
-    .map-card :global(.poi-map__popup-navigation-controls) {
-        --navigation-button-size: 36px;
-        position: relative;
-        display: flex;
-        justify-content: flex-end;
-        gap: 6px;
-        margin: 6px;
-        max-height: var(--navigation-button-size);
-    }
-    .map-card :global(.poi-map__popup-arrows-wrapper) {
-        flex-grow: 1;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    .map-card :global(.poi-map__popup-navigation-controls-offset) {
-        width: var(--navigation-button-size);
-        flex-shrink: 0;
-    }
-
-    .map-card :global(.poi-map__popup-navigation-arrow-button) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0px;
-        width: var(--navigation-button-size);
-        height: var(--navigation-button-size);
-        background: none;
-        border: none;
-        cursor: pointer;
-    }
-    .map-card :global(.poi-map__popup-navigation-arrow-button:disabled) {
-        cursor: not-allowed;
-    }
-    .map-card :global(.poi-map__popup-navigation-arrow-button-icon) {
-        width: 6px;
-        height: 6px;
-        border-top: 2px solid;
-        border-left: 2px solid;
-    }
-    .map-card
-        :global(#prevButton.poi-map__popup-navigation-arrow-button
-            .poi-map__popup-navigation-arrow-button-icon) {
-        transform: rotate(-45deg);
-    }
-    .map-card
-        :global(#nextButton.poi-map__popup-navigation-arrow-button
-            .poi-map__popup-navigation-arrow-button-icon) {
-        transform: rotate(135deg);
-    }
-
-    .map-card
-        :global(.poi-map__popup-navigation-arrow-button:disabled
-            .poi-map__popup-navigation-arrow-button-icon) {
-        opacity: 0.5;
-    }
-
-    .map-card :global(.poi-map__popup-navigation-close-button) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: var(--navigation-button-size);
-        height: var(--navigation-button-size);
-        padding: 0px;
-        border: none;
-        background: none;
-        cursor: pointer;
-        flex-shrink: 0;
-    }
-    .map-card :global(.poi-map__popup-navigation-close-button-icon) {
-        position: relative;
-        display: block;
-        width: 14px;
-        height: 14px;
-    }
-
-    .map-card :global(.poi-map__popup-navigation-close-button-icon:before),
-    .map-card :global(.poi-map__popup-navigation-close-button-icon:after) {
-        position: absolute;
-        left: 6px;
-        content: '';
-        height: 100%;
-        width: 2px;
-        border-radius: 2px;
-        background-color: #333;
-    }
-    .map-card :global(.poi-map__popup-navigation-close-button-icon:before) {
-        transform: rotate(45deg);
-    }
-    .map-card :global(.poi-map__popup-navigation-close-button-icon:after) {
-        transform: rotate(-45deg);
-    }
-
-    /* --- CONTROLS --- */
-    .map-card :global(.maplibregl-ctrl.maplibregl-ctrl-group) {
-        margin-top: 13px;
-        margin-right: 13px;
-        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.26);
-    }
-    .main {
-        aspect-ratio: var(--aspect-ratio);
-        flex-grow: 1;
-        position: relative;
-        display: block;
-    }
-    /* Suitable for elements that are used via aria-describedby or aria-labelledby */
-    .a11y-invisible-description {
-        display: none;
-    }
-</style>
diff --git a/packages/visualizations/src/components/MapPoi/index.ts b/packages/visualizations/src/components/MapPoi/index.ts
deleted file mode 100644
index ed9b59944..000000000
--- a/packages/visualizations/src/components/MapPoi/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import PoiMap from './Map.svelte';
-
-import 'maplibre-gl/dist/maplibre-gl.css';
-
-export default PoiMap;
diff --git a/packages/visualizations/src/components/MapPoi/mapStyles.ts b/packages/visualizations/src/components/MapPoi/mapStyles.ts
deleted file mode 100644
index d16fd5232..000000000
--- a/packages/visualizations/src/components/MapPoi/mapStyles.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { StyleSpecification } from 'maplibre-gl';
-
-// eslint-disable-next-line import/prefer-default-export
-export const BLANK: StyleSpecification = {
-    version: 8,
-    sources: {},
-    metadata: {},
-    layers: [],
-};
diff --git a/packages/visualizations/src/components/Pagination/Pagination.svelte b/packages/visualizations/src/components/Pagination/Pagination.svelte
index 28248cbbb..c71f33fbe 100644
--- a/packages/visualizations/src/components/Pagination/Pagination.svelte
+++ b/packages/visualizations/src/components/Pagination/Pagination.svelte
@@ -9,7 +9,8 @@
     export let onPageChange: (page: number) => void;
     export let totalRecords: number;
     export let recordsPerPage: number;
-    export let pageSizeSelect: PageSizeSelect;
+    // eslint-disable-next-line no-undef-init
+    export let pageSizeSelect: PageSizeSelect | undefined = undefined;
     export let labels: Pagination['labels'] = {};
 
     $: totalPages = Math.ceil(totalRecords / recordsPerPage);
diff --git a/packages/visualizations/src/components/Table/Cell/Format/GeoFormat.svelte b/packages/visualizations/src/components/Table/Cell/Format/GeoFormat.svelte
new file mode 100644
index 000000000..587cd6d48
--- /dev/null
+++ b/packages/visualizations/src/components/Table/Cell/Format/GeoFormat.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+    import type { Content } from 'tippy.js';
+
+    import { WebGlMap } from '../../../Map';
+    import type { WebGlMapOptions, WebGlMapData } from '../../../Map';
+    import tippy from '../../../utils/tippy';
+
+    export let rawValue: unknown;
+    export let display = (v: unknown) => v;
+    export let mapOptions: WebGlMapOptions;
+    export let sources: (v: unknown) => WebGlMapData['sources'] = () => ({});
+    export let layers: (v: unknown) => WebGlMapData['layers'] = () => [];
+
+    let tooltipContent: Content;
+    let showMap = false;
+
+    $: data = {
+        sources: sources(rawValue),
+        layers: layers(rawValue),
+    };
+</script>
+
+<div
+    role="button"
+    tabindex="0"
+    use:tippy={{
+        content: tooltipContent,
+        theme: 'ods-visualization-table',
+        delay: [500, 0],
+        duration: [275, 0],
+        maxWidth: 'none',
+        onTrigger: () => {
+            showMap = true;
+        },
+        onUntrigger: () => {
+            showMap = false;
+        },
+    }}
+>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div class="label">{display(rawValue)}</div>
+    <!-- To run a WebGl instance only when tooltip is visible -->
+    {#if showMap}
+        <div bind:this={tooltipContent} class="table-cell-map-container">
+            <WebGlMap options={mapOptions} {data} />
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    .label {
+        cursor: pointer;
+        text-decoration: underline;
+    }
+    :global(.table-cell-map-container) {
+        width: 360px;
+        height: 240px;
+        :global(.ods-visualization__map-container) {
+            border-radius: 3px;
+        }
+    }
+</style>
diff --git a/packages/visualizations/src/components/Table/Cell/Format/index.ts b/packages/visualizations/src/components/Table/Cell/Format/index.ts
index 7c6c60fb8..3d6d9469b 100644
--- a/packages/visualizations/src/components/Table/Cell/Format/index.ts
+++ b/packages/visualizations/src/components/Table/Cell/Format/index.ts
@@ -4,6 +4,7 @@ import NumberFormat from './NumberFormat.svelte';
 import URLFormat from './URLFormat.svelte';
 import ShortTextFormat from './ShortTextFormat.svelte';
 import LongTextFormat from './LongTextFormat.svelte';
+import GeoFormat from './GeoFormat.svelte';
 import { isValidRawValue } from './utils';
 
 const Format = {
@@ -13,6 +14,7 @@ const Format = {
     'long-text': LongTextFormat,
     url: URLFormat,
     number: NumberFormat,
+    geo: GeoFormat,
 };
 
 export { isValidRawValue };
diff --git a/packages/visualizations/src/components/Table/Headers/SortButton.svelte b/packages/visualizations/src/components/Table/Headers/SortButton.svelte
index 75b1fbc5e..d9fc05dec 100644
--- a/packages/visualizations/src/components/Table/Headers/SortButton.svelte
+++ b/packages/visualizations/src/components/Table/Headers/SortButton.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { ColumnSort, type ColumnSortValues } from '../types';
+    import { ColumnSort } from '../types';
+    import type { ColumnSortValues } from '../types';
     import SortIcon from './SortIcon.svelte';
 
     export let sorted: ColumnSortValues | undefined;
diff --git a/packages/visualizations/src/components/Table/Headers/SortIcon.svelte b/packages/visualizations/src/components/Table/Headers/SortIcon.svelte
index 381fea89f..896ab0109 100644
--- a/packages/visualizations/src/components/Table/Headers/SortIcon.svelte
+++ b/packages/visualizations/src/components/Table/Headers/SortIcon.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { ColumnSort, type ColumnSortValues } from "../types";
+    import { ColumnSort } from '../types';
+    import type { ColumnSortValues } from '../types';
 
     export let sorted: ColumnSortValues | undefined;
 </script>
diff --git a/packages/visualizations/src/components/Table/constants.ts b/packages/visualizations/src/components/Table/constants.ts
index e78d688d4..48ff4380c 100644
--- a/packages/visualizations/src/components/Table/constants.ts
+++ b/packages/visualizations/src/components/Table/constants.ts
@@ -6,4 +6,5 @@ export const DATA_FORMAT = {
     number: 'number',
     boolean: 'boolean',
     url: 'url',
+    geo: 'geo',
 } as const;
diff --git a/packages/visualizations/src/components/Table/types.ts b/packages/visualizations/src/components/Table/types.ts
index e0050e832..ee519df3d 100644
--- a/packages/visualizations/src/components/Table/types.ts
+++ b/packages/visualizations/src/components/Table/types.ts
@@ -2,6 +2,7 @@ import type { DataFrame, Source } from '../types';
 import type { DATA_FORMAT } from './constants';
 import type { Pagination } from '../Pagination/types';
 import type { Async } from '../../types';
+import type { WebGlMapData, WebGlMapOptions } from '../Map';
 
 type DataFormatKey = keyof typeof DATA_FORMAT;
 export type DataFormat = typeof DATA_FORMAT[DataFormatKey];
@@ -85,13 +86,24 @@ export type URLColumn = BaseColumn & {
     };
 };
 
+export type GeoColumn = BaseColumn & {
+    dataFormat: typeof DATA_FORMAT.geo;
+    options?: Partial<{
+        mapOptions: WebGlMapOptions;
+        display: (v: unknown) => string;
+        sources: (v: unknown) => WebGlMapData['sources'];
+        layers: (v: unknown) => WebGlMapData['layers'];
+    }>;
+};
+
 export type Column =
     | ShortTextColumn
     | LongTextColumn
     | NumberColumn
     | DateColumn
     | BooleanColumn
-    | URLColumn;
+    | URLColumn
+    | GeoColumn;
 
 export type TableOptions = {
     columns: Column[];
diff --git a/packages/visualizations/src/components/utils/MiniMap.svelte b/packages/visualizations/src/components/utils/MiniMap.svelte
index 1e71f7b90..2dbf71580 100644
--- a/packages/visualizations/src/components/utils/MiniMap.svelte
+++ b/packages/visualizations/src/components/utils/MiniMap.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import tippy from './tippy';
-    import SvgChoropleth from '../Map/Svg/Choropleth.svelte';
+    import SvgChoropleth from '../ChoroplethMap/Svg/Choropleth.svelte';
     import type { ColorScale } from '../types';
-    import type { ChoroplethDataValue, NavigationMap } from '../Map/types';
+    import type { ChoroplethDataValue, NavigationMap } from '../ChoroplethMap/types';
 
     export let active: boolean;
     export let showTooltip: boolean;
diff --git a/packages/visualizations/src/components/utils/index.ts b/packages/visualizations/src/components/utils/index.ts
index f2b93d87c..a8db14489 100644
--- a/packages/visualizations/src/components/utils/index.ts
+++ b/packages/visualizations/src/components/utils/index.ts
@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 /**
  * Check (in the compiler) that a switch block is exhaustive.
  * Documentation: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#exhaustiveness-checking
diff --git a/packages/visualizations/src/components/utils/tippy.ts b/packages/visualizations/src/components/utils/tippy/index.ts
similarity index 94%
rename from packages/visualizations/src/components/utils/tippy.ts
rename to packages/visualizations/src/components/utils/tippy/index.ts
index 4efddb000..2802b9b8f 100644
--- a/packages/visualizations/src/components/utils/tippy.ts
+++ b/packages/visualizations/src/components/utils/tippy/index.ts
@@ -1,5 +1,6 @@
 import tippy, { Props } from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
+import './themes.scss';
 
 export default function tippyAction(node: HTMLElement, initialProps: Partial<Props>) {
     const instance = tippy(node, initialProps);
diff --git a/packages/visualizations/src/components/utils/tippy/themes.scss b/packages/visualizations/src/components/utils/tippy/themes.scss
new file mode 100644
index 000000000..47cc2a390
--- /dev/null
+++ b/packages/visualizations/src/components/utils/tippy/themes.scss
@@ -0,0 +1,26 @@
+$table-theme: 'ods-visualization-table';
+$table-background-color: white;
+$tippy-box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.26);
+
+.tippy-box[data-theme~='#{$table-theme}'] {
+    background-color: $table-background-color;
+    box-shadow: $tippy-box-shadow;
+}
+
+.tippy-box[data-theme~='#{$table-theme}'] > .tippy-content {
+    padding: 6px;
+    border-radius: 6px;
+}
+
+.tippy-box[data-theme~='#{$table-theme}'][data-placement^='top'] > .tippy-arrow::before {
+    border-top-color: $table-background-color;
+}
+.tippy-box[data-theme~='#{$table-theme}'][data-placement^='bottom'] > .tippy-arrow::before {
+    border-bottom-color: $table-background-color;
+}
+.tippy-box[data-theme~='#{$table-theme}'][data-placement^='left'] > .tippy-arrow::before {
+    border-left-color: $table-background-color;
+}
+.tippy-box[data-theme~='#{$table-theme}'][data-placement^='right'] > .tippy-arrow::before {
+    border-right-color: $table-background-color;
+}
diff --git a/packages/visualizations/src/index.ts b/packages/visualizations/src/index.ts
index ddcea1e58..3bd940667 100644
--- a/packages/visualizations/src/index.ts
+++ b/packages/visualizations/src/index.ts
@@ -1,21 +1,22 @@
 export { default as Chart, _ChartDataLabels } from './components/Chart';
 export { default as MarkdownText } from './components/MarkdownText';
 export { default as KpiCard } from './components/KpiCard';
-export { ChoroplethGeoJson, ChoroplethVectorTiles } from './components/Map/WebGl';
-export { default as ChoroplethSvg } from './components/Map/Svg';
-export { default as PoiMap } from './components/MapPoi';
+export { ChoroplethGeoJson, ChoroplethVectorTiles } from './components/ChoroplethMap/WebGl';
+export { default as ChoroplethSvg } from './components/ChoroplethMap/Svg';
 export { default as Table } from './components/Table';
 
+export * from './components/Map';
+
 export * from './types';
 export * from './components/types';
 export * from './components/Chart/types';
 export * from './components/KpiCard/types';
-export * from './components/Map/types';
+export * from './components/ChoroplethMap/types';
 export * from './components/MarkdownText/types';
-export * from './components/MapPoi/types';
 export * from './components/Legend/types';
 export * from './components/Table/types';
 export * from './components/Pagination/types';
+export * from './components/utils';
 
 /* We export Svelte types from the main package to avoid conflicting versions
 It still is purely a dev thing and we'll bundle they types directly */