Experimentations

package.json

@@ -11,22 +11,30 @@
         "build:vite": "vite build"
     },
     "devDependencies": {
-        "@opendatasoft/api-client": "^0.2.0",
+        "@gouvfr/dsfr": "^1.2.1",
+        "@opendatasoft/api-client": "latest",
         "@roxi/routify": "^2.18.3",
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
         "autoprefixer": "^10.2.5",
+        "ejs": "^3.1.6",
         "lodash": "^4.17.21",
+        "maplibre-gl": "^2.0.1",
         "npm-run-all": "^4.1.5",
+        "ol": "^6.10.0",
+        "ol-layerswitcher": "^3.8.3",
+        "ol-mapbox-style": "^6.8.1",
         "postcss": "^8.2.8",
         "postcss-import": "^14.0.0",
         "sass": "^1.43.3",
+        "sswr": "^1.3.1",
         "svelte": "^3.35.0",
         "svelte-preprocess": "^4.7.0",
         "tailwindcss": "^2.2.17",
         "vite": "^2.0.5"
     },
     "dependencies": {
         "chart.js": "^3.6.1",
+        "monotone-chain-convex-hull": "^1.0.0",
         "svelte-select": "^4.4.6"
     }
 }

src/App.svelte

@@ -3,4 +3,4 @@
   import { routes } from "../.routify/routes";
 </script>
 
-<Router {routes} />
+<Router {routes} />

src/components/DataLayer.svelte

@@ -0,0 +1,36 @@
+<script>
+    import VectorSource from "ol/source/Vector";
+    import VectorLayer from "ol/layer/Vector";
+    import {getContext, onMount} from "svelte";
+    import {GeoJSON} from "ol/format";
+
+    let { map, addLayer } = getContext('map')
+
+    export let data = undefined;
+
+    let vectorFeatures = [];
+    let vectorSource = new VectorSource({
+        features: vectorFeatures
+    })
+    let vectorLayer = new VectorLayer({
+        zIndex: 1,
+        source: vectorSource
+    })
+
+    let geojsonFeatures = [];
+
+    $: if (data) (geojsonFeatures = new GeoJSON().readFeatures(data, {
+        dataProjection: "EPSG:4326",
+        featureProjection: "EPSG:3857"
+    }));
+
+    $: if (geojsonFeatures.length > 0) {
+        vectorSource.clear();
+        vectorSource.addFeatures(geojsonFeatures);
+        map.getView().fit(vectorSource.getExtent(), {duration: 1000});
+    }
+
+    onMount(() => {
+        addLayer(vectorLayer);
+    })
+</script>

src/components/LayerSwitcher.svelte

@@ -0,0 +1,16 @@
+<script>
+    import LayerSwitcher from 'ol-layerswitcher';
+    import {getContext, onDestroy, onMount} from "svelte";
+
+    let { map } = getContext('map');
+
+    const layerSwitcher = new LayerSwitcher();
+
+    onMount(() => {
+        map.addControl(layerSwitcher);
+    })
+
+    onDestroy(() => {
+        map.removeControl(layerSwitcher);
+    })
+</script>

src/components/Map.svelte

@@ -0,0 +1,42 @@
+<script>
+    import Map from "ol/Map";
+    import {onMount, setContext} from "svelte";
+    import {View} from "ol";
+    import {DragRotateAndZoom} from "ol/interaction";
+    import TileLayer from "ol/layer/Tile";
+    import OSM from "ol/source/OSM";
+
+    let htmlElement;
+    let pendingLayers = [];
+    let context = {
+        map: undefined,
+        addLayer: (layer) => {
+            console.log("call to context.addlayer");
+            context.map.addLayer(layer);
+        },
+        removeLayer: (layer) => context.map.removeLayer(layer),
+    }
+    setContext('map', context);
+
+    onMount(() => {
+        console.log("call to new Map");
+        context.map = new Map({
+            target: htmlElement,
+            view: new View()
+        });
+        context.map.addInteraction(new DragRotateAndZoom());
+    });
+</script>
+
+<div id="map" bind:this={htmlElement}>
+    {#if htmlElement}
+    <slot/>
+    {/if}
+</div>
+
+<style>
+    #map {
+        width: 100%;
+        height: 100%;
+    }
+</style>

src/components/MapTileLayer.svelte

@@ -0,0 +1,44 @@
+<script>
+    import {getContext, onDestroy, onMount} from "svelte";
+    import TileLayer from "ol/layer/Tile";
+    import OSM from "ol/source/OSM";
+    import {XYZ} from "ol/source";
+
+    let { map, addLayer, removeLayer } = getContext('map');
+
+    export let title = 'layer';
+    export let visible = true;
+    export let opacity = 1;
+    export let type = 'base';
+    export let source = undefined;
+
+    let layer;
+
+    if (!source) {
+        console.log("TileLayer will be OSM()");
+        layer = new TileLayer({
+            title,
+            visible,
+            opacity,
+            type,
+            source: new OSM()
+        })
+    } else {
+        console.log(`TileLayer will be ${typeof source === "string" ? "XYZ" : source}`);
+        layer = new TileLayer({
+            title,
+            visible,
+            opacity,
+            type,
+            source: typeof source === "string" ? new XYZ({ url: source }) : source,
+    });
+    }
+
+    onMount(() => {
+        addLayer(layer);
+    })
+
+    onDestroy(() => {
+        removeLayer(layer);
+    })
+</script>

src/components/MapView.svelte

@@ -0,0 +1,19 @@
+<script>
+    import View from "ol/View";
+    import {getContext, onMount} from "svelte";
+    import {fromLonLat} from "ol/proj";
+
+    export let initialCenterLonLat;
+    export let initialZoom = 3;
+
+    const { map } = getContext('map');
+
+    const view = new View({
+        center: fromLonLat(initialCenterLonLat),
+        zoom: initialZoom
+    });
+
+    onMount(() => {
+        map.setView(view);
+    });
+</script>

src/components/MapboxStyleLayer.svelte

@@ -0,0 +1,29 @@
+<script>
+    import olms from 'ol-mapbox-style';
+    import {getContext} from "svelte";
+    import {MapboxVector} from "ol/layer";
+    import LayerGroup from "ol/layer/Group";
+
+    const {map} = getContext('map');
+
+    export let title = 'Mapbox basemap';
+    export let style = '';
+    let layer;
+    let group;
+
+    if (style) {
+        layer = new MapboxVector({
+            styleUrl: style,
+            accessToken: '',
+        })
+        group = new LayerGroup({
+            title,
+            type: 'base',
+            combine: true,
+            layers: [layer]
+        })
+        map.addLayer(group);
+    } else {
+        console.warn('No Mapbox style to setup.')
+    }
+</script>

src/components/Maplibre.svelte

@@ -0,0 +1,46 @@
+<svelte:head>
+    <link href='https://unpkg.com/maplibre-gl@2.0.1/dist/maplibre-gl.css' rel='stylesheet' />
+</svelte:head>
+
+<script>
+    import maplibregl from 'maplibre-gl';
+    import {onMount, setContext} from "svelte";
+
+    let mapHTMLElement;
+    let map;
+    setContext('map', {
+        getMap: () => map
+    });
+
+    const initMap = (element) => {
+        map = new maplibregl.Map({
+            container: element,
+            style: "https://api.jawg.io/styles/jawg-light.json?access-token=4cKtE4Rze1HrvxWa9a7mdolSk10lVThTFC8zadQYMIMxTjkpTeIDJAAmhReDGnCH",
+            zoom: 5.5,
+            center: [2.700748,46.893575]
+        })
+    }
+
+    onMount(() => {
+        initMap(mapHTMLElement);
+
+        return {
+            destroy() {
+                map.destroy();
+            }
+        };
+    })
+</script>
+
+<div bind:this={mapHTMLElement}>
+    {#if map}
+        <slot />
+    {/if}
+</div>
+
+<style lang="scss">
+  div {
+    height: 100%;
+    width: 100%;
+  }
+</style>

src/components/MaplibreFeaturesEvent.svelte

@@ -0,0 +1,25 @@
+<script>
+    import {createEventDispatcher, getContext, onMount} from "svelte";
+    import {Popup} from "maplibre-gl";
+    import ejs from "ejs";
+
+    let {getMap} = getContext('map');
+    let {layer} = getContext('layer');
+    let map = getMap();
+
+    const dispatcher = createEventDispatcher();
+
+    onMount(() => {
+        map.on('click', layer, function (e) {
+            dispatcher('click', e.features);
+        });
+
+        map.on('mouseenter', layer, function () {
+            map.getCanvas().style.cursor = 'pointer';
+        });
+
+        map.on('mouseleave', layer, function () {
+            map.getCanvas().style.cursor = '';
+        });
+    })
+</script>

src/components/MaplibreGeolocateControl.svelte

@@ -0,0 +1,30 @@
+<script>
+    import {createEventDispatcher, getContext, onMount} from "svelte";
+    import {GeolocateControl} from "maplibre-gl";
+
+    let {getMap} = getContext('map');
+    let map = getMap();
+
+    let geolocate;
+
+    let dispatcher = createEventDispatcher();
+    const watchSuccess = (event) => {
+        console.log('User moved !', event.coords);
+        dispatcher('geolocate', [event.coords.longitude, event.coords.latitude]);
+    }
+
+    onMount(() => {
+        geolocate = new GeolocateControl({
+            positionOptions: {
+                enableHighAccuracy: true
+            },
+            trackUserLocation: true
+        })
+        map.addControl(geolocate);
+        geolocate.on('geolocate', watchSuccess);
+
+        return () => {
+            map.removeControl(geolocate);
+        }
+    })
+</script>