From a9eb851df0a81383a12db829d3b745fdb35e628d Mon Sep 17 00:00:00 2001
From: Kevin Fabre <kevin.fabre@opendatasoft.com>
Date: Fri, 28 Jul 2023 18:04:00 +0200
Subject: [PATCH] feat(map): handle multiple sources and layers

---
 .../src/components/PoiGeoJson.tsx             |  11 +-
 .../stories/Poi/PoiGeoJson.stories.tsx        |  79 +++++---
 .../visualizations-react/stories/Poi/data.ts  |  15 +-
 .../src/components/MapPoi/Map.ts              | 118 +++++++++++
 .../src/components/MapPoi/MapRender.svelte    | 189 ++----------------
 .../src/components/MapPoi/PoiGeoJson.svelte   |  67 ++-----
 .../src/components/MapPoi/constants.ts        |  29 +--
 .../src/components/MapPoi/index.ts            |   5 +-
 .../src/components/MapPoi/types.ts            |  61 ++++--
 .../src/components/MapPoi/utils.ts            |  79 +++++---
 10 files changed, 312 insertions(+), 341 deletions(-)
 create mode 100644 packages/visualizations/src/components/MapPoi/Map.ts

diff --git a/packages/visualizations-react/src/components/PoiGeoJson.tsx b/packages/visualizations-react/src/components/PoiGeoJson.tsx
index bf7ac7e7..07c527b3 100644
--- a/packages/visualizations-react/src/components/PoiGeoJson.tsx
+++ b/packages/visualizations-react/src/components/PoiGeoJson.tsx
@@ -1,9 +1,12 @@
-import { PoiGeoJson as _PoiGeoJson, PoiMapOptions } from '@opendatasoft/visualizations';
-import { FeatureCollection } from 'geojson';
+import {
+    PoiGeoJson as _PoiGeoJson,
+    PoiMapOptions,
+    PoiMapData,
+    Async,
+} from '@opendatasoft/visualizations';
 import { FC } from 'react';
-import { Props } from './Props';
 import wrap from './ReactImpl';
 
 // Explicit name and type are needed for Storybook
-const PoiGeoJson: FC<Props<FeatureCollection, PoiMapOptions>> = wrap(_PoiGeoJson);
+const PoiGeoJson: FC<{ data: Async<PoiMapData>; options: PoiMapOptions }> = wrap(_PoiGeoJson);
 export default PoiGeoJson;
diff --git a/packages/visualizations-react/stories/Poi/PoiGeoJson.stories.tsx b/packages/visualizations-react/stories/Poi/PoiGeoJson.stories.tsx
index 5f309b43..0d307ea0 100644
--- a/packages/visualizations-react/stories/Poi/PoiGeoJson.stories.tsx
+++ b/packages/visualizations-react/stories/Poi/PoiGeoJson.stories.tsx
@@ -1,11 +1,25 @@
 import React from 'react';
+import { BBox } from 'geojson';
+import { PoiMapData } from '@opendatasoft/visualizations';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { PoiMapOptions } from '@opendatasoft/visualizations';
-import { FeatureCollection } from 'geojson';
-import { shapes } from './data';
-import { PoiGeoJson, Props } from '../../src';
 
-const DEMO_BASEMAP = 'https://demotiles.maplibre.org/style.json';
+import { PoiGeoJson } from '../../src';
+import { shapes as data } from './data';
+
+const BASE_STYLE = 'https://demotiles.maplibre.org/style.json';
+
+const layers : PoiMapData["layers"] = [{
+    id: 'data-layer-001',
+    source: "data",
+    type: "circle",
+    color: '#B42222',
+    colorMatch: {
+        key: 'key',
+        colors: {Paris: 'blue', Nantes: 'yellow', Bordeaux: 'purple', Corsica: 'white', Marseille : 'lightblue' }
+    }
+}];
+
+const bbox : BBox = [ -6.855469,41.343825,11.645508,51.371780];
 
 const meta: ComponentMeta<typeof PoiGeoJson> = {
     title: 'Poi/GeoJson',
@@ -14,9 +28,7 @@ const meta: ComponentMeta<typeof PoiGeoJson> = {
 
 export default meta;
 
-const Template: ComponentStory<typeof PoiGeoJson> = (
-    args: Props<FeatureCollection, PoiMapOptions>
-) => (
+const Template: ComponentStory<typeof PoiGeoJson> = args => (
     <div
         style={{
             width: '50%',
@@ -30,40 +42,41 @@ const Template: ComponentStory<typeof PoiGeoJson> = (
     </div>
 );
 
-export const PoiMapNoLayersParams = Template.bind({});
-const PoiMapNoLayersParamsArgs: Props<FeatureCollection, PoiMapOptions> = {
-    data: { value: shapes },
-    options: {
-        style: DEMO_BASEMAP,
-    },
+/**
+ * STORY: No layer params
+ */
+export const PoiMapNoLayersParams : ComponentStory<typeof PoiGeoJson> = Template.bind({});
+const PoiMapNoLayersParamsArgs = {
+    data: {},
+    options: {style: BASE_STYLE, bbox}
 };
 PoiMapNoLayersParams.args = PoiMapNoLayersParamsArgs;
 
-const layerParams = {
-    colors: ['#B42222', 'Green'],
-    matchValues: ['Paris', 'Nantes'],
-    matchKey: 'key',
-};
-
-export const PoiMapNonInteractive = Template.bind({});
-
-const PoiMapNonInteractiveArgs: Props<FeatureCollection, PoiMapOptions> = {
-    data: { value: shapes },
+/**
+ * STORY: No interactive
+ */
+export const PoiMapNonInteractive : ComponentStory<typeof PoiGeoJson> = Template.bind({});
+const PoiMapNonInteractiveArgs = {
+    data:  {value:{ layers, sources: { [layers[0].source] : {type: "geojson" as const, data}}}},
     options: {
-        layerParams,
-        style: DEMO_BASEMAP,
+        style: BASE_STYLE,
+        layers,
         interactive: false,
     },
 };
 PoiMapNonInteractive.args = PoiMapNonInteractiveArgs;
 
-export const PoiMapMatchExpression = Template.bind({});
-
-const PoiMapMatchExpressionArgs: Props<FeatureCollection, PoiMapOptions> = {
-    data: { value: shapes },
-    options: {
-        layerParams,
-        style: DEMO_BASEMAP,
+/**
+ * STORY: With match expression
+ */
+export const PoiMapMatchExpression : ComponentStory<typeof PoiGeoJson> = Template.bind({});
+const PoiMapMatchExpressionArgs = {
+    data: {
+        value: {
+            layers,
+            sources: {[layers[0].source] : {type: "geojson" as const, data}}
+        }
     },
+    options: {style: BASE_STYLE, bbox },
 };
 PoiMapMatchExpression.args = PoiMapMatchExpressionArgs;
diff --git a/packages/visualizations-react/stories/Poi/data.ts b/packages/visualizations-react/stories/Poi/data.ts
index 424cadb1..0445bb62 100644
--- a/packages/visualizations-react/stories/Poi/data.ts
+++ b/packages/visualizations-react/stories/Poi/data.ts
@@ -518,8 +518,7 @@ export const shapes: FeatureCollection = {
                     type: 'Point',
                 },
                 properties: {
-                    key: 'Corsica',
-                    cat: 'Red',
+                    key: 'Corsica'
                 },
             },
             {
@@ -529,8 +528,7 @@ export const shapes: FeatureCollection = {
                     coordinates: [2.357573,48.837904],
                 },
                 properties: {
-                    key: 'Paris',
-                    cat: 'Red',
+                    key: 'Paris'
                 },
             },
             {
@@ -540,8 +538,7 @@ export const shapes: FeatureCollection = {
                     coordinates: [-0.563328,44.838245],
                 },
                 properties: {
-                    key: 'Bordeaux',
-                    cat: 'Blue',
+                    key: 'Bordeaux'
                 },
             },
             {
@@ -551,8 +548,7 @@ export const shapes: FeatureCollection = {
                     coordinates: [-1.552924,47.214847],
                 },
                 properties: {
-                    key: 'Nantes',
-                    cat: 'Blue',
+                    key: 'Nantes'
                 },
             },
             {
@@ -562,8 +558,7 @@ export const shapes: FeatureCollection = {
                     coordinates: [5.360529,43.303114],
                 },
                 properties: {
-                    key: 'Marseille',
-                    cat: 'Red',
+                    key: 'Marseille'
                 },
             },
         ],
diff --git a/packages/visualizations/src/components/MapPoi/Map.ts b/packages/visualizations/src/components/MapPoi/Map.ts
new file mode 100644
index 00000000..45d7e5c1
--- /dev/null
+++ b/packages/visualizations/src/components/MapPoi/Map.ts
@@ -0,0 +1,118 @@
+import type { BBox } from 'geojson';
+import maplibregl, {
+    LngLatBoundsLike,
+    LngLatLike,
+    MapOptions,
+    StyleSpecification,
+} from 'maplibre-gl';
+
+type MapFunction = () => unknown;
+
+const DEFAULT_CENTER: LngLatLike = [3.5, 46];
+
+export default class MapPOI {
+    map: maplibregl.Map | null = null;
+
+    isReady = false;
+
+    baseStyle: StyleSpecification | null = null;
+
+    queuedFunctions: Array<MapFunction> = [];
+
+    navigation = new maplibregl.NavigationControl({ showCompass: false });
+
+    initialize(
+        style: MapOptions['style'],
+        container: HTMLElement,
+        options: Omit<MapOptions, 'style' | 'container'>
+    ) {
+        this.map = new maplibregl.Map({ style, container, center: DEFAULT_CENTER, ...options });
+        this.map.on('load', () => {
+            this.isReady = true;
+            // Store base style after the first loads
+            if (this.map) {
+                this.baseStyle = this.map?.getStyle();
+            }
+            this.enqueue();
+        });
+    }
+
+    queue(fn: MapFunction) {
+        if (this.isReady) fn();
+        else this.queuedFunctions.push(fn);
+    }
+
+    enqueue() {
+        this.queuedFunctions.forEach((fn) => fn());
+        this.queuedFunctions = [];
+    }
+
+    remove() {
+        this.map?.remove();
+    }
+
+    // TODO: add tests to check that layers are at the end of the array
+    /*
+     * TODO: When updating Maplibre to a 3.2.2 version or up
+     * - Update this code to use the option transformStyle.
+     *   https://maplibre.org/maplibre-gl-js/docs/API/types/maplibregl.TransformStyleFunction/
+     * - `baseStyle` could be removed
+     * - The key block could also be removed in MapRender.svelte
+     */
+    setSourcesAndLayers(
+        sources: StyleSpecification['sources'],
+        layers: StyleSpecification['layers']
+    ) {
+        this.queue(() => {
+            if (this.baseStyle) {
+                this.map?.setStyle({
+                    ...this.baseStyle,
+                    sources: {
+                        ...sources,
+                        ...this.baseStyle.sources,
+                    },
+                    layers: [...this.baseStyle.layers, ...layers],
+                });
+            }
+        });
+    }
+
+    setBbox(bbox?: BBox) {
+        this.queue(() => {
+            if (!bbox) {
+                // zoom-out to bounds defined in the initialization
+                this.map?.setZoom(this.map?.getMinZoom());
+                return;
+            }
+
+            // Cancel any saved max bounds to properly fitBounds
+            this.map?.setMaxBounds(null);
+            // Using padding, keep enough room for controls (zoom) to make sure they don't hide anything
+            this.map?.fitBounds(bbox as LngLatBoundsLike, {
+                animate: false,
+                padding: 40,
+            });
+        });
+    }
+
+    toggleInteractivity(interaction: 'enable' | 'disable') {
+        this.queue(() => {
+            this.map?.boxZoom[interaction]();
+            this.map?.doubleClickZoom[interaction]();
+            this.map?.dragPan[interaction]();
+            this.map?.dragRotate[interaction]();
+            this.map?.keyboard[interaction]();
+            this.map?.scrollZoom[interaction]();
+            this.map?.touchZoomRotate[interaction]();
+
+            const hasNavigation = this.map?.hasControl(this.navigation);
+
+            if (interaction === 'disable' && hasNavigation) {
+                this.map?.removeControl(this.navigation);
+            }
+            if (!hasNavigation && interaction === 'enable') {
+                this.map?.addControl(this.navigation, 'top-right');
+            }
+        });
+    }
+}
diff --git a/packages/visualizations/src/components/MapPoi/MapRender.svelte b/packages/visualizations/src/components/MapPoi/MapRender.svelte
index c88bfcb6..243af702 100644
--- a/packages/visualizations/src/components/MapPoi/MapRender.svelte
+++ b/packages/visualizations/src/components/MapPoi/MapRender.svelte
@@ -1,186 +1,33 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-    import maplibregl, {
-        Map as MapType,
-        SourceSpecification,
-        StyleSpecification,
-        NavigationControl,
-        MapSourceDataEvent,
-        LngLatLike,
-        LngLatBoundsLike,
-    } from 'maplibre-gl';
     import type { BBox } from 'geojson';
+    import type { LngLatBoundsLike, MapOptions, StyleSpecification } from 'maplibre-gl';
+    import { onDestroy, onMount } from 'svelte';
 
-    import { onMount } from 'svelte';
-    import type { PoiMapLayer } from './types';
-    import { BLANK } from '../Map/mapStyles';
+    import MapPOI from './Map';
 
-    // maplibre style (basemap)
-    export let style: StyleSpecification | string = BLANK;
-    // maplibre source config
-    export let source: SourceSpecification;
-    // maplibre layer config
-    export let layers: PoiMapLayer[];
-    // array of created layer ids
-    let storedLayerIds: string[] = [];
-    // bounding box to start from, and restrict to it
-    export let bbox: BBox | undefined;
-    $: currentBbox = bbox;
-    // aspect ratio based on width, by default equal to 1
-    export let aspectRatio = 1;
-    $: cssVarStyles = `--aspect-ratio:${aspectRatio};`;
-    // option to disable map interactions
+    // Base style, sources and layers
+    export let style: MapOptions['style'];
+    export let sources: StyleSpecification['sources'];
+    export let layers: StyleSpecification['layers'];
+
+    // Options
+    export let bbox: BBox;
+    export let aspectRatio: number;
     export let interactive: boolean;
 
     let container: HTMLElement;
-    let map: MapType;
-    // Used to add navigation control to map
-    let nav: NavigationControl;
-
-    let mapReady = false;
-
-    // Used in front of console and error messages to debug multiple maps on a same page
-    const mapId = Math.floor(Math.random() * 1000);
-    const sourceId = `shape-source-${mapId}`;
-    const layerId = `shape-layer-${mapId}`;
-
-    function initializeMap() {
-        const defaultCenter: LngLatLike = [3.5, 46];
-        const start = {
-            center: defaultCenter,
-            zoom: 5,
-            // if defined, overrides center and zoom
-            bounds: currentBbox as LngLatBoundsLike,
-        };
-
-        map = new maplibregl.Map({
-            container,
-            style,
-            ...start,
-        });
-
-        nav = new maplibregl.NavigationControl({ showCompass: false });
-
-        map.addControl(nav, 'top-right');
+    const map = new MapPOI();
 
-        map.on('load', () => {
-            mapReady = true;
-        });
-
-        return () => map.remove();
-    }
-
-    function sourceLoadingCallback(e: MapSourceDataEvent) {
-        // sourceDataType can be "visibility" or "metadata", in which case it's not about the data itself
-        if (e.isSourceLoaded && e.sourceId === sourceId && !e.sourceDataType) {
-            map.querySourceFeatures(
-                sourceId,
-                // The type forces you to pass a filter parameter in the option, but it's not required by the real code
-                // https://github.com/maplibre/maplibre-gl-js/issues/1393
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                {
-                    sourceLayer: layerId, // FIXME: This may not the best way to do it
-                }
-            );
-            map.off('sourcedata', sourceLoadingCallback);
-        }
-    }
-
-    const setBbox = (box: BBox | undefined) => {
-        if (!box) {
-            // zoom-out to bounds defined in the initialization
-            map.setZoom(map.getMinZoom());
-            return;
-        }
-        // Cancel any saved max bounds to properly fitBounds
-        map.setMaxBounds(null);
-        // Using padding, keep enough room for controls (zoom) to make sure they don't hide anything
-        map.fitBounds(box as LngLatBoundsLike, {
-            animate: false,
-            padding: 40,
-        });
-    };
-
-    function handleInteractivity(isInteractive: boolean) {
-        if (isInteractive) {
-            // Enable all user interaction handlers
-            // Another way to disable all user handlers is to pass the option interactive = false on map creation
-            // But it doesn't allow to change it afterwards
-            // Id est it forces you to recreate another map if you want to change that option
-            map.boxZoom.enable();
-            map.doubleClickZoom.enable();
-            map.dragPan.enable();
-            map.dragRotate.enable();
-            map.keyboard.enable();
-            map.scrollZoom.enable();
-            map.touchZoomRotate.enable();
-
-            // Add navigation control to map
-            if (!map.hasControl(nav)) {
-                map.addControl(nav, 'top-right');
-            }
-        } else {
-            // Disable all user interaction handlers
-            map.boxZoom.disable();
-            map.doubleClickZoom.disable();
-            map.dragPan.disable();
-            map.dragRotate.disable();
-            map.keyboard.disable();
-            map.scrollZoom.disable();
-            map.touchZoomRotate.disable();
-
-            // Remove navigation control from map
-            if (map.hasControl(nav)) {
-                map.removeControl(nav);
-            }
-            // Reset map Bbox to reset zoom
-            if (mapReady && bbox) {
-                setBbox(currentBbox);
-            }
-        }
-    }
-
-    function updateSourceAndLayer(newSource: SourceSpecification, newLayer: PoiMapLayer[]) {
-        if (newSource && newLayer) {
-            // Remove all custom layers but keep maplibre other style layers
-            // Must be done before removing Source used by layers
-            // FIXME: find a better way to handle multiple layers
-            if (storedLayerIds.length > 0) {
-                storedLayerIds.forEach((customLayerId) => map.removeLayer(customLayerId));
-                storedLayerIds = [];
-            }
-
-            if (map.getSource(sourceId)) {
-                map.removeSource(sourceId);
-            }
-            map.addSource(sourceId, newSource);
-            newLayer.forEach((layer, i) => {
-                const uniqueLayerId = `${layerId}-${i}`;
-                map.addLayer({
-                    ...layer,
-                    id: uniqueLayerId,
-                    source: sourceId,
-                });
-                storedLayerIds.push(uniqueLayerId);
-                map.on('sourcedata', sourceLoadingCallback);
-            });
-        }
-    }
+    $: map.toggleInteractivity(interactive ? 'enable' : 'disable');
+    $: map.setBbox(bbox);
+    $: map.setSourcesAndLayers(sources, layers);
+    $: cssVarStyles = `--aspect-ratio:${aspectRatio};`;
 
     // Lifecycle
-    onMount(initializeMap);
-
-    $: if (mapReady) {
-        updateSourceAndLayer(source, layers);
-    }
-    $: if (mapReady) {
-        handleInteractivity(interactive);
-    }
-    $: if (mapReady && currentBbox) {
-        setBbox(currentBbox);
-    }
+    onMount(() => map.initialize(style, container, { bounds: bbox as LngLatBoundsLike }));
+    onDestroy(() => map.remove());
 </script>
 
 <figure class="map-card maps-container" style={cssVarStyles}>
diff --git a/packages/visualizations/src/components/MapPoi/PoiGeoJson.svelte b/packages/visualizations/src/components/MapPoi/PoiGeoJson.svelte
index 2f0ef84e..05346d3b 100644
--- a/packages/visualizations/src/components/MapPoi/PoiGeoJson.svelte
+++ b/packages/visualizations/src/components/MapPoi/PoiGeoJson.svelte
@@ -1,68 +1,25 @@
 <script lang="ts">
-    import turfBbox from '@turf/bbox';
-    import type { SourceSpecification, StyleSpecification } from 'maplibre-gl';
-    import type { BBox, FeatureCollection } from 'geojson';
     import MapRender from './MapRender.svelte';
-    import { BLANK } from './mapStyles';
-    import { VOID_BOUNDS, computeBaseRoundMarkerLayer } from './utils';
-    import { DEFAULT_LAYERS_PARAMS } from './constants';
-    import type { PoiMapOptions, PoiMapLayer, LayerParams } from './types';
 
-    export let data: { value: FeatureCollection }; // values and geo points to display
-    export let options: PoiMapOptions;
-
-    let bbox: BBox | undefined;
-
-    let layerParams: LayerParams | undefined;
-    let aspectRatio: number | undefined;
-    let interactive: boolean;
+    import type { Async } from '../../types';
 
-    // Here style will set the basemap
-    let style: StyleSpecification | string;
-    let layers: PoiMapLayer[];
-    let source: SourceSpecification;
+    import { getMapStyle, getMapSources, getMapLayers, getMapOptions } from './utils';
+    import type { PoiMapData, PoiMapOptions } from './types';
 
-    const defaultInteractive = true;
-
-    $: ({
-        style = BLANK,
-        bbox,
-        layerParams,
-        aspectRatio,
-        interactive = defaultInteractive,
-    } = options);
-    let renderedBbox = bbox || VOID_BOUNDS;
+    export let data: Async<PoiMapData>;
+    export let options: PoiMapOptions;
 
-    function computeSourceLayers(newShapes: FeatureCollection) {
-        source = {
-            type: 'geojson',
-            data: newShapes,
-        };
-        // layers will be stored in an array as it will be needed to add more than one layer to display different geometries
-        return layerParams
-            ? [
-                  computeBaseRoundMarkerLayer(
-                      layerParams.colors,
-                      layerParams.matchValues,
-                      layerParams.matchKey
-                  ),
-              ]
-            : [DEFAULT_LAYERS_PARAMS];
-    }
+    $: style = getMapStyle(options.style);
+    $: sources = getMapSources(data.value?.sources);
+    $: layers = getMapLayers(data.value?.layers);
 
-    $: if (data.value) {
-        layers = computeSourceLayers(data.value);
-        // We need to check that features are not empty before computing bbox through turf,
-        // if they are empty (through filtering for example) we fallback
-        // to bbox from options (or if bbox is undefined we keep VOID_BOUNDS from initialization)
-        if (data.value.features.length > 0) {
-            renderedBbox = bbox || turfBbox(data.value);
-        }
-    }
+    $: computedOptions = getMapOptions(options);
 </script>
 
 <div>
-    <MapRender {style} {source} {layers} bbox={renderedBbox} {aspectRatio} {interactive} />
+    {#key style}
+        <MapRender {style} {sources} {layers} {...computedOptions} />
+    {/key}
 </div>
 
 <style>
diff --git a/packages/visualizations/src/components/MapPoi/constants.ts b/packages/visualizations/src/components/MapPoi/constants.ts
index 6cbdf28f..bff7117c 100644
--- a/packages/visualizations/src/components/MapPoi/constants.ts
+++ b/packages/visualizations/src/components/MapPoi/constants.ts
@@ -1,20 +1,13 @@
-import type { Color } from '../types';
-import type { CircleLayer } from './types';
+import type { BBox } from 'geojson';
+import type { StyleSpecification } from 'maplibre-gl';
 
-export const DEFAULT_COLORS: Record<string, Color> = {
-    Default: '#CCCCCC',
-    ShapeOutline: '#FFFFFF',
-    LightGrey: '#CBD2DB',
-    DarkGrey: '#515457',
-    Blue: '#142E7B',
-} as const;
+export const DEFAULT_BASEMAP_STYLE: StyleSpecification = {
+    version: 8,
+    name: 'Opendatasoft default basemap style',
+    sources: {},
+    layers: [],
+};
 
-export const DEFAULT_LAYERS_PARAMS = {
-    type: 'circle',
-    layout: {},
-    paint: {
-        'circle-radius': 6,
-        'circle-color': DEFAULT_COLORS.Blue,
-    },
-    filter: ['==', ['geometry-type'], 'Point'],
-} as CircleLayer;
+export const DEFAULT_BBOX: BBox = [180, 90, -180, -90];
+
+export const DEFAULT_ASPECT_RATIO = 1;
diff --git a/packages/visualizations/src/components/MapPoi/index.ts b/packages/visualizations/src/components/MapPoi/index.ts
index d60bcf7e..254701b3 100644
--- a/packages/visualizations/src/components/MapPoi/index.ts
+++ b/packages/visualizations/src/components/MapPoi/index.ts
@@ -1,11 +1,10 @@
-import type { FeatureCollection } from 'geojson';
-import type { PoiMapOptions } from './types';
+import type { PoiMapData, PoiMapOptions } from './types';
 import PoiGeoJsonImpl from './PoiGeoJson.svelte';
 import SvelteImpl from '../SvelteImpl';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
 
-export default class PoiGeoJson extends SvelteImpl<FeatureCollection, PoiMapOptions> {
+export default class PoiGeoJson extends SvelteImpl<PoiMapData, PoiMapOptions> {
     protected getSvelteComponentClass(): typeof PoiGeoJsonImpl {
         return PoiGeoJsonImpl;
     }
diff --git a/packages/visualizations/src/components/MapPoi/types.ts b/packages/visualizations/src/components/MapPoi/types.ts
index 92b82727..ed6a57f0 100644
--- a/packages/visualizations/src/components/MapPoi/types.ts
+++ b/packages/visualizations/src/components/MapPoi/types.ts
@@ -1,38 +1,55 @@
 import type { CircleLayerSpecification, StyleSpecification } from 'maplibre-gl';
-import type { BBox, FeatureCollection } from 'geojson';
+import type { BBox } from 'geojson';
 import type { Color } from '../types';
 
+// To render data layers on the map
+export type PoiMapData = Partial<{
+    sources: StyleSpecification['sources'];
+    layers: Layer[];
+}>;
+
 export interface PoiMapOptions {
-    /** Configuration of map style */
-    style?: StyleSpecification | string;
-    /** Configuration for the layers to display Pois */
-    layerParams?: LayerParams;
-    /** Maximum boundaries of the map, outside of which the user cannot zoom/move
+    /*
+     * 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;
+    /**
+     * Maximum boundaries of the map, outside of which the user cannot zoom/move
      * Also set the position of the map when rendering.
-     * If undefined, the map will fit the content.
      */
     bbox?: BBox | undefined;
-    /** Aspect ratio used to draw the map. The map will take he width available to it, and decide its height based on that ratio. */
+    // Aspect ratio used to draw the map. The map will take he width available to it, and decide its height based on that ratio.
     aspectRatio?: number;
-    /** Is the map interactive for the user (zoom, move, tooltips...)? */
+    // Is the map interactive for the user (zoom, move, tooltips...)
     interactive?: boolean;
 }
-/** Structure containing the shapes data used by the POI map
- */
-export type PoiMapDataValue = {
-    value: FeatureCollection;
-};
 
-export type CircleLayer = Omit<CircleLayerSpecification, 'id' | 'source'>;
+export type PoiMapStyleOption = Partial<Pick<StyleSpecification, 'sources' | 'layers'>>;
 
-export type LayerParams = {
-    colors: Color[]; // Array of colors to match the array of values
-    matchValues: string[]; // Array of values to apply colors
-    matchKey: string; // The features key on which apply colors and values mapping
-    noMatchColor?: Color;
-};
+// Supported layers
+export type LayerSpecification = CircleLayerSpecification;
 
-export type PoiMapLayer = CircleLayer;
+/**
+ * Base on Maplibre layers https://maplibre.org/maplibre-style-spec/layers/
+ * Use only part of the configuration to build layers with consistent styles.
+ */
+export type Layer = {
+    id: string;
+    source: string;
+    sourceLayer?: string;
+    type: LayerSpecification['type'];
+    color: Color;
+    /**
+     * Set a marker color based on a value.
+     * If no match, default color comes from `color`
+     */
+    colorMatch?: {
+        key: string;
+        colors: { [key: string]: Color };
+    };
+};
 
 export type GeoPoint = {
     lat: number;
diff --git a/packages/visualizations/src/components/MapPoi/utils.ts b/packages/visualizations/src/components/MapPoi/utils.ts
index 55f21600..0682e9d4 100644
--- a/packages/visualizations/src/components/MapPoi/utils.ts
+++ b/packages/visualizations/src/components/MapPoi/utils.ts
@@ -1,31 +1,60 @@
-import type { BBox } from 'geojson';
-import type { PoiMapLayer } from './types';
-import type { Color } from '../types';
-import { DEFAULT_COLORS } from './constants';
+import type {
+    CircleLayerSpecification,
+    DataDrivenPropertyValueSpecification,
+    MapOptions,
+    StyleSpecification,
+} from 'maplibre-gl';
 
-export const computeBaseRoundMarkerLayer = (
-    colors: Color[],
-    matchValues: string[],
-    matchKey: string,
-    noMatchColor?: Color
-): PoiMapLayer => {
-    const matchExpression = ['match', ['get', matchKey]];
-    matchValues.forEach((key, i) => {
-        matchExpression.push(key);
-        matchExpression.push(colors[i]);
+import type { Layer, PoiMapData, PoiMapOptions } from './types';
+import { DEFAULT_BASEMAP_STYLE, DEFAULT_ASPECT_RATIO, DEFAULT_BBOX } from './constants';
+
+export const getMapStyle = (style: PoiMapOptions['style']): MapOptions['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'] => {
+    if (!sources) return DEFAULT_BASEMAP_STYLE.sources;
+    return sources;
+};
+
+// Only circle layers are supported
+export const getMapLayers = (layers?: Layer[]): CircleLayerSpecification[] => {
+    if (!layers) return [];
+
+    return layers.map((layer) => {
+        let cirleColor: unknown = layer.color;
+
+        if (layer.colorMatch) {
+            const { key, colors } = layer.colorMatch;
+            const groupByColors = ['match', ['get', key]];
+            Object.keys(colors).forEach((color) => {
+                groupByColors.push(color, colors[color]);
+            });
+            groupByColors.push(layer.color);
+            cirleColor = groupByColors;
+        }
+        const { id, type, source, sourceLayer } = layer;
+        return {
+            id,
+            type,
+            source,
+            ...(sourceLayer ? { 'source-layer': sourceLayer } : undefined),
+            paint: {
+                'circle-radius': 5,
+                // TODO: Better typing
+                'circle-color': cirleColor as DataDrivenPropertyValueSpecification<string>,
+            },
+            filter: ['==', ['geometry-type'], 'Point'],
+        };
     });
-    matchExpression.push(noMatchColor || DEFAULT_COLORS.Blue); // Default fallback color
+};
 
+export const getMapOptions = (options: PoiMapOptions) => {
+    const { aspectRatio = DEFAULT_ASPECT_RATIO, bbox = DEFAULT_BBOX, interactive = true } = options;
     return {
-        type: 'circle',
-        layout: {},
-        paint: {
-            'circle-radius': 6,
-            'circle-color': matchExpression,
-        },
-        filter: ['==', ['geometry-type'], 'Point'],
+        aspectRatio,
+        bbox,
+        interactive,
     };
 };
-
-// This is a default bound that will be extended
-export const VOID_BOUNDS: BBox = [180, 90, -180, -90];