From dda765adb21b712055fdce3ba3bf98aa695ad6c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Passaniti?= <f.passaniti@gmail.com>
Date: Fri, 31 Dec 2021 02:24:51 +0100
Subject: [PATCH 01/11] OpenLayers explo + premiers composants

---
 package-lock.json                  | 558 +++++++++++++++++++++++++++++
 package.json                       |   1 +
 src/components/Map.svelte          |  42 +++
 src/components/MapTileLayer.svelte |  38 ++
 src/components/MapView.svelte      |  19 +
 src/components/Spinner.svelte      | 131 +++++++
 src/config.json                    |   2 +-
 src/pages/index.svelte             |   2 -
 src/pages/map.svelte               | 166 +++++++++
 src/pages/mapcomponents.svelte     | 136 +++++++
 src/utilities/ods.js               |  23 +-
 11 files changed, 1113 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Map.svelte
 create mode 100644 src/components/MapTileLayer.svelte
 create mode 100644 src/components/MapView.svelte
 create mode 100644 src/components/Spinner.svelte
 create mode 100644 src/pages/map.svelte
 create mode 100644 src/pages/mapcomponents.svelte

diff --git a/package-lock.json b/package-lock.json
index 83d8b12..7c820fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
                 "autoprefixer": "^10.2.5",
                 "lodash": "^4.17.21",
                 "npm-run-all": "^4.1.5",
+                "ol": "^6.10.0",
                 "postcss": "^8.2.8",
                 "postcss-import": "^14.0.0",
                 "sass": "^1.43.3",
@@ -122,6 +123,49 @@
                 "node": ">=4"
             }
         },
+        "node_modules/@mapbox/jsonlint-lines-primitives": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+            "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=",
+            "dev": true,
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/@mapbox/mapbox-gl-style-spec": {
+            "version": "13.23.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.23.0.tgz",
+            "integrity": "sha512-zI26XoK0UjGOvOEUUAoKlmFKHrSD8qIMCaoQBsFxNPzGIluryT32Z1m4aq7NtxEsrfE+qc2mPPXQg+iRllqbqA==",
+            "dev": true,
+            "dependencies": {
+                "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+                "@mapbox/point-geometry": "^0.1.0",
+                "@mapbox/unitbezier": "^0.0.0",
+                "csscolorparser": "~1.0.2",
+                "json-stringify-pretty-compact": "^2.0.0",
+                "minimist": "^1.2.5",
+                "rw": "^1.3.3",
+                "sort-object": "^0.3.2"
+            },
+            "bin": {
+                "gl-style-composite": "bin/gl-style-composite",
+                "gl-style-format": "bin/gl-style-format",
+                "gl-style-migrate": "bin/gl-style-migrate",
+                "gl-style-validate": "bin/gl-style-validate"
+            }
+        },
+        "node_modules/@mapbox/point-geometry": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+            "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=",
+            "dev": true
+        },
+        "node_modules/@mapbox/unitbezier": {
+            "version": "0.0.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+            "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=",
+            "dev": true
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -169,6 +213,12 @@
                 "node": ">=10"
             }
         },
+        "node_modules/@petamoriken/float16": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.6.0.tgz",
+            "integrity": "sha512-FTMbOb9BQcfIBLx7uanCXieFEb9iWJpjLkqV5QhXo/YYArBq/4G73txEoh4Nm9jw6Z2+p55KKx7UKo48QjyG5Q==",
+            "dev": true
+        },
         "node_modules/@rollup/pluginutils": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.1.tgz",
@@ -770,6 +820,12 @@
             "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
             "dev": true
         },
+        "node_modules/csscolorparser": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+            "integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs=",
+            "dev": true
+        },
         "node_modules/cssesc": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1214,6 +1270,25 @@
             "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
             "dev": true
         },
+        "node_modules/geotiff": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-1.0.9.tgz",
+            "integrity": "sha512-PY+q1OP8RtQZkx1630pVfC3hEkxFnGW9LwIF/glSzcalyShkrH+W8uM/M4RVY12j4QkDQvRXVKOpU65hq6t0iQ==",
+            "dev": true,
+            "dependencies": {
+                "@petamoriken/float16": "^3.4.7",
+                "lerc": "^3.0.0",
+                "lru-cache": "^6.0.0",
+                "pako": "^2.0.4",
+                "parse-headers": "^2.0.2",
+                "threads": "^1.7.0",
+                "xml-utils": "^1.0.2"
+            },
+            "engines": {
+                "browsers": "defaults",
+                "node": ">=10.19"
+            }
+        },
         "node_modules/get-intrinsic": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
@@ -1407,6 +1482,26 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/ieee754": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+            "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ]
+        },
         "node_modules/immutability-helper": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz",
@@ -1648,6 +1743,18 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/is-observable": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-2.1.0.tgz",
+            "integrity": "sha512-DailKdLb0WU+xX8K5w7VsJhapwHLZ9jjmazqCJq4X12CTgqq73TKnbRcnSLuXYPOoLQgV5IrD7ePiX/h1vnkBw==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/is-potential-custom-element-name": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -1770,6 +1877,12 @@
             "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
             "dev": true
         },
+        "node_modules/json-stringify-pretty-compact": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
+            "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ==",
+            "dev": true
+        },
         "node_modules/jsonfile": {
             "version": "6.1.0",
             "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -1791,6 +1904,12 @@
                 "node": ">=6"
             }
         },
+        "node_modules/lerc": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
+            "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww==",
+            "dev": true
+        },
         "node_modules/levn": {
             "version": "0.3.0",
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -1929,6 +2048,18 @@
                 "node": ">=4"
             }
         },
+        "node_modules/lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dev": true,
+            "dependencies": {
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/magic-string": {
             "version": "0.25.7",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -1938,6 +2069,12 @@
                 "sourcemap-codec": "^1.4.4"
             }
         },
+        "node_modules/mapbox-to-css-font": {
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.0.tgz",
+            "integrity": "sha512-v674D0WtpxCXlA6E+sBlG1QJWdUkz/s9qAD91bJSXBGuBL5lL4tJXpoJEftecphCh2SVQCjWMS2vhylc3AIQTg==",
+            "dev": true
+        },
         "node_modules/memorystream": {
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -2256,6 +2393,39 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/observable-fns": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/observable-fns/-/observable-fns-0.6.1.tgz",
+            "integrity": "sha512-9gRK4+sRWzeN6AOewNBTLXir7Zl/i3GB6Yl26gK4flxz8BXVpD3kt8amREmWNb0mxYOGDotvE5a4N+PtGGKdkg==",
+            "dev": true
+        },
+        "node_modules/ol": {
+            "version": "6.10.0",
+            "resolved": "https://registry.npmjs.org/ol/-/ol-6.10.0.tgz",
+            "integrity": "sha512-XBU0IzeCU50MUOmCoBH5ThimGUt6oiNf8LL3iRVeLckpg7Q/0i4jernuJTpg8OLVzcgxG+ex/0iXf9mgHSzM6Q==",
+            "dev": true,
+            "dependencies": {
+                "geotiff": "^1.0.8",
+                "ol-mapbox-style": "^6.7.0",
+                "pbf": "3.2.1",
+                "rbush": "^3.0.1"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/openlayers"
+            }
+        },
+        "node_modules/ol-mapbox-style": {
+            "version": "6.8.1",
+            "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.8.1.tgz",
+            "integrity": "sha512-HD3FNFzFiBptEwiLIVna7H/WSpv/cN99xMmIErcvqv/r4XLwWS/8VKti8w6moVPV28Fg2QmitXvaG3okedMU7w==",
+            "dev": true,
+            "dependencies": {
+                "@mapbox/mapbox-gl-style-spec": "^13.20.1",
+                "mapbox-to-css-font": "^2.4.0",
+                "webfont-matcher": "^1.1.0"
+            }
+        },
         "node_modules/once": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2282,6 +2452,12 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/pako": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/pako/-/pako-2.0.4.tgz",
+            "integrity": "sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==",
+            "dev": true
+        },
         "node_modules/parent-module": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -2294,6 +2470,12 @@
                 "node": ">=6"
             }
         },
+        "node_modules/parse-headers": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.4.tgz",
+            "integrity": "sha512-psZ9iZoCNFLrgRjZ1d8mn0h9WRqJwFxM9q3x7iUjN/YT2OksthDJ5TiPCu2F38kS4zutqfW+YdVVkBZZx3/1aw==",
+            "dev": true
+        },
         "node_modules/parse-json": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -2358,6 +2540,19 @@
                 "node": ">=4"
             }
         },
+        "node_modules/pbf": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+            "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+            "dev": true,
+            "dependencies": {
+                "ieee754": "^1.1.12",
+                "resolve-protobuf-schema": "^2.1.0"
+            },
+            "bin": {
+                "pbf": "bin/pbf"
+            }
+        },
         "node_modules/picomatch": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
@@ -2525,6 +2720,12 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/protocol-buffers-schema": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+            "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==",
+            "dev": true
+        },
         "node_modules/psl": {
             "version": "1.8.0",
             "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -2596,6 +2797,21 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/quickselect": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+            "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
+            "dev": true
+        },
+        "node_modules/rbush": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+            "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+            "dev": true,
+            "dependencies": {
+                "quickselect": "^2.0.0"
+            }
+        },
         "node_modules/read-cache": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -2675,6 +2891,15 @@
                 "node": ">=4"
             }
         },
+        "node_modules/resolve-protobuf-schema": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+            "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+            "dev": true,
+            "dependencies": {
+                "protocol-buffers-schema": "^3.3.1"
+            }
+        },
         "node_modules/reusify": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -2765,6 +2990,12 @@
                 "queue-microtask": "^1.2.2"
             }
         },
+        "node_modules/rw": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+            "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=",
+            "dev": true
+        },
         "node_modules/safer-buffer": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -2863,6 +3094,37 @@
             "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
             "dev": true
         },
+        "node_modules/sort-asc": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
+            "integrity": "sha1-q3md9h/HPqCVbHnEtTHtHp53J+k=",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/sort-desc": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
+            "integrity": "sha1-GYuMDN6wlcRjNBhh45JdTuNZqe4=",
+            "dev": true,
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/sort-object": {
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
+            "integrity": "sha1-mODRme3kDgfGGoRAPGHWw7KQ+eI=",
+            "dev": true,
+            "dependencies": {
+                "sort-asc": "^0.1.0",
+                "sort-desc": "^0.1.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/source-map": {
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -3166,6 +3428,34 @@
                 "node": ">=10.13.0"
             }
         },
+        "node_modules/threads": {
+            "version": "1.7.0",
+            "resolved": "https://registry.npmjs.org/threads/-/threads-1.7.0.tgz",
+            "integrity": "sha512-Mx5NBSHX3sQYR6iI9VYbgHKBLisyB+xROCBGjjWm1O9wb9vfLxdaGtmT/KCjUqMsSNW6nERzCW3T6H43LqjDZQ==",
+            "dev": true,
+            "dependencies": {
+                "callsites": "^3.1.0",
+                "debug": "^4.2.0",
+                "is-observable": "^2.1.0",
+                "observable-fns": "^0.6.1"
+            },
+            "funding": {
+                "url": "https://github.com/andywer/threads.js?sponsor=1"
+            },
+            "optionalDependencies": {
+                "tiny-worker": ">= 2"
+            }
+        },
+        "node_modules/tiny-worker": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/tiny-worker/-/tiny-worker-2.3.0.tgz",
+            "integrity": "sha512-pJ70wq5EAqTAEl9IkGzA+fN0836rycEuz2Cn6yeZ6FRzlVS5IDOkFHpIoEsksPRQV34GDqXm65+OlnZqUSyK2g==",
+            "dev": true,
+            "optional": true,
+            "dependencies": {
+                "esm": "^3.2.25"
+            }
+        },
         "node_modules/tmp": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -3329,6 +3619,12 @@
                 "node": ">=10"
             }
         },
+        "node_modules/webfont-matcher": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/webfont-matcher/-/webfont-matcher-1.1.0.tgz",
+            "integrity": "sha1-mM6VCXsp4x++czBT4Q5XFkLRxsc=",
+            "dev": true
+        },
         "node_modules/webidl-conversions": {
             "version": "6.1.0",
             "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
@@ -3437,6 +3733,12 @@
             "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
             "dev": true
         },
+        "node_modules/xml-utils": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.0.2.tgz",
+            "integrity": "sha512-rEn0FvKi+YGjv9omf22oAf+0d6Ly/sgJ/CUufU/nOzS7SRLmgwSujrewc03KojXxt+aPaTRpm593TgehtUBMSQ==",
+            "dev": true
+        },
         "node_modules/xmlchars": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
@@ -3452,6 +3754,12 @@
                 "node": ">=0.4"
             }
         },
+        "node_modules/yallist": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+            "dev": true
+        },
         "node_modules/yaml": {
             "version": "1.10.2",
             "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
@@ -3541,6 +3849,40 @@
                 }
             }
         },
+        "@mapbox/jsonlint-lines-primitives": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+            "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=",
+            "dev": true
+        },
+        "@mapbox/mapbox-gl-style-spec": {
+            "version": "13.23.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.23.0.tgz",
+            "integrity": "sha512-zI26XoK0UjGOvOEUUAoKlmFKHrSD8qIMCaoQBsFxNPzGIluryT32Z1m4aq7NtxEsrfE+qc2mPPXQg+iRllqbqA==",
+            "dev": true,
+            "requires": {
+                "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+                "@mapbox/point-geometry": "^0.1.0",
+                "@mapbox/unitbezier": "^0.0.0",
+                "csscolorparser": "~1.0.2",
+                "json-stringify-pretty-compact": "^2.0.0",
+                "minimist": "^1.2.5",
+                "rw": "^1.3.3",
+                "sort-object": "^0.3.2"
+            }
+        },
+        "@mapbox/point-geometry": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+            "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=",
+            "dev": true
+        },
+        "@mapbox/unitbezier": {
+            "version": "0.0.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+            "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=",
+            "dev": true
+        },
         "@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3576,6 +3918,12 @@
                 "immutability-helper": "^3.1.1"
             }
         },
+        "@petamoriken/float16": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.6.0.tgz",
+            "integrity": "sha512-FTMbOb9BQcfIBLx7uanCXieFEb9iWJpjLkqV5QhXo/YYArBq/4G73txEoh4Nm9jw6Z2+p55KKx7UKo48QjyG5Q==",
+            "dev": true
+        },
         "@rollup/pluginutils": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.1.tgz",
@@ -4038,6 +4386,12 @@
             "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
             "dev": true
         },
+        "csscolorparser": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+            "integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs=",
+            "dev": true
+        },
         "cssesc": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4369,6 +4723,21 @@
             "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
             "dev": true
         },
+        "geotiff": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-1.0.9.tgz",
+            "integrity": "sha512-PY+q1OP8RtQZkx1630pVfC3hEkxFnGW9LwIF/glSzcalyShkrH+W8uM/M4RVY12j4QkDQvRXVKOpU65hq6t0iQ==",
+            "dev": true,
+            "requires": {
+                "@petamoriken/float16": "^3.4.7",
+                "lerc": "^3.0.0",
+                "lru-cache": "^6.0.0",
+                "pako": "^2.0.4",
+                "parse-headers": "^2.0.2",
+                "threads": "^1.7.0",
+                "xml-utils": "^1.0.2"
+            }
+        },
         "get-intrinsic": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
@@ -4514,6 +4883,12 @@
                 "safer-buffer": ">= 2.1.2 < 3"
             }
         },
+        "ieee754": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+            "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+            "dev": true
+        },
         "immutability-helper": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz",
@@ -4691,6 +5066,12 @@
                 "has-tostringtag": "^1.0.0"
             }
         },
+        "is-observable": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-observable/-/is-observable-2.1.0.tgz",
+            "integrity": "sha512-DailKdLb0WU+xX8K5w7VsJhapwHLZ9jjmazqCJq4X12CTgqq73TKnbRcnSLuXYPOoLQgV5IrD7ePiX/h1vnkBw==",
+            "dev": true
+        },
         "is-potential-custom-element-name": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -4784,6 +5165,12 @@
             "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
             "dev": true
         },
+        "json-stringify-pretty-compact": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
+            "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ==",
+            "dev": true
+        },
         "jsonfile": {
             "version": "6.1.0",
             "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -4800,6 +5187,12 @@
             "integrity": "sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==",
             "dev": true
         },
+        "lerc": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
+            "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww==",
+            "dev": true
+        },
         "levn": {
             "version": "0.3.0",
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -4915,6 +5308,15 @@
                 }
             }
         },
+        "lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dev": true,
+            "requires": {
+                "yallist": "^4.0.0"
+            }
+        },
         "magic-string": {
             "version": "0.25.7",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -4924,6 +5326,12 @@
                 "sourcemap-codec": "^1.4.4"
             }
         },
+        "mapbox-to-css-font": {
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.0.tgz",
+            "integrity": "sha512-v674D0WtpxCXlA6E+sBlG1QJWdUkz/s9qAD91bJSXBGuBL5lL4tJXpoJEftecphCh2SVQCjWMS2vhylc3AIQTg==",
+            "dev": true
+        },
         "memorystream": {
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -5162,6 +5570,35 @@
                 "object-keys": "^1.1.1"
             }
         },
+        "observable-fns": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/observable-fns/-/observable-fns-0.6.1.tgz",
+            "integrity": "sha512-9gRK4+sRWzeN6AOewNBTLXir7Zl/i3GB6Yl26gK4flxz8BXVpD3kt8amREmWNb0mxYOGDotvE5a4N+PtGGKdkg==",
+            "dev": true
+        },
+        "ol": {
+            "version": "6.10.0",
+            "resolved": "https://registry.npmjs.org/ol/-/ol-6.10.0.tgz",
+            "integrity": "sha512-XBU0IzeCU50MUOmCoBH5ThimGUt6oiNf8LL3iRVeLckpg7Q/0i4jernuJTpg8OLVzcgxG+ex/0iXf9mgHSzM6Q==",
+            "dev": true,
+            "requires": {
+                "geotiff": "^1.0.8",
+                "ol-mapbox-style": "^6.7.0",
+                "pbf": "3.2.1",
+                "rbush": "^3.0.1"
+            }
+        },
+        "ol-mapbox-style": {
+            "version": "6.8.1",
+            "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.8.1.tgz",
+            "integrity": "sha512-HD3FNFzFiBptEwiLIVna7H/WSpv/cN99xMmIErcvqv/r4XLwWS/8VKti8w6moVPV28Fg2QmitXvaG3okedMU7w==",
+            "dev": true,
+            "requires": {
+                "@mapbox/mapbox-gl-style-spec": "^13.20.1",
+                "mapbox-to-css-font": "^2.4.0",
+                "webfont-matcher": "^1.1.0"
+            }
+        },
         "once": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -5185,6 +5622,12 @@
                 "word-wrap": "~1.2.3"
             }
         },
+        "pako": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/pako/-/pako-2.0.4.tgz",
+            "integrity": "sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==",
+            "dev": true
+        },
         "parent-module": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5194,6 +5637,12 @@
                 "callsites": "^3.0.0"
             }
         },
+        "parse-headers": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.4.tgz",
+            "integrity": "sha512-psZ9iZoCNFLrgRjZ1d8mn0h9WRqJwFxM9q3x7iUjN/YT2OksthDJ5TiPCu2F38kS4zutqfW+YdVVkBZZx3/1aw==",
+            "dev": true
+        },
         "parse-json": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -5245,6 +5694,16 @@
                 }
             }
         },
+        "pbf": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+            "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+            "dev": true,
+            "requires": {
+                "ieee754": "^1.1.12",
+                "resolve-protobuf-schema": "^2.1.0"
+            }
+        },
         "picomatch": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
@@ -5343,6 +5802,12 @@
             "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
             "dev": true
         },
+        "protocol-buffers-schema": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+            "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==",
+            "dev": true
+        },
         "psl": {
             "version": "1.8.0",
             "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -5387,6 +5852,21 @@
             "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
             "dev": true
         },
+        "quickselect": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+            "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
+            "dev": true
+        },
+        "rbush": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+            "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+            "dev": true,
+            "requires": {
+                "quickselect": "^2.0.0"
+            }
+        },
         "read-cache": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5456,6 +5936,15 @@
             "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
             "dev": true
         },
+        "resolve-protobuf-schema": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+            "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+            "dev": true,
+            "requires": {
+                "protocol-buffers-schema": "^3.3.1"
+            }
+        },
         "reusify": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -5518,6 +6007,12 @@
                 "queue-microtask": "^1.2.2"
             }
         },
+        "rw": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+            "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=",
+            "dev": true
+        },
         "safer-buffer": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -5597,6 +6092,28 @@
                 }
             }
         },
+        "sort-asc": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
+            "integrity": "sha1-q3md9h/HPqCVbHnEtTHtHp53J+k=",
+            "dev": true
+        },
+        "sort-desc": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
+            "integrity": "sha1-GYuMDN6wlcRjNBhh45JdTuNZqe4=",
+            "dev": true
+        },
+        "sort-object": {
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
+            "integrity": "sha1-mODRme3kDgfGGoRAPGHWw7KQ+eI=",
+            "dev": true,
+            "requires": {
+                "sort-asc": "^0.1.0",
+                "sort-desc": "^0.1.1"
+            }
+        },
         "source-map": {
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -5801,6 +6318,29 @@
                 }
             }
         },
+        "threads": {
+            "version": "1.7.0",
+            "resolved": "https://registry.npmjs.org/threads/-/threads-1.7.0.tgz",
+            "integrity": "sha512-Mx5NBSHX3sQYR6iI9VYbgHKBLisyB+xROCBGjjWm1O9wb9vfLxdaGtmT/KCjUqMsSNW6nERzCW3T6H43LqjDZQ==",
+            "dev": true,
+            "requires": {
+                "callsites": "^3.1.0",
+                "debug": "^4.2.0",
+                "is-observable": "^2.1.0",
+                "observable-fns": "^0.6.1",
+                "tiny-worker": ">= 2"
+            }
+        },
+        "tiny-worker": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/tiny-worker/-/tiny-worker-2.3.0.tgz",
+            "integrity": "sha512-pJ70wq5EAqTAEl9IkGzA+fN0836rycEuz2Cn6yeZ6FRzlVS5IDOkFHpIoEsksPRQV34GDqXm65+OlnZqUSyK2g==",
+            "dev": true,
+            "optional": true,
+            "requires": {
+                "esm": "^3.2.25"
+            }
+        },
         "tmp": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -5930,6 +6470,12 @@
                 "xml-name-validator": "^3.0.0"
             }
         },
+        "webfont-matcher": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/webfont-matcher/-/webfont-matcher-1.1.0.tgz",
+            "integrity": "sha1-mM6VCXsp4x++czBT4Q5XFkLRxsc=",
+            "dev": true
+        },
         "webidl-conversions": {
             "version": "6.1.0",
             "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
@@ -6009,6 +6555,12 @@
             "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
             "dev": true
         },
+        "xml-utils": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.0.2.tgz",
+            "integrity": "sha512-rEn0FvKi+YGjv9omf22oAf+0d6Ly/sgJ/CUufU/nOzS7SRLmgwSujrewc03KojXxt+aPaTRpm593TgehtUBMSQ==",
+            "dev": true
+        },
         "xmlchars": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
@@ -6021,6 +6573,12 @@
             "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
             "dev": true
         },
+        "yallist": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+            "dev": true
+        },
         "yaml": {
             "version": "1.10.2",
             "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
diff --git a/package.json b/package.json
index 52a4ab8..333c8c1 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
         "autoprefixer": "^10.2.5",
         "lodash": "^4.17.21",
         "npm-run-all": "^4.1.5",
+        "ol": "^6.10.0",
         "postcss": "^8.2.8",
         "postcss-import": "^14.0.0",
         "sass": "^1.43.3",
diff --git a/src/components/Map.svelte b/src/components/Map.svelte
new file mode 100644
index 0000000..c15cafc
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/MapTileLayer.svelte b/src/components/MapTileLayer.svelte
new file mode 100644
index 0000000..132aef4
--- /dev/null
+++ b/src/components/MapTileLayer.svelte
@@ -0,0 +1,38 @@
+<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 source = undefined;
+
+    let layer;
+
+    if (!source) {
+        console.log("TileLayer will be OSM()");
+        layer = new TileLayer({
+            source: new OSM()
+        })
+    } else {
+        console.log(`TileLayer will be ${typeof source === "string" ? "XYZ" : source}`);
+        layer = new TileLayer({
+            title,
+            visible,
+            opacity,
+            source: typeof source === "string" ? new XYZ({ url: source }) : source,
+    });
+    }
+
+    onMount(() => {
+        addLayer(layer);
+    })
+
+    onDestroy(() => {
+        removeLayer(layer);
+    })
+</script>
\ No newline at end of file
diff --git a/src/components/MapView.svelte b/src/components/MapView.svelte
new file mode 100644
index 0000000..d7aa00f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Spinner.svelte b/src/components/Spinner.svelte
new file mode 100644
index 0000000..4a8d6e0
--- /dev/null
+++ b/src/components/Spinner.svelte
@@ -0,0 +1,131 @@
+<script>
+    export let spin;
+</script>
+
+<div class="spinner" class:spin />
+
+<style lang="scss" global>
+  @-webkit-keyframes load5 {
+    0%,
+    100% {
+      box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
+    }
+    12.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em #000000,
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
+    }
+    25% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7),
+      2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+    }
+    37.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em #000000,
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+    }
+    50% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7),
+      0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+    }
+    62.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em #000000,
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+    }
+    75% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7),
+      -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+    }
+    87.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em #000000;
+    }
+  }
+  @keyframes load5 {
+    0%,
+    100% {
+      box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
+    }
+    12.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em #000000,
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
+    }
+    25% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7),
+      2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+    }
+    37.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em #000000,
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+    }
+    50% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7),
+      0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+    }
+    62.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em #000000,
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+    }
+    75% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7),
+      -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
+    }
+    87.5% {
+      box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
+      2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
+      0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5),
+      -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em #000000;
+    }
+  }
+
+  .spinner {
+    display: none;
+    font-size: 25px;
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    position: absolute;
+    top: 200px;
+    left: 50%;
+    text-indent: -9999em;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+
+    &.spin {
+      display: inherit;
+      -webkit-animation: load5 1.1s infinite ease;
+      animation: load5 1.1s infinite ease;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/config.json b/src/config.json
index d612bfb..061edc8 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1,7 +1,7 @@
 {
     "domainid": "public",
     "datasetid": "res_equipements_2017",
-    "filters": ["gestiontypeproprietaireprinclib", "equipementtypelib"],
+    "filters": ["deplib", "gestiontypeproprietaireprinclib", "equipementtypelib"],
     "fieldTitle": "insnom",
     "fieldCoordinates": "coordonnees",
     "fieldList": [{
diff --git a/src/pages/index.svelte b/src/pages/index.svelte
index 62e47c6..eb3702b 100644
--- a/src/pages/index.svelte
+++ b/src/pages/index.svelte
@@ -1,12 +1,10 @@
 <script>
-  import { url } from "@roxi/routify";
   import ods from "../utilities/ods";
   import chartUtilities from "../utilities/chartUtilities";
   import { debounce } from "lodash";
   import config from "../config.json";
   import Select from "svelte-select";
   import Searchbar from "../components/Searchbar.svelte";
-  import Grid from "../components/Grid.svelte";
   import Table from "../components/Table.svelte";
   import Kpi from "../components/Kpi.svelte";
   import { onMount } from "svelte";
diff --git a/src/pages/map.svelte b/src/pages/map.svelte
new file mode 100644
index 0000000..1e8558d
--- /dev/null
+++ b/src/pages/map.svelte
@@ -0,0 +1,166 @@
+<script>
+    import ods from "../utilities/ods";
+    import {debounce} from "lodash";
+    import config from "../config.json";
+    import Select from "svelte-select";
+    import Searchbar from "../components/Searchbar.svelte";
+    import {onMount} from "svelte";
+
+    import {Feature, Map, View} from 'ol';
+    import TileLayer from 'ol/layer/Tile';
+    import OSM from 'ol/source/OSM';
+    import "../../node_modules/ol/ol.css";
+    import VectorLayer from "ol/layer/Vector";
+    import VectorSource from "ol/source/Vector";
+    import {GeoJSON} from "ol/format";
+    import Spinner from "../components/Spinner.svelte";
+
+    let loading = false;
+    let errorMsg;
+
+    let search;
+    let categories = {};
+    let activeFilter = {};
+    let category = [];
+
+    let geojsonFeatures = [];
+
+    let map;
+    let mapView;
+    let vectorLayer;
+    let vectorSource;
+
+    const debouncedRefresh = debounce(async () => {
+        geojsonFeatures = [];
+        loading = true;
+        ods.getGeojson(config.domainid, config.datasetid, search, activeFilter, 500)
+            .then((res) => {
+                geojsonFeatures = new GeoJSON().readFeatures(res, {
+                    dataProjection: "EPSG:4326",
+                    featureProjection: "EPSG:3857"
+                });
+                errorMsg = undefined;
+                vectorSource.clear();
+                vectorSource.addFeatures(geojsonFeatures);
+
+                mapView.fit(vectorSource.getExtent(), {duration: 1000});
+            })
+            .catch((err) => {
+                errorMsg = `Pas d'enregistrement (${err.message})`;
+                console.error(err);
+                geojsonFeatures = [];
+            })
+            .finally(() => {
+                loading = false;
+            })
+
+        config.filters.forEach((filter) => {
+            ods.getFilterCategories(
+                config.domainid,
+                config.datasetid,
+                search,
+                filter,
+                activeFilter
+            ).then((rescat) => {
+                category = rescat.records;
+                categories[filter] = category.map((e) => e.record.fields);
+                // console.log(categories[filter]);
+                errorMsg = undefined;
+            })
+                .catch((err) => {
+                    // errorMsg = `Pas d'enregistrement pour le champ ${filter} (${err.message})`;
+                    console.error(`Pas d'enregistrement pour le champ ${filter} (${err.message})`);
+                });
+        });
+    }, 500);
+
+    onMount(() => {
+        vectorSource = new VectorSource({
+            features: geojsonFeatures
+        })
+        vectorLayer = new VectorLayer({
+            source: vectorSource
+        })
+        mapView = new View({
+            center: [0, 0],
+            zoom: 4
+        })
+
+        map = new Map({
+            target: 'map',
+            layers: [
+                new TileLayer({
+                    source: new OSM()
+                }),
+                vectorLayer
+            ],
+            view: mapView
+        });
+
+        debouncedRefresh();
+    });
+</script>
+
+<div class="container mx-auto mt-6">
+    <div class="search-container">
+        <Searchbar on:input={debouncedRefresh} bind:search/>
+
+        <div class="select-buttons">
+            {#each config.filters as filter}
+                <Select
+                        showChevron={true}
+                        placeholder={`Sélectionnez un ${filter}`}
+                        items={categories[filter]}
+                        optionIdentifier={filter}
+                        getOptionLabel={(option) => option[filter]}
+                        getSelectionLabel={(option) => option[filter]}
+                        on:select={function moncallbackrefine(event) {
+                                    if (event.detail) {
+                                      let id = Object.keys(event.detail)[0];
+                                      activeFilter[id] = event.detail[id];
+                                    }
+                                    debouncedRefresh();
+                                  }}
+                        on:clear={function moncallbackdevenement(event) {
+                                    delete activeFilter[filter];
+                                    debouncedRefresh();
+                                  }}/>
+            {/each}
+        </div>
+    </div>
+
+    <div class="map-container">
+        <div id="map"></div>
+        <Spinner spin={loading}></Spinner>
+    </div>
+</div>
+
+<style lang="scss">
+  @import "../styles/variables";
+
+  .search-container {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 40px;
+  }
+
+  .select-buttons {
+    display: flex;
+    gap: 20px;
+
+    :global(.selectContainer) {
+      min-width: 280px;
+    }
+  }
+
+  .map-container {
+    position: relative;
+    height: 500px;
+    width: 100%;
+
+    #map {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
diff --git a/src/pages/mapcomponents.svelte b/src/pages/mapcomponents.svelte
new file mode 100644
index 0000000..ffeb8b0
--- /dev/null
+++ b/src/pages/mapcomponents.svelte
@@ -0,0 +1,136 @@
+<script>
+    import ods from "../utilities/ods";
+    import {debounce} from "lodash";
+    import config from "../config.json";
+    import Select from "svelte-select";
+    import Searchbar from "../components/Searchbar.svelte";
+    import {onMount} from "svelte";
+
+    import {Feature, View} from 'ol';
+    import TileLayer from 'ol/layer/Tile';
+    import OSM from 'ol/source/OSM';
+    import "../../node_modules/ol/ol.css";
+    import VectorLayer from "ol/layer/Vector";
+    import VectorSource from "ol/source/Vector";
+    import {GeoJSON} from "ol/format";
+    import Spinner from "../components/Spinner.svelte";
+    import Map from "../components/Map.svelte";
+    import MapView from "../components/MapView.svelte";
+    import MapTileLayer from "../components/MapTileLayer.svelte";
+
+    let loading = false;
+    let errorMsg;
+
+    let search;
+    let categories = {};
+    let activeFilter = {};
+    let category = [];
+
+    let geojsonFeatures = [];
+
+    const debouncedRefresh = debounce(async () => {
+        geojsonFeatures = [];
+        loading = true;
+        ods.getGeojson(config.domainid, config.datasetid, search, activeFilter, 500)
+            .then((res) => {
+                geojsonFeatures = new GeoJSON().readFeatures(res, {
+                    dataProjection: "EPSG:4326",
+                    featureProjection: "EPSG:3857"
+                });
+                errorMsg = undefined;
+            })
+            .catch((err) => {
+                errorMsg = `Pas d'enregistrement (${err.message})`;
+                console.error(err);
+                geojsonFeatures = [];
+            })
+            .finally(() => {
+                loading = false;
+            })
+
+        config.filters.forEach((filter) => {
+            ods.getFilterCategories(
+                config.domainid,
+                config.datasetid,
+                search,
+                filter,
+                activeFilter
+            ).then((rescat) => {
+                category = rescat.records;
+                categories[filter] = category.map((e) => e.record.fields);
+                // console.log(categories[filter]);
+                errorMsg = undefined;
+            })
+                .catch((err) => {
+                    // errorMsg = `Pas d'enregistrement pour le champ ${filter} (${err.message})`;
+                    console.error(`Pas d'enregistrement pour le champ ${filter} (${err.message})`);
+                });
+        });
+    }, 500);
+
+    onMount(() => {
+        debouncedRefresh();
+    });
+</script>
+
+<div class="container mx-auto mt-6">
+    <div class="search-container">
+        <Searchbar on:input={debouncedRefresh} bind:search/>
+
+        <div class="select-buttons">
+            {#each config.filters as filter}
+                <Select
+                        showChevron={true}
+                        placeholder={`Sélectionnez un ${filter}`}
+                        items={categories[filter]}
+                        optionIdentifier={filter}
+                        getOptionLabel={(option) => option[filter]}
+                        getSelectionLabel={(option) => option[filter]}
+                        on:select={function moncallbackrefine(event) {
+                                    if (event.detail) {
+                                      let id = Object.keys(event.detail)[0];
+                                      activeFilter[id] = event.detail[id];
+                                    }
+                                    debouncedRefresh();
+                                  }}
+                        on:clear={function moncallbackdevenement(event) {
+                                    delete activeFilter[filter];
+                                    debouncedRefresh();
+                                  }}/>
+            {/each}
+        </div>
+    </div>
+
+    <div class="map-container">
+        <Map>
+            <MapView initialCenterLonLat={[2.0, 48.0]} initialZoom="6"></MapView>
+            <MapTileLayer></MapTileLayer>
+        </Map>
+        <Spinner spin={loading}></Spinner>
+    </div>
+</div>
+
+<style lang="scss">
+  @import "../styles/variables";
+
+  .search-container {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 40px;
+  }
+
+  .select-buttons {
+    display: flex;
+    gap: 20px;
+
+    :global(.selectContainer) {
+      min-width: 280px;
+    }
+  }
+
+  .map-container {
+    position: relative;
+    height: 500px;
+    width: 100%;
+  }
+</style>
diff --git a/src/utilities/ods.js b/src/utilities/ods.js
index 40e31ef..0ac6ad4 100644
--- a/src/utilities/ods.js
+++ b/src/utilities/ods.js
@@ -1,4 +1,5 @@
-import { ApiClient, fromCatalog } from '@opendatasoft/api-client';
+import { ApiClient } from '../../../ods-dataviz-sdk/packages/api-client/src/client';
+import { fromCatalog } from '../../../ods-dataviz-sdk/packages/api-client/src/odsql';
 
 const getDatasets = async(domainid) => {
     if (!domainid) return { datasets: [] };
@@ -32,6 +33,24 @@ const getRecords = async(domainid, datasetid, search = "", refine = {}) => {
         });
 };
 
+const getGeojson = async(domainid, datasetid, search = "", refine = {}, limit = 100) => {
+    // refine : { 'fieldid' : 'valeur du refine' }
+    const client = new ApiClient({ domain: domainid });
+    let query = fromCatalog().dataset(datasetid).exports('geojson').limit(limit);
+    let keys = Object.keys(refine);
+    for (let i = 0; i < keys.length; i += 1) {
+        query = query.refine(`${keys[i]}:"${refine[keys[i]]}"`);
+    }
+    if (search) {
+        query = query.where(`"${search}"`)
+    }
+    return client.get(query)
+        .then(res => res)
+        .catch(err => {
+            throw err;
+        });
+};
+
 const getFilterCategories = async(domainid, datasetid, search = "", field, refine = {}) => {
     const client = new ApiClient({ domain: domainid });
     let query = fromCatalog()
@@ -116,4 +135,4 @@ const getNext = async(links) => {
         });
 }
 
-export default { getRecords, getDatasets, getNext, getFilterCategories, getAggregates, getKpis }
\ No newline at end of file
+export default { getRecords, getDatasets, getGeojson, getNext, getFilterCategories, getAggregates, getKpis }
\ No newline at end of file

From 6f669d810a622d0716825f2f29716b566957cdf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Passaniti?= <f.passaniti@gmail.com>
Date: Fri, 31 Dec 2021 02:41:12 +0100
Subject: [PATCH 02/11] it works !

---
 src/components/DataLayer.svelte | 35 +++++++++++++++++++++++++++++++++
 src/pages/mapcomponents.svelte  | 11 ++++-------
 2 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 src/components/DataLayer.svelte

diff --git a/src/components/DataLayer.svelte b/src/components/DataLayer.svelte
new file mode 100644
index 0000000..6af2b90
--- /dev/null
+++ b/src/components/DataLayer.svelte
@@ -0,0 +1,35 @@
+<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({
+        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>
\ No newline at end of file
diff --git a/src/pages/mapcomponents.svelte b/src/pages/mapcomponents.svelte
index ffeb8b0..2ab3fd0 100644
--- a/src/pages/mapcomponents.svelte
+++ b/src/pages/mapcomponents.svelte
@@ -17,6 +17,7 @@
     import Map from "../components/Map.svelte";
     import MapView from "../components/MapView.svelte";
     import MapTileLayer from "../components/MapTileLayer.svelte";
+    import DataLayer from "../components/DataLayer.svelte";
 
     let loading = false;
     let errorMsg;
@@ -26,23 +27,18 @@
     let activeFilter = {};
     let category = [];
 
-    let geojsonFeatures = [];
+    let geojson;
 
     const debouncedRefresh = debounce(async () => {
-        geojsonFeatures = [];
         loading = true;
         ods.getGeojson(config.domainid, config.datasetid, search, activeFilter, 500)
             .then((res) => {
-                geojsonFeatures = new GeoJSON().readFeatures(res, {
-                    dataProjection: "EPSG:4326",
-                    featureProjection: "EPSG:3857"
-                });
+                geojson = res;
                 errorMsg = undefined;
             })
             .catch((err) => {
                 errorMsg = `Pas d'enregistrement (${err.message})`;
                 console.error(err);
-                geojsonFeatures = [];
             })
             .finally(() => {
                 loading = false;
@@ -105,6 +101,7 @@
         <Map>
             <MapView initialCenterLonLat={[2.0, 48.0]} initialZoom="6"></MapView>
             <MapTileLayer></MapTileLayer>
+            <DataLayer data={geojson}></DataLayer>
         </Map>
         <Spinner spin={loading}></Spinner>
     </div>

From 4cc05baa3adf05eb90390db2295f6cb231855b06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Passaniti?= <f.passaniti@gmail.com>
Date: Fri, 31 Dec 2021 18:23:09 +0100
Subject: [PATCH 03/11] map avec clustering, marker cluster, zoom au click,
 patatoid au hover

---
 package-lock.json                   |  11 ++
 package.json                        |   1 +
 src/pages/map.svelte                | 286 ++++++++++++++++++++++++++--
 src/pages/map_cluster_simple.svelte | 249 ++++++++++++++++++++++++
 4 files changed, 531 insertions(+), 16 deletions(-)
 create mode 100644 src/pages/map_cluster_simple.svelte

diff --git a/package-lock.json b/package-lock.json
index 7c820fe..6da4e6d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
             "name": "vite-svelte-routify-starter",
             "dependencies": {
                 "chart.js": "^3.6.1",
+                "monotone-chain-convex-hull": "^1.0.0",
                 "svelte-select": "^4.4.6"
             },
             "devDependencies": {
@@ -2166,6 +2167,11 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/monotone-chain-convex-hull": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/monotone-chain-convex-hull/-/monotone-chain-convex-hull-1.0.0.tgz",
+            "integrity": "sha1-5eOjnzBda8b+cQYvxwcrxWw6VeA="
+        },
         "node_modules/ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -5396,6 +5402,11 @@
             "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
             "dev": true
         },
+        "monotone-chain-convex-hull": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/monotone-chain-convex-hull/-/monotone-chain-convex-hull-1.0.0.tgz",
+            "integrity": "sha1-5eOjnzBda8b+cQYvxwcrxWw6VeA="
+        },
         "ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index 333c8c1..00f24d8 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     },
     "dependencies": {
         "chart.js": "^3.6.1",
+        "monotone-chain-convex-hull": "^1.0.0",
         "svelte-select": "^4.4.6"
     }
 }
diff --git a/src/pages/map.svelte b/src/pages/map.svelte
index 1e8558d..cf5f224 100644
--- a/src/pages/map.svelte
+++ b/src/pages/map.svelte
@@ -1,7 +1,9 @@
 <script>
+    import "../../node_modules/ol/ol.css";
+    import config from "../config.json";
+
     import ods from "../utilities/ods";
     import {debounce} from "lodash";
-    import config from "../config.json";
     import Select from "svelte-select";
     import Searchbar from "../components/Searchbar.svelte";
     import {onMount} from "svelte";
@@ -9,11 +11,17 @@
     import {Feature, Map, View} from 'ol';
     import TileLayer from 'ol/layer/Tile';
     import OSM from 'ol/source/OSM';
-    import "../../node_modules/ol/ol.css";
     import VectorLayer from "ol/layer/Vector";
     import VectorSource from "ol/source/Vector";
     import {GeoJSON} from "ol/format";
     import Spinner from "../components/Spinner.svelte";
+    import {Cluster} from "ol/source";
+    import {Text, Fill, Stroke, Style, Circle} from "ol/style";
+    import CircleStyle from "ol/style/Circle";
+    import {LineString, Point, Polygon} from "ol/geom";
+    import monotoneChainConvexHull from "monotone-chain-convex-hull";
+    import {fromLonLat} from "ol/proj";
+    import {createEmpty, extend, getWidth} from "ol/extent";
 
     let loading = false;
     let errorMsg;
@@ -27,9 +35,184 @@
 
     let map;
     let mapView;
-    let vectorLayer;
     let vectorSource;
 
+    let clusterSource;
+    let clusterCircles;
+    let clusterHulls;
+    let clusters;
+
+    const circleDistanceMultiplier = 1;
+    const circleFootSeparation = 28;
+    const circleStartAngle = Math.PI / 2;
+
+    const convexHullFill = new Fill({
+        color: 'rgba(255, 153, 0, 0.4)',
+    });
+    const convexHullStroke = new Stroke({
+        color: 'rgba(204, 85, 0, 1)',
+        width: 1.5,
+    });
+    const outerCircleFill = new Fill({
+        color: 'rgba(255, 153, 102, 0.3)',
+    });
+    const innerCircleFill = new Fill({
+        color: 'rgba(255, 165, 0, 0.7)',
+    });
+    const textFill = new Fill({
+        color: '#fff',
+    });
+    const textStroke = new Stroke({
+        color: 'rgba(0, 0, 0, 0.6)',
+        width: 3,
+    });
+    const innerCircle = new CircleStyle({
+        radius: 14,
+        fill: innerCircleFill,
+    });
+    const outerCircle = new CircleStyle({
+        radius: 20,
+        fill: outerCircleFill,
+    });
+    const defaultCircleFill = new Fill({
+        color: 'rgba(13, 81, 153, 0.7)',
+    });
+    const defaultCircleStroke = new Stroke({
+        color: 'rgb(13, 81, 153)',
+        width: 2.5,
+    });
+
+    /**
+     * Single feature style, users for clusters with 1 feature and cluster circles.
+     * @param {Feature} clusterMember A feature from a cluster.
+     * @return {Style} An icon style for the cluster member's location.
+     */
+    function clusterMemberStyle(clusterMember) {
+        return new Style({
+            geometry: clusterMember.getGeometry(),
+            image: new Circle({
+                fill: defaultCircleFill,
+                stroke: defaultCircleStroke,
+                radius: 7,
+            }),
+            fill: defaultCircleFill,
+            stroke: defaultCircleStroke,
+        });
+    }
+
+    let clickFeature, clickResolution;
+    /**
+     * Style for clusters with features that are too close to each other, activated on click.
+     * @param {Feature} cluster A cluster with overlapping members.
+     * @param {number} resolution The current view resolution.
+     * @return {Style} A style to render an expanded view of the cluster members.
+     */
+    function clusterCircleStyle(cluster, resolution) {
+        if (cluster !== clickFeature || resolution !== clickResolution) {
+            return;
+        }
+        const clusterMembers = cluster.get('features');
+        const centerCoordinates = cluster.getGeometry().getCoordinates();
+        return generatePointsCircle(
+            clusterMembers.length,
+            cluster.getGeometry().getCoordinates(),
+            resolution
+        ).reduce((styles, coordinates, i) => {
+            const point = new Point(coordinates);
+            const line = new LineString([centerCoordinates, coordinates]);
+            styles.unshift(
+                new Style({
+                    geometry: line,
+                    stroke: convexHullStroke,
+                })
+            );
+            styles.push(
+                clusterMemberStyle(
+                    new Feature({
+                        ...clusterMembers[i].getProperties(),
+                        geometry: point,
+                    })
+                )
+            );
+            return styles;
+        }, []);
+    }
+
+    /**
+     * From
+     * https://github.com/Leaflet/Leaflet.markercluster/blob/31360f2/src/MarkerCluster.Spiderfier.js#L55-L72
+     * Arranges points in a circle around the cluster center, with a line pointing from the center to
+     * each point.
+     * @param {number} count Number of cluster members.
+     * @param {Array<number>} clusterCenter Center coordinate of the cluster.
+     * @param {number} resolution Current view resolution.
+     * @return {Array<Array<number>>} An array of coordinates representing the cluster members.
+     */
+    function generatePointsCircle(count, clusterCenter, resolution) {
+        const circumference =
+            circleDistanceMultiplier * circleFootSeparation * (2 + count);
+        let legLength = circumference / (Math.PI * 2); //radius from circumference
+        const angleStep = (Math.PI * 2) / count;
+        const res = [];
+        let angle;
+
+        legLength = Math.max(legLength, 35) * resolution; // Minimum distance to get outside the cluster icon.
+
+        for (let i = 0; i < count; ++i) {
+            // Clockwise, like spiral.
+            angle = circleStartAngle + i * angleStep;
+            res.push([
+                clusterCenter[0] + legLength * Math.cos(angle),
+                clusterCenter[1] + legLength * Math.sin(angle),
+            ]);
+        }
+
+        return res;
+    }
+
+    let hoverFeature;
+    /**
+     * Style for convex hulls of clusters, activated on hover.
+     * @param {Feature} cluster The cluster feature.
+     * @return {Style} Polygon style for the convex hull of the cluster.
+     */
+    function clusterHullStyle(cluster) {
+        if (cluster !== hoverFeature) {
+            return;
+        }
+        const originalFeatures = cluster.get('features');
+        const points = originalFeatures.map((feature) =>
+            feature.getGeometry().getCoordinates()
+        );
+        return new Style({
+            geometry: new Polygon([monotoneChainConvexHull(points)]),
+            fill: convexHullFill,
+            stroke: convexHullStroke,
+        });
+    }
+
+    function clusterStyle(feature) {
+        const size = feature.get('features').length;
+        if (size > 1) {
+            return [
+                new Style({
+                    image: outerCircle,
+                }),
+                new Style({
+                    image: innerCircle,
+                    text: new Text({
+                        text: size.toString(),
+                        fill: textFill,
+                        stroke: textStroke,
+                    }),
+                }),
+            ];
+        } else {
+            const originalFeature = feature.get('features')[0];
+            return clusterMemberStyle(originalFeature);
+        }
+    }
+
     const debouncedRefresh = debounce(async () => {
         geojsonFeatures = [];
         loading = true;
@@ -40,10 +223,43 @@
                     featureProjection: "EPSG:3857"
                 });
                 errorMsg = undefined;
-                vectorSource.clear();
-                vectorSource.addFeatures(geojsonFeatures);
 
-                mapView.fit(vectorSource.getExtent(), {duration: 1000});
+                if (clusters)
+                    map.removeLayer(clusters);
+                if (clusterHulls)
+                    map.removeLayer(clusterHulls);
+                if (clusterCircles)
+                    map.removeLayer(clusterCircles);
+
+                vectorSource = new VectorSource({
+                    features: geojsonFeatures.filter((feature) => {return feature.getGeometry()})
+                })
+                clusterSource = new Cluster({
+                    distance: 35,
+                    source: vectorSource,
+                });
+
+                // Layer displaying the convex hull of the hovered cluster.
+                clusterHulls = new VectorLayer({
+                    source: clusterSource,
+                    style: clusterHullStyle,
+                });
+
+                // Layer displaying the clusters and individual features.
+                clusters = new VectorLayer({
+                    source: clusterSource,
+                    style: clusterStyle,
+                });
+
+                // Layer displaying the expanded view of overlapping cluster members.
+                clusterCircles = new VectorLayer({
+                    source: clusterSource,
+                    style: clusterCircleStyle,
+                });
+
+                map.addLayer(clusterHulls);
+                map.addLayer(clusters);
+                map.addLayer(clusterCircles);
             })
             .catch((err) => {
                 errorMsg = `Pas d'enregistrement (${err.message})`;
@@ -75,15 +291,10 @@
     }, 500);
 
     onMount(() => {
-        vectorSource = new VectorSource({
-            features: geojsonFeatures
-        })
-        vectorLayer = new VectorLayer({
-            source: vectorSource
-        })
         mapView = new View({
-            center: [0, 0],
-            zoom: 4
+            center: fromLonLat([2.0, 48.0]),
+            zoom: 7,
+            maxZoom: 18
         })
 
         map = new Map({
@@ -91,12 +302,55 @@
             layers: [
                 new TileLayer({
                     source: new OSM()
-                }),
-                vectorLayer
+                })
             ],
             view: mapView
         });
 
+        map.on('pointermove', (event) => {
+            clusters.getFeatures(event.pixel).then((features) => {
+                if (features[0] !== hoverFeature) {
+                    // Display the convex hull on hover.
+                    hoverFeature = features[0];
+                    clusterHulls.setStyle(clusterHullStyle);
+                    // Change the cursor style to indicate that the cluster is clickable.
+                    map.getTargetElement().style.cursor =
+                        hoverFeature && hoverFeature.get('features').length > 1
+                            ? 'pointer'
+                            : '';
+                }
+            });
+        });
+
+        map.on('click', (event) => {
+            clusters.getFeatures(event.pixel).then((features) => {
+                if (features.length > 0) {
+                    const clusterMembers = features[0].get('features');
+                    if (clusterMembers.length > 1) {
+                        // Calculate the extent of the cluster members.
+                        const extent = createEmpty();
+                        clusterMembers.forEach((feature) =>
+                            extend(extent, feature.getGeometry().getExtent())
+                        );
+                        const view = map.getView();
+                        const resolution = map.getView().getResolution();
+                        if (
+                            view.getZoom() === view.getMaxZoom() ||
+                            (getWidth(extent) < resolution && getWidth(extent) < resolution)
+                        ) {
+                            // Show an expanded view of the cluster members.
+                            clickFeature = features[0];
+                            clickResolution = resolution;
+                            clusterCircles.setStyle(clusterCircleStyle);
+                        } else {
+                            // Zoom to the extent of the cluster members.
+                            view.fit(extent, {duration: 500, padding: [50, 50, 50, 50]});
+                        }
+                    }
+                }
+            });
+        });
+
         debouncedRefresh();
     });
 </script>
diff --git a/src/pages/map_cluster_simple.svelte b/src/pages/map_cluster_simple.svelte
new file mode 100644
index 0000000..78a2c44
--- /dev/null
+++ b/src/pages/map_cluster_simple.svelte
@@ -0,0 +1,249 @@
+<script>
+    import ods from "../utilities/ods";
+    import {debounce} from "lodash";
+    import config from "../config.json";
+    import Select from "svelte-select";
+    import Searchbar from "../components/Searchbar.svelte";
+    import {onMount} from "svelte";
+    import {
+        Select as OlSelect,
+        defaults as defaultInteractions,
+    } from 'ol/interaction';
+    import {Feature, Map, View} from 'ol';
+    import TileLayer from 'ol/layer/Tile';
+    import OSM from 'ol/source/OSM';
+    import "../../node_modules/ol/ol.css";
+    import VectorLayer from "ol/layer/Vector";
+    import VectorSource from "ol/source/Vector";
+    import {GeoJSON} from "ol/format";
+    import Spinner from "../components/Spinner.svelte";
+    import {Cluster} from "ol/source";
+    import {Text, Fill, RegularShape, Stroke, Style, Circle} from "ol/style";
+    import CircleStyle from "ol/style/Circle";
+    import {createEmpty, extend, getHeight, getWidth} from "ol/extent";
+
+    let loading = false;
+    let errorMsg;
+
+    let search;
+    let categories = {};
+    let activeFilter = {};
+    let category = [];
+
+    let geojsonFeatures = [];
+
+    let map;
+    let mapView;
+    let vectorLayer;
+    let vectorSource;
+
+    const defaultCircleFill = new Fill({
+        color: 'rgba(13, 81, 153, 0.7)',
+    });
+    const defaultCircleStroke = new Stroke({
+        color: 'rgb(13, 81, 153)',
+        width: 2.5,
+    });
+
+    const textFill = new Fill({
+        color: [255,255,255],
+    });
+    const textStroke = new Stroke({
+        color: [0, 0, 0, 0.6],
+        width: 3,
+    });
+
+    let maxFeatureCount;
+    const calculateClusterInfo = function (resolution) {
+        maxFeatureCount = 0;
+        const features = vectorLayer.getSource().getFeatures();
+        let feature, radius;
+        for (let i = features.length - 1; i >= 0; --i) {
+            feature = features[i];
+            const originalFeatures = feature.get('features');
+            const extent = createEmpty();
+            let j, jj;
+            for (j = 0, jj = originalFeatures.length; j < jj; ++j) {
+                extend(extent, originalFeatures[j].getGeometry().getExtent());
+            }
+            maxFeatureCount = Math.max(maxFeatureCount, jj);
+            radius = (0.25 * (getWidth(extent) + getHeight(extent))) / resolution;
+            feature.set('radius', radius);
+        }
+    };
+
+    let currentResolution;
+    function styleFunction(feature, resolution) {
+        if (resolution != currentResolution) {
+            calculateClusterInfo(resolution);
+            currentResolution = resolution;
+        }
+        let style;
+        const size = feature.get('features').length;
+        if (size > 1) {
+            style = new Style({
+                image: new CircleStyle({
+                    radius: feature.get('radius'),
+                    fill: new Fill({
+                        color: [13, 81, 153, Math.min(0.8, 0.4 + size / maxFeatureCount)],
+                    }),
+                }),
+                text: new Text({
+                    text: size.toString(),
+                    fill: textFill,
+                    stroke: textStroke,
+                }),
+            });
+        } else {
+            style = new Style({
+                image: new Circle({
+                    fill: defaultCircleFill,
+                    stroke: defaultCircleStroke,
+                    radius: 7,
+                }),
+                fill: defaultCircleFill,
+                stroke: defaultCircleStroke,
+            })
+        }
+        return style;
+    }
+
+    const debouncedRefresh = debounce(async () => {
+        geojsonFeatures = [];
+        loading = true;
+        ods.getGeojson(config.domainid, config.datasetid, search, activeFilter, 500)
+            .then((res) => {
+                geojsonFeatures = new GeoJSON().readFeatures(res, {
+                    dataProjection: "EPSG:4326",
+                    featureProjection: "EPSG:3857"
+                });
+                errorMsg = undefined;
+
+                if (vectorLayer)
+                    map.removeLayer(vectorLayer);
+
+                vectorSource = new VectorSource({
+                    features: geojsonFeatures.filter((feature) => {return feature.getGeometry()})
+                })
+                vectorLayer = new VectorLayer({
+                    source: new Cluster({
+                        distance: 40,
+                        source: vectorSource
+                    }),
+                    style: styleFunction
+                })
+                map.addLayer(vectorLayer);
+                // mapView.fit(vectorSource.getExtent(), {duration: 1000});
+            })
+            .catch((err) => {
+                errorMsg = `Pas d'enregistrement (${err.message})`;
+                console.error(err);
+                geojsonFeatures = [];
+            })
+            .finally(() => {
+                loading = false;
+            })
+
+        config.filters.forEach((filter) => {
+            ods.getFilterCategories(
+                config.domainid,
+                config.datasetid,
+                search,
+                filter,
+                activeFilter
+            ).then((rescat) => {
+                category = rescat.records;
+                categories[filter] = category.map((e) => e.record.fields);
+                // console.log(categories[filter]);
+                errorMsg = undefined;
+            })
+                .catch((err) => {
+                    // errorMsg = `Pas d'enregistrement pour le champ ${filter} (${err.message})`;
+                    console.error(`Pas d'enregistrement pour le champ ${filter} (${err.message})`);
+                });
+        });
+    }, 500);
+
+    onMount(() => {
+        mapView = new View({
+            center: [0, 0],
+            zoom: 4
+        })
+
+        map = new Map({
+            target: 'map',
+            layers: [
+                new TileLayer({
+                    source: new OSM()
+                })
+            ],
+            view: mapView
+        });
+
+        debouncedRefresh();
+    });
+</script>
+
+<div class="container mx-auto mt-6">
+    <div class="search-container">
+        <Searchbar on:input={debouncedRefresh} bind:search/>
+
+        <div class="select-buttons">
+            {#each config.filters as filter}
+                <Select
+                        showChevron={true}
+                        placeholder={`Sélectionnez un ${filter}`}
+                        items={categories[filter]}
+                        optionIdentifier={filter}
+                        getOptionLabel={(option) => option[filter]}
+                        getSelectionLabel={(option) => option[filter]}
+                        on:select={function moncallbackrefine(event) {
+                                    if (event.detail) {
+                                      let id = Object.keys(event.detail)[0];
+                                      activeFilter[id] = event.detail[id];
+                                    }
+                                    debouncedRefresh();
+                                  }}
+                        on:clear={function moncallbackdevenement(event) {
+                                    delete activeFilter[filter];
+                                    debouncedRefresh();
+                                  }}/>
+            {/each}
+        </div>
+    </div>
+
+    <div class="map-container">
+        <div id="map"></div>
+        <Spinner spin={loading}></Spinner>
+    </div>
+</div>
+
+<style lang="scss">
+  @import "../styles/variables";
+
+  .search-container {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 40px;
+  }
+
+  .select-buttons {
+    display: flex;
+    gap: 20px;
+
+    :global(.selectContainer) {
+      min-width: 280px;
+    }
+  }
+
+  .map-container {
+    position: relative;
+    height: 500px;
+    width: 100%;
+
+    #map {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>

From f788f01f1fc621457ccdf484a732cba8e47c7be8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Passaniti?= <f.passaniti@gmail.com>
Date: Sun, 9 Jan 2022 02:14:39 +0100
Subject: [PATCH 04/11] =?UTF-8?q?Exp=C3=A9,=20composants=20et=20cartes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                     | 52 +++++++++++++++++++++++
 package.json                          |  1 +
 src/components/OdsFacet.svelte        | 31 ++++++++++++++
 src/components/OdsFacetResults.svelte | 21 +++++++++
 src/components/OdsRecords.svelte      | 19 +++++++++
 src/components/OdsSearchbar.svelte    | 30 +++++++++++++
 src/components/Table.svelte           | 59 --------------------------
 src/pages/querycomponents.svelte      | 61 +++++++++++++++++++++++++++
 src/utilities/ods.js                  | 54 +++++++++++++++++-------
 9 files changed, 253 insertions(+), 75 deletions(-)
 create mode 100644 src/components/OdsFacet.svelte
 create mode 100644 src/components/OdsFacetResults.svelte
 create mode 100644 src/components/OdsRecords.svelte
 create mode 100644 src/components/OdsSearchbar.svelte
 create mode 100644 src/pages/querycomponents.svelte

diff --git a/package-lock.json b/package-lock.json
index 6da4e6d..56ed32d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
                 "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",
@@ -330,6 +331,12 @@
                 "@types/node": "*"
             }
         },
+        "node_modules/@ungap/event-target": {
+            "version": "0.2.3",
+            "resolved": "https://registry.npmjs.org/@ungap/event-target/-/event-target-0.2.3.tgz",
+            "integrity": "sha512-7Bz0qdvxNGV9n0f+xcMKU7wsEfK6PNzo8IdAcOiBgMNyCuU0Mk9dv0Hbd/Kgr+MFFfn4xLHFbuOt820egT5qEA==",
+            "dev": true
+        },
         "node_modules/abab": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@@ -3188,6 +3195,18 @@
             "integrity": "sha512-oie3/+gKf7QtpitB0LYLETe+k8SifzsX4KixvpOsbI6S0kRiRQ5MKOio8eMSAKQ17N06+wdEOXRiId+zOxo0hA==",
             "dev": true
         },
+        "node_modules/sswr": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/sswr/-/sswr-1.3.1.tgz",
+            "integrity": "sha512-xnXgaXyb5F9sXVvlMV2BVFeTHhAYMhhzZlJuOCW31m1kfF/wFw5epwt6Mh6ZKu8pDdTofNNL0ZPByfmQze/2rw==",
+            "dev": true,
+            "dependencies": {
+                "swrev": "^1.9.0"
+            },
+            "peerDependencies": {
+                "svelte": "^3.29.0"
+            }
+        },
         "node_modules/string.prototype.padend": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.2.tgz",
@@ -3351,6 +3370,15 @@
             "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-4.4.6.tgz",
             "integrity": "sha512-AcWNfakmr8dBFH77MSlTskfrYGYP6BRBv/QpPb+59Tag8OQ6/JBXf0r0S0+U18/1JNXtXHJUMaQqRSLfaOtyIA=="
         },
+        "node_modules/swrev": {
+            "version": "1.9.0",
+            "resolved": "https://registry.npmjs.org/swrev/-/swrev-1.9.0.tgz",
+            "integrity": "sha512-sybQb903n1sSnbyO1JqejDanjeb15E1xH9PhzWtnEPtIAsLvN1gLEl2x6gEWBY3MI3o68ktZSWPV0HS7pxkiDQ==",
+            "dev": true,
+            "dependencies": {
+                "@ungap/event-target": "^0.2.2"
+            }
+        },
         "node_modules/symbol-tree": {
             "version": "3.2.4",
             "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -4018,6 +4046,12 @@
                 "@types/node": "*"
             }
         },
+        "@ungap/event-target": {
+            "version": "0.2.3",
+            "resolved": "https://registry.npmjs.org/@ungap/event-target/-/event-target-0.2.3.tgz",
+            "integrity": "sha512-7Bz0qdvxNGV9n0f+xcMKU7wsEfK6PNzo8IdAcOiBgMNyCuU0Mk9dv0Hbd/Kgr+MFFfn4xLHFbuOt820egT5qEA==",
+            "dev": true
+        },
         "abab": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
@@ -6176,6 +6210,15 @@
             "integrity": "sha512-oie3/+gKf7QtpitB0LYLETe+k8SifzsX4KixvpOsbI6S0kRiRQ5MKOio8eMSAKQ17N06+wdEOXRiId+zOxo0hA==",
             "dev": true
         },
+        "sswr": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/sswr/-/sswr-1.3.1.tgz",
+            "integrity": "sha512-xnXgaXyb5F9sXVvlMV2BVFeTHhAYMhhzZlJuOCW31m1kfF/wFw5epwt6Mh6ZKu8pDdTofNNL0ZPByfmQze/2rw==",
+            "dev": true,
+            "requires": {
+                "swrev": "^1.9.0"
+            }
+        },
         "string.prototype.padend": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.2.tgz",
@@ -6261,6 +6304,15 @@
             "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-4.4.6.tgz",
             "integrity": "sha512-AcWNfakmr8dBFH77MSlTskfrYGYP6BRBv/QpPb+59Tag8OQ6/JBXf0r0S0+U18/1JNXtXHJUMaQqRSLfaOtyIA=="
         },
+        "swrev": {
+            "version": "1.9.0",
+            "resolved": "https://registry.npmjs.org/swrev/-/swrev-1.9.0.tgz",
+            "integrity": "sha512-sybQb903n1sSnbyO1JqejDanjeb15E1xH9PhzWtnEPtIAsLvN1gLEl2x6gEWBY3MI3o68ktZSWPV0HS7pxkiDQ==",
+            "dev": true,
+            "requires": {
+                "@ungap/event-target": "^0.2.2"
+            }
+        },
         "symbol-tree": {
             "version": "3.2.4",
             "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 00f24d8..87badcd 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
         "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",
diff --git a/src/components/OdsFacet.svelte b/src/components/OdsFacet.svelte
new file mode 100644
index 0000000..2b24907
--- /dev/null
+++ b/src/components/OdsFacet.svelte
@@ -0,0 +1,31 @@
+<script>
+    import OdsFacetResults from "./OdsFacetResults.svelte";
+    import Select from 'svelte-select';
+
+    export let field;
+    export let placeholder;
+
+    export let search = "";
+    export let refines = {};
+
+    export let facets;
+</script>
+
+<OdsFacetResults field={field} search={search} refines={refines} bind:facets={facets}/>
+<Select showChevron={true}
+        placeholder={placeholder}
+        items={facets[field]}
+        optionIdentifier="name"
+        labelIdentifier="name"
+        on:select={(event) => {
+                            if (event.detail) {
+                              let id = Object.keys(event.detail)[0];
+                              refines[field] = event.detail[id];
+                              refines = refines;
+                            }
+                        }}
+        on:clear={(event) => {
+                            console.log("delete : " + refines[field])
+                            delete refines[field];
+                            refines = refines; // trigger reactivity, not detected by delete operator
+                        }}/>
\ No newline at end of file
diff --git a/src/components/OdsFacetResults.svelte b/src/components/OdsFacetResults.svelte
new file mode 100644
index 0000000..0a7186f
--- /dev/null
+++ b/src/components/OdsFacetResults.svelte
@@ -0,0 +1,21 @@
+<script>
+    import ods from "../utilities/ods";
+    import config from "../config.json";
+
+    export let field = undefined;
+    export let search = "";
+    export let refines = {};
+
+    export let facets;
+    export let errorMsg;
+
+    $: ods.getFacets(config.domainid, config.datasetid, search, field, refines)
+        .then((res) => {
+            facets[field] = res.facets[0]?.facets;
+            errorMsg = undefined;
+        })
+        .catch((err) => {
+            errorMsg = `Pas d'enregistrement (${err.message})`;
+            facets = [];
+        });
+</script>
\ No newline at end of file
diff --git a/src/components/OdsRecords.svelte b/src/components/OdsRecords.svelte
new file mode 100644
index 0000000..b549496
--- /dev/null
+++ b/src/components/OdsRecords.svelte
@@ -0,0 +1,19 @@
+<script>
+    import ods from "../utilities/ods";
+    import config from "../config.json";
+
+    export let search = "";
+    export let refines = {};
+    export let records;
+    export let errorMsg;
+
+    $: ods.getRecords(config.domainid, config.datasetid, search, refines)
+            .then((res) => {
+                records = res.records;
+                errorMsg = undefined;
+            })
+            .catch((err) => {
+                errorMsg = `Pas d'enregistrement (${err.message})`;
+                records = [];
+            });
+</script>
\ No newline at end of file
diff --git a/src/components/OdsSearchbar.svelte b/src/components/OdsSearchbar.svelte
new file mode 100644
index 0000000..3f81ace
--- /dev/null
+++ b/src/components/OdsSearchbar.svelte
@@ -0,0 +1,30 @@
+<script>
+  import {debounce} from "lodash";
+
+  export let search = "";
+  let localsearch = "";
+
+  const debouncedInput = debounce(async () => {
+    console.log(localsearch);
+    search = localsearch;
+  }, 500);
+</script>
+
+<label class="search-box">
+  <input type="text" 
+         placeholder="Recherchez..."
+         bind:value={localsearch}
+         on:input={debouncedInput} />
+</label>
+
+<style lang="scss">
+
+  .search-box {
+    height: 42px;
+    input {
+      height: 42px;
+      border: var(--border, 1px solid #d8dbdf);
+      font-size: var(--inputFontSize, 14px);
+    }
+  }
+</style>
diff --git a/src/components/Table.svelte b/src/components/Table.svelte
index 21db8ce..6d227bc 100644
--- a/src/components/Table.svelte
+++ b/src/components/Table.svelte
@@ -65,63 +65,4 @@
   .table-basic tr td {
     padding: 13px 6px;
   }
-  /* Dropdown */
-  .table-dropdown-container {
-    position: relative;
-    margin-right: 4px;;
-  }
-  .table-dropdown-button {
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    line-height: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: white;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    margin-left: auto;
-  }
-  .table-basic tr:hover .table-dropdown-button {
-    border-color: var(--highlight);
-  }
-  .table-dropdown-button-active {
-    box-shadow: 0 0 0 3px rgba(20, 46, 123, 0.3);
-    border-color: var(--highlight);
-  }
-  .table-dropdown {
-    visibility: hidden;
-    opacity: 0;
-    position: absolute;
-    z-index: 3;
-    top: 0;
-    right: 0;
-    border: 1px solid #FFFFFF;
-    border-radius: 4px;
-    border-color: rgba(222, 229, 239, 1);
-    padding: 13px;
-    white-space: nowrap;
-    background: white;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-    transition: visibility 0s, opacity 0.1s ease, top 0.1s ease;
-  }
-  .table-dropdown-visible {
-    visibility: visible;
-    opacity: 1;
-    top: 38px;
-  }
-  .table-dropdown-item {
-    padding: 2px 6px 2px 0;
-    display: block;
-  }
-  .table-dropdown-backdrop {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    cursor: auto;
-  }
-  
 </style>
diff --git a/src/pages/querycomponents.svelte b/src/pages/querycomponents.svelte
new file mode 100644
index 0000000..9af7cce
--- /dev/null
+++ b/src/pages/querycomponents.svelte
@@ -0,0 +1,61 @@
+<script>
+    import Table from "../components/Table.svelte";
+    import OdsRecords from "../components/OdsRecords.svelte";
+    import config from "../config.json";
+    import OdsSearchbar from "../components/OdsSearchbar.svelte";
+    import OdsFacet from "../components/OdsFacet.svelte";
+
+    let search;
+    let records = [];
+    let facets = {};
+    let refines = {};
+
+</script>
+
+<div class="container mx-auto mt-6">
+    <div class="search-container">
+        <OdsSearchbar bind:search={search}/>
+        <div class="select-buttons">
+            {#each config.filters as filter}
+                <OdsFacet search={search}
+                          field={filter.id}
+                          placeholder={`Sélectionnez un ${filter.title}`}
+                          bind:refines={refines}
+                          bind:facets={facets}/>
+            {/each}
+        </div>
+    </div>
+    <OdsRecords search={search} refines={refines} bind:records/>
+    <Table records={records}/>
+</div>
+
+<style lang="scss">
+  @import "../styles/variables";
+
+  .container {
+    padding: 10px;
+  }
+
+  .search-container {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 40px;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  @media (max-width: 767px) {
+    .search-container, .select-buttons {
+      flex-direction: column;
+    }
+  }
+
+  .select-buttons {
+    display: flex;
+    gap: 20px;
+
+    :global(.selectContainer) {
+      min-width: 280px;
+    }
+  }
+</style>
diff --git a/src/utilities/ods.js b/src/utilities/ods.js
index bd9d41f..3920baa 100644
--- a/src/utilities/ods.js
+++ b/src/utilities/ods.js
@@ -1,9 +1,9 @@
-import { ApiClient } from '../../../ods-dataviz-sdk/packages/api-client/src/client';
-import { fromCatalog } from '../../../ods-dataviz-sdk/packages/api-client/src/odsql';
+import {ApiClient} from '../../../ods-dataviz-sdk/packages/api-client/src/client';
+import {fromCatalog} from '../../../ods-dataviz-sdk/packages/api-client/src/odsql';
 
-const getDatasets = async(domainid) => {
-    if (!domainid) return { datasets: [] };
-    const client = new ApiClient({ domain: domainid });
+const getDatasets = async (domainid) => {
+    if (!domainid) return {datasets: []};
+    const client = new ApiClient({domain: domainid});
     const query = fromCatalog()
         .datasets()
         .limit(10)
@@ -15,9 +15,9 @@ const getDatasets = async(domainid) => {
         });
 };
 
-const getRecords = async(domainid, datasetid, search = "", refine = {}) => {
+const getRecords = async (domainid, datasetid, search = "", refine = {}) => {
     // refine : { 'fieldid' : 'valeur du refine' }
-    const client = new ApiClient({ domain: domainid });
+    const client = new ApiClient({domain: domainid});
     let query = fromCatalog().dataset(datasetid).records().limit(40);
     let keys = Object.keys(refine);
     for (let i = 0; i < keys.length; i += 1) {
@@ -33,9 +33,9 @@ const getRecords = async(domainid, datasetid, search = "", refine = {}) => {
         });
 };
 
-const getGeojson = async(domainid, datasetid, search = "", refine = {}, limit = 100) => {
+const getGeojson = async (domainid, datasetid, search = "", refine = {}, limit = 100) => {
     // refine : { 'fieldid' : 'valeur du refine' }
-    const client = new ApiClient({ domain: domainid });
+    const client = new ApiClient({domain: domainid});
     let query = fromCatalog().dataset(datasetid).exports('geojson').limit(limit);
     let keys = Object.keys(refine);
     for (let i = 0; i < keys.length; i += 1) {
@@ -51,8 +51,8 @@ const getGeojson = async(domainid, datasetid, search = "", refine = {}, limit =
         });
 };
 
-const getFilterCategories = async(domainid, datasetid, search = "", field, refine = {}) => {
-    const client = new ApiClient({ domain: domainid });
+const getFilterCategories = async (domainid, datasetid, search = "", field, refine = {}) => {
+    const client = new ApiClient({domain: domainid});
     let query = fromCatalog()
         .dataset(datasetid)
         .records()
@@ -73,8 +73,30 @@ const getFilterCategories = async(domainid, datasetid, search = "", field, refin
         });
 };
 
-const getAggregates = async(domainid, datasetid, search = "", field, refine = {}, expression) => {
-    const client = new ApiClient({ domain: domainid });
+const getFacets = async (domainid, datasetid, search = "", field, refine = {}) => {
+    const client = new ApiClient({domain: domainid});
+    let query = fromCatalog()
+        .dataset(datasetid)
+        .facets()
+        .facet(field);
+    let keys = Object.keys(refine);
+    for (let i = 0; i < keys.length; i += 1) {
+        if (keys[i] != field) {
+            query = query.refine(`${keys[i]}:"${refine[keys[i]]}"`);
+        }
+    }
+    if (search) {
+        query = query.where(`"${search}"`);
+    }
+    return client.get(query)
+        .then(res => res)
+        .catch(err => {
+            throw err;
+        });
+};
+
+const getAggregates = async (domainid, datasetid, search = "", field, refine = {}, expression) => {
+    const client = new ApiClient({domain: domainid});
     let query = fromCatalog()
         .dataset(datasetid)
         .records()
@@ -90,7 +112,7 @@ const getAggregates = async(domainid, datasetid, search = "", field, refine = {}
     if (field) {
         query = query.groupBy(field);
     }
-    
+
     return client.get(query)
         .then(res => res)
         .catch(err => {
@@ -98,7 +120,7 @@ const getAggregates = async(domainid, datasetid, search = "", field, refine = {}
         });
 };
 
-const getNext = async(links) => {
+const getNext = async (links) => {
     let href;
     links.forEach(element => {
         if (element.rel == 'next')
@@ -112,4 +134,4 @@ const getNext = async(links) => {
         });
 }
 
-export default { getRecords, getGeojson, getDatasets, getNext, getFilterCategories, getAggregates }
\ No newline at end of file
+export default {getRecords, getGeojson, getDatasets, getNext, getFilterCategories, getAggregates, getFacets}
\ No newline at end of file

From 33d244b780896969c2b7a2098a70be2eebd6a7ec Mon Sep 17 00:00:00 2001
From: Manon Dravet <manon.dravet@opendatasoft.com>
Date: Mon, 10 Jan 2022 15:26:49 +0100
Subject: [PATCH 05/11] creation nouvelle page avec composants

---
 package-lock.json          | 14 +++----
 package.json               |  2 +-
 src/pages/mynewpage.svelte | 86 ++++++++++++++++++++++++++++++++++++++
 src/utilities/ods.js       |  4 +-
 4 files changed, 96 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/mynewpage.svelte

diff --git a/package-lock.json b/package-lock.json
index 56ed32d..414af96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
                 "svelte-select": "^4.4.6"
             },
             "devDependencies": {
-                "@opendatasoft/api-client": "^0.2.0",
+                "@opendatasoft/api-client": "^0.3.2",
                 "@roxi/routify": "^2.18.3",
                 "@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
                 "autoprefixer": "^10.2.5",
@@ -204,9 +204,9 @@
             }
         },
         "node_modules/@opendatasoft/api-client": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/@opendatasoft/api-client/-/api-client-0.2.0.tgz",
-            "integrity": "sha512-2875IbCkRI3xk5jyrYLecEeN91//rs+16iLB7KiOhTvs/0kJTQmC9IY5VVVbG63SzUDeSij74ACFziYTqUg9Kg==",
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/@opendatasoft/api-client/-/api-client-0.3.2.tgz",
+            "integrity": "sha512-W3MuTZd9NSJn32zvz/AOBQVObsCTg5iq5MBN/95d3D/dD3Ee/r6o7Xwe26v1iWLVmkIqFzt1s23cZLGSSQt3KA==",
             "dev": true,
             "dependencies": {
                 "immutability-helper": "^3.1.1"
@@ -3944,9 +3944,9 @@
             }
         },
         "@opendatasoft/api-client": {
-            "version": "0.2.0",
-            "resolved": "https://registry.npmjs.org/@opendatasoft/api-client/-/api-client-0.2.0.tgz",
-            "integrity": "sha512-2875IbCkRI3xk5jyrYLecEeN91//rs+16iLB7KiOhTvs/0kJTQmC9IY5VVVbG63SzUDeSij74ACFziYTqUg9Kg==",
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/@opendatasoft/api-client/-/api-client-0.3.2.tgz",
+            "integrity": "sha512-W3MuTZd9NSJn32zvz/AOBQVObsCTg5iq5MBN/95d3D/dD3Ee/r6o7Xwe26v1iWLVmkIqFzt1s23cZLGSSQt3KA==",
             "dev": true,
             "requires": {
                 "immutability-helper": "^3.1.1"
diff --git a/package.json b/package.json
index 87badcd..bb8a4fd 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
         "build:vite": "vite build"
     },
     "devDependencies": {
-        "@opendatasoft/api-client": "^0.2.0",
+        "@opendatasoft/api-client": "^0.3.2",
         "@roxi/routify": "^2.18.3",
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
         "autoprefixer": "^10.2.5",
diff --git a/src/pages/mynewpage.svelte b/src/pages/mynewpage.svelte
new file mode 100644
index 0000000..2a9d165
--- /dev/null
+++ b/src/pages/mynewpage.svelte
@@ -0,0 +1,86 @@
+<script>
+  import Table from "../components/Table.svelte";
+  import OdsRecords from "../components/OdsRecords.svelte";
+  import config from "../config.json";
+  import OdsSearchbar from "../components/OdsSearchbar.svelte";
+  import OdsFacet from "../components/OdsFacet.svelte";
+
+  let search;
+  let records = [];
+  let facets = {};
+  let refines = {};
+</script>
+
+<div class="header">
+  <h1>My new Page title</h1>
+  <p>Here is a description</p>
+</div>
+
+<div class="container mx-auto">
+      <div class="bloc">
+  <OdsRecords {search} {refines} bind:records />
+
+  <Table {records} />
+    <div class="search-tools">
+        <OdsSearchbar bind:search />
+
+        {#each config.filters as filter}
+            <OdsFacet search={search}
+                      field={filter.id}
+                      placeholder={`Sélectionnez un ${filter.title}`}
+                      bind:refines={refines}
+                      bind:facets={facets}/>
+        {/each}
+    </div>
+</div>
+
+</div>
+
+<style lang="scss">
+  body {
+    margin-top: 0px;
+  }
+  .container {
+    padding: 10px;
+  }
+
+  .header {
+    background-color: var(--highlight);
+    min-height: 180px; /* Change the height of the image here by increasing or decreasing the pixels. */
+    /* Properties of the title located within the image banner */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 40px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-image: url("https://images.unsplash.com/photo-1541890289-b86df5bafd81?ixlib=rb-1.2.1&auto=format&fit=crop&w=2828&q=80");
+    color: #fff;
+    h1 {
+      font-size: 40px;
+      font-weight: 700;
+    }
+    p {
+      font-style: italic;
+      font-size: 20px;
+    }
+  }
+
+  .bloc {
+    display: flex;
+    gap: 20px;
+  }
+
+  .search {
+    margin: 10px 0px;
+  }
+
+  .search-tools {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+  }
+</style>
diff --git a/src/utilities/ods.js b/src/utilities/ods.js
index 3920baa..812bc8a 100644
--- a/src/utilities/ods.js
+++ b/src/utilities/ods.js
@@ -1,5 +1,5 @@
-import {ApiClient} from '../../../ods-dataviz-sdk/packages/api-client/src/client';
-import {fromCatalog} from '../../../ods-dataviz-sdk/packages/api-client/src/odsql';
+import {ApiClient} from '@opendatasoft/api-client/src/client';
+import {fromCatalog} from '@opendatasoft/api-client/src/odsql';
 
 const getDatasets = async (domainid) => {
     if (!domainid) return {datasets: []};

From ab96d00af08ce701330402922a074a339e61b59b Mon Sep 17 00:00:00 2001
From: Manon Dravet <manon.dravet@opendatasoft.com>
Date: Mon, 10 Jan 2022 17:40:44 +0100
Subject: [PATCH 06/11] =?UTF-8?q?test=20css=20pass=C3=A9=20dans=20parent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table.svelte      |  3 +-
 src/pages/mynewpage.svelte       | 39 ++++++++++++++-----------
 src/pages/querycomponents.svelte | 50 +++++++++++++++++---------------
 3 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/src/components/Table.svelte b/src/components/Table.svelte
index 6d227bc..d63a78d 100644
--- a/src/components/Table.svelte
+++ b/src/components/Table.svelte
@@ -1,9 +1,10 @@
 <script>
   import config from "../config.json";
   export let records;
+  export let customCSS;
 </script>
 
-<div class="table-module">
+<div class="table-module" {customCSS}>
   <table class="table-basic">
   <thead>
     <tr>
diff --git a/src/pages/mynewpage.svelte b/src/pages/mynewpage.svelte
index 2a9d165..123ecf4 100644
--- a/src/pages/mynewpage.svelte
+++ b/src/pages/mynewpage.svelte
@@ -17,26 +17,32 @@
 </div>
 
 <div class="container mx-auto">
-      <div class="bloc">
-  <OdsRecords {search} {refines} bind:records />
+  <div class="bloc">
+    <OdsRecords {search} {refines} bind:records />
+
+    <Table {records} customCSS="small-table" />
+    <Table {records} />
 
-  <Table {records} />
     <div class="search-tools">
-        <OdsSearchbar bind:search />
+      <OdsSearchbar bind:search />
 
-        {#each config.filters as filter}
-            <OdsFacet search={search}
-                      field={filter.id}
-                      placeholder={`Sélectionnez un ${filter.title}`}
-                      bind:refines={refines}
-                      bind:facets={facets}/>
-        {/each}
+      {#each config.filters as filter}
+        <OdsFacet
+          {search}
+          field={filter.id}
+          placeholder={`Sélectionnez un ${filter.title}`}
+          bind:refines
+          bind:facets />
+      {/each}
     </div>
-</div>
-
+  </div>
 </div>
 
 <style lang="scss">
+  :global([customCSS="small-table"]) {
+    color: green;
+  }
+
   body {
     margin-top: 0px;
   }
@@ -78,9 +84,8 @@
   }
 
   .search-tools {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
   }
 </style>
diff --git a/src/pages/querycomponents.svelte b/src/pages/querycomponents.svelte
index 9af7cce..2f59d98 100644
--- a/src/pages/querycomponents.svelte
+++ b/src/pages/querycomponents.svelte
@@ -1,35 +1,38 @@
 <script>
-    import Table from "../components/Table.svelte";
-    import OdsRecords from "../components/OdsRecords.svelte";
-    import config from "../config.json";
-    import OdsSearchbar from "../components/OdsSearchbar.svelte";
-    import OdsFacet from "../components/OdsFacet.svelte";
+  import Table from "../components/Table.svelte";
+  import OdsRecords from "../components/OdsRecords.svelte";
+  import config from "../config.json";
+  import OdsSearchbar from "../components/OdsSearchbar.svelte";
+  import OdsFacet from "../components/OdsFacet.svelte";
 
-    let search;
-    let records = [];
-    let facets = {};
-    let refines = {};
 
+  let search;
+  let records = [];
+  let facets = {};
+  let refines = {};
 </script>
 
 <div class="container mx-auto mt-6">
-    <div class="search-container">
-        <OdsSearchbar bind:search={search}/>
-        <div class="select-buttons">
-            {#each config.filters as filter}
-                <OdsFacet search={search}
-                          field={filter.id}
-                          placeholder={`Sélectionnez un ${filter.title}`}
-                          bind:refines={refines}
-                          bind:facets={facets}/>
-            {/each}
-        </div>
+  <div class="search-container">
+    <OdsSearchbar bind:search />
+    <div class="select-buttons">
+      {#each config.filters as filter}
+        <OdsFacet
+          {search}
+          field={filter.id}
+          placeholder={`Sélectionnez un ${filter.title}`}
+          bind:refines
+          bind:facets />
+      {/each}
     </div>
-    <OdsRecords search={search} refines={refines} bind:records/>
-    <Table records={records}/>
+  </div>
+  <OdsRecords {search} {refines} bind:records />
+  <Table {records} ref="smalltable" />
+
 </div>
 
 <style lang="scss">
+
   @import "../styles/variables";
 
   .container {
@@ -45,7 +48,8 @@
   }
 
   @media (max-width: 767px) {
-    .search-container, .select-buttons {
+    .search-container,
+    .select-buttons {
       flex-direction: column;
     }
   }

From b34ecfb395e37faef319016049bc6fd6b3ee2367 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Passaniti?= <f.passaniti@gmail.com>
Date: Mon, 10 Jan 2022 21:11:42 +0100
Subject: [PATCH 07/11] de nouveaux composants et essais sur les clusters

---
 package-lock.json                      | 18 ++++++
 package.json                           |  2 +
 src/components/DataLayer.svelte        |  1 +
 src/components/LayerSwitcher.svelte    | 16 +++++
 src/components/MapTileLayer.svelte     |  6 ++
 src/components/MapboxStyleLayer.svelte | 29 +++++++++
 src/components/Overlay.svelte          | 87 ++++++++++++++++++++++++++
 src/global.scss                        | 11 +++-
 src/pages/map.svelte                   | 43 ++++++++++++-
 src/pages/mapcomponents.svelte         | 19 +++++-
 10 files changed, 228 insertions(+), 4 deletions(-)
 create mode 100644 src/components/LayerSwitcher.svelte
 create mode 100644 src/components/MapboxStyleLayer.svelte
 create mode 100644 src/components/Overlay.svelte

diff --git a/package-lock.json b/package-lock.json
index 414af96..9922867 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,8 @@
                 "lodash": "^4.17.21",
                 "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",
@@ -2428,6 +2430,15 @@
                 "url": "https://opencollective.com/openlayers"
             }
         },
+        "node_modules/ol-layerswitcher": {
+            "version": "3.8.3",
+            "resolved": "https://registry.npmjs.org/ol-layerswitcher/-/ol-layerswitcher-3.8.3.tgz",
+            "integrity": "sha512-UwUhalf/sGXjz3rvr0EjwsaUVlJAhyJCfcIPciKk1QdNbMKq/2ZXNKGafOjwP2eDxiqhkvnhpIrDGD8+gQ19Cg==",
+            "dev": true,
+            "peerDependencies": {
+                "ol": ">=5.0.0"
+            }
+        },
         "node_modules/ol-mapbox-style": {
             "version": "6.8.1",
             "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.8.1.tgz",
@@ -5633,6 +5644,13 @@
                 "rbush": "^3.0.1"
             }
         },
+        "ol-layerswitcher": {
+            "version": "3.8.3",
+            "resolved": "https://registry.npmjs.org/ol-layerswitcher/-/ol-layerswitcher-3.8.3.tgz",
+            "integrity": "sha512-UwUhalf/sGXjz3rvr0EjwsaUVlJAhyJCfcIPciKk1QdNbMKq/2ZXNKGafOjwP2eDxiqhkvnhpIrDGD8+gQ19Cg==",
+            "dev": true,
+            "requires": {}
+        },
         "ol-mapbox-style": {
             "version": "6.8.1",
             "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.8.1.tgz",
diff --git a/package.json b/package.json
index bb8a4fd..bdf82a2 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
         "lodash": "^4.17.21",
         "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",
diff --git a/src/components/DataLayer.svelte b/src/components/DataLayer.svelte
index 6af2b90..34971ea 100644
--- a/src/components/DataLayer.svelte
+++ b/src/components/DataLayer.svelte
@@ -13,6 +13,7 @@
         features: vectorFeatures
     })
     let vectorLayer = new VectorLayer({
+        zIndex: 1,
         source: vectorSource
     })
 
diff --git a/src/components/LayerSwitcher.svelte b/src/components/LayerSwitcher.svelte
new file mode 100644
index 0000000..96011e2
--- /dev/null
+++ b/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>
diff --git a/src/components/MapTileLayer.svelte b/src/components/MapTileLayer.svelte
index 132aef4..e0ac338 100644
--- a/src/components/MapTileLayer.svelte
+++ b/src/components/MapTileLayer.svelte
@@ -9,6 +9,7 @@
     export let title = 'layer';
     export let visible = true;
     export let opacity = 1;
+    export let type = 'base';
     export let source = undefined;
 
     let layer;
@@ -16,6 +17,10 @@
     if (!source) {
         console.log("TileLayer will be OSM()");
         layer = new TileLayer({
+            title,
+            visible,
+            opacity,
+            type,
             source: new OSM()
         })
     } else {
@@ -24,6 +29,7 @@
             title,
             visible,
             opacity,
+            type,
             source: typeof source === "string" ? new XYZ({ url: source }) : source,
     });
     }
diff --git a/src/components/MapboxStyleLayer.svelte b/src/components/MapboxStyleLayer.svelte
new file mode 100644
index 0000000..efca757
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Overlay.svelte b/src/components/Overlay.svelte
new file mode 100644
index 0000000..6c030e8
--- /dev/null
+++ b/src/components/Overlay.svelte
@@ -0,0 +1,87 @@
+<script>
+    import {getContext, onMount} from "svelte";
+    import {Overlay} from "ol";
+
+    let overlay;
+    let popupElem;
+    let popupContentElem;
+    let closeBtnElem;
+
+    export let title;
+
+    let {map} = getContext('map');
+
+    onMount(() => {
+        overlay = new Overlay({
+            element: popupElem,
+            offset: [0, -15],
+            positioning: 'bottom-center'
+        });
+        map.addOverlay(overlay);
+
+        map.on('click', (event) => {
+            let features = map.getFeaturesAtPixel(event.pixel);
+            if (features.length > 0) {
+                let ul = document.createElement('ul');
+                features.forEach((feature) => {
+                    let li = document.createElement('li');
+                    li.appendChild(document.createTextNode(feature.get(title)));
+                    ul.appendChild(li);
+                })
+                let wrap = document.createElement('div');
+                wrap.appendChild(ul);
+                popupContentElem.innerHTML = wrap.innerHTML;
+                overlay.setPosition(event.coordinate);
+            }
+        })
+
+        closeBtnElem.onclick = function () {
+            overlay.setPosition(undefined);
+            closeBtnElem.blur();
+        };
+    })
+</script>
+
+<div class="popup" bind:this={popupElem}>
+    <button class="popup-close" bind:this={closeBtnElem}>X</button>
+    <div class="popup-content" bind:this={popupContentElem}>
+        overlay
+    </div>
+</div>
+
+<style lang="scss">
+  .popup {
+    background: white;
+    box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2);
+    padding: 13px;
+    position: relative;
+
+    .popup-close {
+      position: absolute;
+      top: -6px;
+      right: -6px;
+      height: 18px;
+      width: 18px;
+      font-size: 0.7em;
+      padding: 0;
+    }
+
+    :global(ul) {
+      max-height: 200px;
+      overflow: auto;
+    }
+
+    &:after {
+      position: absolute;
+      left: calc(50% - 15px);
+      content: '';
+      height: 15px;
+      width: 15px;
+      display: block;
+      bottom: -15px;
+      border-left: 20px solid transparent;
+      border-right: 20px solid transparent;
+      border-top: 20px solid #fff;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/global.scss b/src/global.scss
index 474420e..05d5028 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -31,4 +31,13 @@ a {
 }
 
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+.ol-control.layer-switcher {
+    bottom: 10px;
+    left: 10px;
+
+    button {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/map.svelte b/src/pages/map.svelte
index 56bd51c..7206c32 100644
--- a/src/pages/map.svelte
+++ b/src/pages/map.svelte
@@ -8,7 +8,7 @@
     import Searchbar from "../components/Searchbar.svelte";
     import {onMount} from "svelte";
 
-    import {Feature, Map, View} from 'ol';
+    import {Feature, Map, Overlay, View} from 'ol';
     import TileLayer from 'ol/layer/Tile';
     import OSM from 'ol/source/OSM';
     import VectorLayer from "ol/layer/Vector";
@@ -42,6 +42,11 @@
     let clusterHulls;
     let clusters;
 
+    let overlay;
+    let tooltip;
+    let tooltipCloseButton;
+    let tooltipContent;
+
     const circleDistanceMultiplier = 1;
     const circleFootSeparation = 28;
     const circleStartAngle = Math.PI / 2;
@@ -82,6 +87,7 @@
         width: 2.5,
     });
 
+
     /**
      * Single feature style, users for clusters with 1 feature and cluster circles.
      * @param {Feature} clusterMember A feature from a cluster.
@@ -294,11 +300,18 @@
         });
     }, 500);
 
+    function setPopup(event, feature) {
+        const clickCoordinates = event.coordinates;
+        tooltipContent.innerHTML = `<h3>${feature.get('insnom')}</h3><br/><p>${feature.get('equnom')}</p>`;
+        overlay.setPosition(clickCoordinates);
+        console.log(tooltip);
+    }
+
     onMount(() => {
         mapView = new View({
             center: fromLonLat([2.0, 48.0]),
             zoom: 7,
-            maxZoom: 18
+            maxZoom: 13
         })
 
         map = new Map({
@@ -353,6 +366,8 @@
                                 // Zoom to the extent of the cluster members.
                                 view.fit(extent, {duration: 500, padding: [50, 50, 50, 50]});
                             }
+                        } else {
+                            setPopup(event, clusterMembers[0])
                         }
                     }
                 });
@@ -360,6 +375,23 @@
         });
 
         debouncedRefresh();
+
+        overlay = new Overlay({
+            element: tooltip,
+            autoPan: {
+                animation: {
+                    duration: 250,
+                },
+            },
+        });
+
+        map.addOverlay(overlay);
+
+        tooltipCloseButton.onclick = function () {
+            overlay.setPosition(undefined);
+            tooltipCloseButton.blur();
+            return false;
+        };
     });
 </script>
 
@@ -395,6 +427,13 @@
         <div id="map"></div>
         <Spinner spin={loading}></Spinner>
     </div>
+
+    <div class="ol-popup" bind:this={tooltip}>
+        <a href="#" class="ol-popup-closer" bind:this={tooltipCloseButton}></a>
+        <div bind:this={tooltipContent}>
+            Overlay content
+        </div>
+    </div>
 </div>
 
 <style lang="scss">
diff --git a/src/pages/mapcomponents.svelte b/src/pages/mapcomponents.svelte
index f19301a..59135c9 100644
--- a/src/pages/mapcomponents.svelte
+++ b/src/pages/mapcomponents.svelte
@@ -18,6 +18,12 @@
     import MapView from "../components/MapView.svelte";
     import MapTileLayer from "../components/MapTileLayer.svelte";
     import DataLayer from "../components/DataLayer.svelte";
+    import LayerSwitcher from "../components/LayerSwitcher.svelte";
+    import MapboxStyleLayer from "../components/MapboxStyleLayer.svelte";
+    import Overlay from "../components/Overlay.svelte";
+
+    const esri_basemap_url = 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}'
+    const jawgstyle = "https://api.jawg.io/styles/jawg-light.json?access-token=4cKtE4Rze1HrvxWa9a7mdolSk10lVThTFC8zadQYMIMxTjkpTeIDJAAmhReDGnCH";
 
     let loading = false;
     let errorMsg;
@@ -99,9 +105,20 @@
 
     <div class="map-container">
         <Map>
+            <!-- View -->
             <MapView initialCenterLonLat={[2.0, 48.0]} initialZoom="6"></MapView>
-            <MapTileLayer></MapTileLayer>
+
+            <!-- Basemaps -->
+            <MapboxStyleLayer title="Jawg light" style={jawgstyle} />
+            <MapTileLayer title="OSM default"></MapTileLayer>
+            <MapTileLayer title="ESRI" source={esri_basemap_url} />
+            <LayerSwitcher />
+
+            <!-- Data -->
             <DataLayer data={geojson}></DataLayer>
+
+            <!-- Popup -->
+            <Overlay title="equnom" />
         </Map>
         <Spinner spin={loading}></Spinner>
     </div>

From 830b9dc78727cb66e14adaa5e80f7dcb25a6bb7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Passaniti?= <f.passaniti@gmail.com>
Date: Fri, 14 Jan 2022 02:09:22 +0100
Subject: [PATCH 08/11] =?UTF-8?q?La=20version=20store=20du=20context=20/?=
 =?UTF-8?q?=20dataset=20sous=20forme=20de=20Classe=20de=20store=20pour=20?=
 =?UTF-8?q?=C3=AAtre=20instanci=C3=A9=20plusieurs=20fois=20pour=20des=20pa?=
 =?UTF-8?q?ges=20multi=20context.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table.svelte  |  2 +-
 src/pages/withcontext.svelte | 59 ++++++++++++++++++++++++++
 src/pages/withstore.svelte   | 23 +++++++++++
 src/stores/datasetContext.js | 29 +++++++++++++
 src/stores/datasetRecords.js | 48 ++++++++++++++++++++++
 src/stores/datasetStore.js   | 80 ++++++++++++++++++++++++++++++++++++
 vite.config.js               |  2 +-
 7 files changed, 241 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/withcontext.svelte
 create mode 100644 src/pages/withstore.svelte
 create mode 100644 src/stores/datasetContext.js
 create mode 100644 src/stores/datasetRecords.js
 create mode 100644 src/stores/datasetStore.js

diff --git a/src/components/Table.svelte b/src/components/Table.svelte
index d63a78d..80d8bc4 100644
--- a/src/components/Table.svelte
+++ b/src/components/Table.svelte
@@ -1,6 +1,6 @@
 <script>
   import config from "../config.json";
-  export let records;
+  export let records = [];
   export let customCSS;
 </script>
 
diff --git a/src/pages/withcontext.svelte b/src/pages/withcontext.svelte
new file mode 100644
index 0000000..ee5f02b
--- /dev/null
+++ b/src/pages/withcontext.svelte
@@ -0,0 +1,59 @@
+<script>
+  import Table from "../components/Table.svelte";
+  import config from "../config.json";
+
+  import {datasetContext} from "../stores/datasetContext";
+  import DatasetRecords from "../stores/datasetRecords";
+
+  let search;
+  let refines = {};
+
+  datasetContext.init(config.domainid, config.datasetid);
+
+  let records = DatasetRecords(datasetContext);
+
+  import DatasetStore from "../stores/datasetStore";
+</script>
+
+<div class="container mx-auto mt-6">
+  <label class="search-box">
+    <input type="text"
+           placeholder="Recherchez..."
+           on:input={(event) => datasetContext.setQuery(event.target.value)} />
+  </label>
+
+  <Table records={$records} ref="smalltable" />
+</div>
+
+<style lang="scss">
+
+  @import "../styles/variables";
+
+  .container {
+    padding: 10px;
+  }
+
+  .search-container {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 40px;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  @media (max-width: 767px) {
+    .search-container,
+    .select-buttons {
+      flex-direction: column;
+    }
+  }
+
+  .select-buttons {
+    display: flex;
+    gap: 20px;
+
+    :global(.selectContainer) {
+      min-width: 280px;
+    }
+  }
+</style>
diff --git a/src/pages/withstore.svelte b/src/pages/withstore.svelte
new file mode 100644
index 0000000..c370ffb
--- /dev/null
+++ b/src/pages/withstore.svelte
@@ -0,0 +1,23 @@
+<script>
+    import Table from "../components/Table.svelte";
+    import config from "../config.json";
+    import Select from "svelte-select";
+    import DatasetStore from "../stores/datasetStore";
+
+    let data = new DatasetStore(config.domainid, config.datasetid);
+    let records = data.getRecordsStore();
+</script>
+
+<div class="container mx-auto mt-6">
+    <label class="search-box">
+        <input type="text"
+               placeholder="Recherchez..."
+               on:input={(event) => data.setQuery(event.target.value)}/>
+    </label>
+
+    <Select showChevron={true}
+            items={['Découvert','Intérieur']}
+            on:select={(event) => { event.detail ? data.refine("naturelibelle", event.detail.value) : ''}}/>
+
+    <Table records={$records} ref="smalltable"/>
+</div>
diff --git a/src/stores/datasetContext.js b/src/stores/datasetContext.js
new file mode 100644
index 0000000..909e8b6
--- /dev/null
+++ b/src/stores/datasetContext.js
@@ -0,0 +1,29 @@
+import {writable} from 'svelte/store';
+
+function createDatasetContext() {
+    const {subscribe, set, update} = writable({});
+
+    const defaultParameters = {
+        limit: 20,
+        offset: 0
+    }
+
+    return {
+        subscribe,
+        init: (domain, dataset, parameters = defaultParameters) => set({
+            'domain': domain,
+            'dataset': dataset,
+            'parameters': parameters
+        }),
+        setQuery: (q) => update(dc => {
+            dc.parameters['q'] = q;
+            return dc;
+        }),
+        refine: (k, v) => update(dc => {
+            dc.parameters['refines'][k] = v;
+            return dc;
+        })
+    };
+}
+
+export const datasetContext = createDatasetContext();
\ No newline at end of file
diff --git a/src/stores/datasetRecords.js b/src/stores/datasetRecords.js
new file mode 100644
index 0000000..2f04549
--- /dev/null
+++ b/src/stores/datasetRecords.js
@@ -0,0 +1,48 @@
+import {derived} from 'svelte/store';
+import {ApiClient} from "@opendatasoft/api-client/src/client/index";
+import {fromCatalog} from "@opendatasoft/api-client/src/odsql/index";
+
+const __getRecords = (datasetContext, set) => {
+    if (datasetContext.domain) {
+        const client = new ApiClient({domain: datasetContext.domain});
+        let query = fromCatalog()
+            .dataset(datasetContext.dataset)
+            .records()
+            .limit(datasetContext.parameters.limit)
+            .offset(datasetContext.parameters.offset);
+        let keys = Object.keys(datasetContext.parameters.refine || {});
+        for (let i = 0; i < keys.length; i += 1) {
+            query = query.refine(`${keys[i]}:"${datasetContext.parameters.refine[keys[i]]}"`);
+        }
+        if (datasetContext.parameters['q']) {
+            query = query.where(`"${datasetContext.parameters['q']}"`)
+        }
+        client.get(query)
+            .then(res => res)
+            .then(res => {
+                console.log(`Set ${res.records.length} records`);
+                set(res.records)
+            })
+            .catch((err) => console.log(err));
+    }
+}
+
+// export const datasetRecords = derived(datasetContext, ($datasetContext, set) => {
+//     let timeoutId = setTimeout(() => {
+//         __getRecords($datasetContext, set);
+//     }, 300);
+//     return () => {
+//         clearTimeout(timeoutId);
+//     }
+// }, []);
+
+export default (datasetContext) => {
+    return derived(datasetContext, ($datasetContext, set) => {
+        let timeoutId = setTimeout(() => {
+            __getRecords($datasetContext, set);
+        }, 300);
+        return () => {
+            clearTimeout(timeoutId);
+        }
+    }, []);
+}
\ No newline at end of file
diff --git a/src/stores/datasetStore.js b/src/stores/datasetStore.js
new file mode 100644
index 0000000..9c3c55e
--- /dev/null
+++ b/src/stores/datasetStore.js
@@ -0,0 +1,80 @@
+import {derived, get, writable} from 'svelte/store';
+import {ApiClient} from "@opendatasoft/api-client/src/client/index";
+import {fromCatalog} from "@opendatasoft/api-client/src/odsql/index";
+
+const defaultParameters = {
+    limit: 20,
+    offset: 0
+}
+
+const __getRecords = (domain, dataset, parameters, set) => {
+    if (domain) {
+        const client = new ApiClient({domain: domain});
+        let query = fromCatalog()
+            .dataset(dataset)
+            .records()
+            .limit(parameters.limit)
+            .offset(parameters.offset);
+        let keys = Object.keys(parameters.refine || {});
+        for (let i = 0; i < keys.length; i += 1) {
+            query = query.refine(`${keys[i]}:"${parameters.refine[keys[i]]}"`);
+        }
+        if (parameters['q']) {
+            query = query.where(`"${parameters['q']}"`)
+        }
+        client.get(query)
+            .then(res => res)
+            .then(res => {
+                console.log(`Set ${res.records.length} records`);
+                set(res.records)
+            })
+            .catch((err) => console.log(err));
+    }
+}
+
+class DatasetStore {
+    constructor(domain, dataset, parameters = {}) {
+        this.domain = writable(domain);
+        this.dataset = writable(dataset);
+        this.parameters = writable(Object.assign({}, defaultParameters, parameters));
+        this.records = [];
+    }
+
+    id = undefined;
+
+    setQuery = (q) => {
+        if (this.id) {
+            clearTimeout(this.id);
+        }
+        this.id = setTimeout(() => {
+            console.log("set query");
+            this.parameters.update(param => {
+                param['q'] = q;
+                return param;
+            })
+            clearTimeout(this.id);
+        }, 500);
+
+    }
+
+    refine = (k, v) => {
+        this.parameters.update(param => {
+            if (!param.hasOwnProperty('refine'))
+                param['refine'] = {};
+            param['refine'][k] = v;
+            return param;
+        })
+    }
+
+    getRecordsStore = () => {
+        return derived([this.domain, this.dataset, this.parameters],
+            ([$domain, $dataset, $parameters], set) => {
+                console.log('call derived', $domain, $dataset, JSON.stringify($parameters));
+                    __getRecords($domain, $dataset, $parameters, set);
+                return () => {
+                }
+            }, []);
+    }
+}
+
+export default DatasetStore;
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 820465f..9acb80e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
 
 export default defineConfig({
     server: {
-        port: 5000,
+        port: 9001,
     },
     
     plugins: [svelte()],

From 457d3b02c98d29484b0d630fecaccdea0bfb687a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Passaniti?= <f.passaniti@gmail.com>
Date: Tue, 18 Jan 2022 23:17:31 +0100
Subject: [PATCH 09/11] Maplibre first components and tests

---
 package-lock.json                        | 324 ++++++++++++++++++++++-
 package.json                             |   4 +-
 src/App.svelte                           |   2 +-
 src/components/Maplibre.svelte           |  46 ++++
 src/components/MaplibreSource.svelte     |  45 ++++
 src/components/MaplibreStyleLayer.svelte |  29 ++
 src/pages/withstore.svelte               |   8 +
 src/pages/withstore_map.svelte           |  47 ++++
 src/stores/datasetStore.js               |  87 +++++-
 src/utilities/mapUtilities.js            |  12 +
 10 files changed, 587 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Maplibre.svelte
 create mode 100644 src/components/MaplibreSource.svelte
 create mode 100644 src/components/MaplibreStyleLayer.svelte
 create mode 100644 src/pages/withstore_map.svelte
 create mode 100644 src/utilities/mapUtilities.js

diff --git a/package-lock.json b/package-lock.json
index 9922867..e9d310c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,11 +11,13 @@
                 "svelte-select": "^4.4.6"
             },
             "devDependencies": {
-                "@opendatasoft/api-client": "^0.3.2",
+                "@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",
                 "lodash": "^4.17.21",
+                "maplibre-gl": "^2.0.1",
                 "npm-run-all": "^4.1.5",
                 "ol": "^6.10.0",
                 "ol-layerswitcher": "^3.8.3",
@@ -127,6 +129,28 @@
                 "node": ">=4"
             }
         },
+        "node_modules/@gouvfr/dsfr": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@gouvfr/dsfr/-/dsfr-1.2.1.tgz",
+            "integrity": "sha512-vnpeX+fZnW2KLl2PrcjHpUhOuO7twT9h3gwZvJLgVl+IosM4/Jesx5QMZAhsLl85Cq57mKhSjTnw8EZglLanUg==",
+            "dev": true,
+            "engines": {
+                "node": ">=14.18.0"
+            }
+        },
+        "node_modules/@mapbox/geojson-rewind": {
+            "version": "0.5.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.1.tgz",
+            "integrity": "sha512-eL7fMmfTBKjrb+VFHXCGv9Ot0zc3C0U+CwXo1IrP+EPwDczLoXv34Tgq3y+2mPSFNVUXgU42ILWJTC7145KPTA==",
+            "dev": true,
+            "dependencies": {
+                "get-stream": "^6.0.1",
+                "minimist": "^1.2.5"
+            },
+            "bin": {
+                "geojson-rewind": "geojson-rewind"
+            }
+        },
         "node_modules/@mapbox/jsonlint-lines-primitives": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
@@ -158,18 +182,48 @@
                 "gl-style-validate": "bin/gl-style-validate"
             }
         },
+        "node_modules/@mapbox/mapbox-gl-supported": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
+            "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ==",
+            "dev": true
+        },
         "node_modules/@mapbox/point-geometry": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
             "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=",
             "dev": true
         },
+        "node_modules/@mapbox/tiny-sdf": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.4.tgz",
+            "integrity": "sha512-CBtL2rhZiYmdIryksp0zh4Mmx54iClYfNb0mpYeHrZnq4z84lVjre7LBWGPEjWspEn6AiF0lxC1HaZDye89m3g==",
+            "dev": true
+        },
         "node_modules/@mapbox/unitbezier": {
             "version": "0.0.0",
             "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
             "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=",
             "dev": true
         },
+        "node_modules/@mapbox/vector-tile": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+            "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+            "dev": true,
+            "dependencies": {
+                "@mapbox/point-geometry": "~0.1.0"
+            }
+        },
+        "node_modules/@mapbox/whoots-js": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+            "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+            "dev": true,
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1010,6 +1064,12 @@
                 "node": ">=10"
             }
         },
+        "node_modules/earcut": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
+            "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug==",
+            "dev": true
+        },
         "node_modules/electron-to-chromium": {
             "version": "1.3.827",
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.827.tgz",
@@ -1280,6 +1340,12 @@
             "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
             "dev": true
         },
+        "node_modules/geojson-vt": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+            "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==",
+            "dev": true
+        },
         "node_modules/geotiff": {
             "version": "1.0.9",
             "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-1.0.9.tgz",
@@ -1313,6 +1379,24 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/get-stream": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+            "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/gl-matrix": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+            "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==",
+            "dev": true
+        },
         "node_modules/glob": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -1351,6 +1435,12 @@
             "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
             "dev": true
         },
+        "node_modules/grid-index": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+            "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==",
+            "dev": true
+        },
         "node_modules/has": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -1905,6 +1995,12 @@
                 "graceful-fs": "^4.1.6"
             }
         },
+        "node_modules/kdbush": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
+            "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==",
+            "dev": true
+        },
         "node_modules/kleur": {
             "version": "4.1.4",
             "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz",
@@ -2085,6 +2181,42 @@
             "integrity": "sha512-v674D0WtpxCXlA6E+sBlG1QJWdUkz/s9qAD91bJSXBGuBL5lL4tJXpoJEftecphCh2SVQCjWMS2vhylc3AIQTg==",
             "dev": true
         },
+        "node_modules/maplibre-gl": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.0.1.tgz",
+            "integrity": "sha512-IWfykU9K9JPUqG15WqarRSuAb2nxvZZPezaxg2pLOJ1XAXJzR4lykZrBkyUi2Y1avd8ehJs8rkZJgneqnrWWXg==",
+            "dev": true,
+            "dependencies": {
+                "@mapbox/geojson-rewind": "^0.5.0",
+                "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+                "@mapbox/mapbox-gl-supported": "^2.0.1",
+                "@mapbox/tiny-sdf": "^2.0.4",
+                "@mapbox/unitbezier": "^0.0.1",
+                "@mapbox/vector-tile": "^1.3.1",
+                "@mapbox/whoots-js": "^3.1.0",
+                "csscolorparser": "~1.0.3",
+                "earcut": "^2.2.2",
+                "geojson-vt": "^3.2.1",
+                "gl-matrix": "^3.2.1",
+                "grid-index": "^1.1.0",
+                "murmurhash-js": "^1.0.0",
+                "pbf": "^3.2.1",
+                "potpack": "^1.0.1",
+                "quickselect": "^2.0.0",
+                "supercluster": "^7.1.0",
+                "tinyqueue": "^2.0.3",
+                "vt-pbf": "^3.1.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/maplibre-gl/node_modules/@mapbox/unitbezier": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+            "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
+            "dev": true
+        },
         "node_modules/memorystream": {
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -2187,6 +2319,12 @@
             "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
             "dev": true
         },
+        "node_modules/murmurhash-js": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+            "integrity": "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E=",
+            "dev": true
+        },
         "node_modules/nanoid": {
             "version": "3.1.25",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
@@ -2726,6 +2864,12 @@
             "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
             "dev": true
         },
+        "node_modules/potpack": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+            "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+            "dev": true
+        },
         "node_modules/prelude-ls": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -3282,6 +3426,15 @@
                 "node": ">=8"
             }
         },
+        "node_modules/supercluster": {
+            "version": "7.1.4",
+            "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.4.tgz",
+            "integrity": "sha512-GhKkRM1jMR6WUwGPw05fs66pOFWhf59lXq+Q3J3SxPvhNcmgOtLRV6aVQPMRsmXdpaeFJGivt+t7QXUPL3ff4g==",
+            "dev": true,
+            "dependencies": {
+                "kdbush": "^3.0.0"
+            }
+        },
         "node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3501,6 +3654,12 @@
                 "esm": "^3.2.25"
             }
         },
+        "node_modules/tinyqueue": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+            "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==",
+            "dev": true
+        },
         "node_modules/tmp": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -3643,6 +3802,17 @@
                 "fsevents": "~2.3.2"
             }
         },
+        "node_modules/vt-pbf": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+            "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+            "dev": true,
+            "dependencies": {
+                "@mapbox/point-geometry": "0.1.0",
+                "@mapbox/vector-tile": "^1.3.1",
+                "pbf": "^3.2.1"
+            }
+        },
         "node_modules/w3c-hr-time": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -3894,6 +4064,22 @@
                 }
             }
         },
+        "@gouvfr/dsfr": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/@gouvfr/dsfr/-/dsfr-1.2.1.tgz",
+            "integrity": "sha512-vnpeX+fZnW2KLl2PrcjHpUhOuO7twT9h3gwZvJLgVl+IosM4/Jesx5QMZAhsLl85Cq57mKhSjTnw8EZglLanUg==",
+            "dev": true
+        },
+        "@mapbox/geojson-rewind": {
+            "version": "0.5.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.1.tgz",
+            "integrity": "sha512-eL7fMmfTBKjrb+VFHXCGv9Ot0zc3C0U+CwXo1IrP+EPwDczLoXv34Tgq3y+2mPSFNVUXgU42ILWJTC7145KPTA==",
+            "dev": true,
+            "requires": {
+                "get-stream": "^6.0.1",
+                "minimist": "^1.2.5"
+            }
+        },
         "@mapbox/jsonlint-lines-primitives": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
@@ -3916,18 +4102,45 @@
                 "sort-object": "^0.3.2"
             }
         },
+        "@mapbox/mapbox-gl-supported": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
+            "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ==",
+            "dev": true
+        },
         "@mapbox/point-geometry": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
             "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=",
             "dev": true
         },
+        "@mapbox/tiny-sdf": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.4.tgz",
+            "integrity": "sha512-CBtL2rhZiYmdIryksp0zh4Mmx54iClYfNb0mpYeHrZnq4z84lVjre7LBWGPEjWspEn6AiF0lxC1HaZDye89m3g==",
+            "dev": true
+        },
         "@mapbox/unitbezier": {
             "version": "0.0.0",
             "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
             "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=",
             "dev": true
         },
+        "@mapbox/vector-tile": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+            "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+            "dev": true,
+            "requires": {
+                "@mapbox/point-geometry": "~0.1.0"
+            }
+        },
+        "@mapbox/whoots-js": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+            "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+            "dev": true
+        },
         "@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4577,6 +4790,12 @@
             "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
             "dev": true
         },
+        "earcut": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
+            "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug==",
+            "dev": true
+        },
         "electron-to-chromium": {
             "version": "1.3.827",
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.827.tgz",
@@ -4774,6 +4993,12 @@
             "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
             "dev": true
         },
+        "geojson-vt": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+            "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==",
+            "dev": true
+        },
         "geotiff": {
             "version": "1.0.9",
             "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-1.0.9.tgz",
@@ -4800,6 +5025,18 @@
                 "has-symbols": "^1.0.1"
             }
         },
+        "get-stream": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+            "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+            "dev": true
+        },
+        "gl-matrix": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+            "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==",
+            "dev": true
+        },
         "glob": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -4829,6 +5066,12 @@
             "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
             "dev": true
         },
+        "grid-index": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+            "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==",
+            "dev": true
+        },
         "has": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -5232,6 +5475,12 @@
                 "universalify": "^2.0.0"
             }
         },
+        "kdbush": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
+            "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==",
+            "dev": true
+        },
         "kleur": {
             "version": "4.1.4",
             "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz",
@@ -5383,6 +5632,41 @@
             "integrity": "sha512-v674D0WtpxCXlA6E+sBlG1QJWdUkz/s9qAD91bJSXBGuBL5lL4tJXpoJEftecphCh2SVQCjWMS2vhylc3AIQTg==",
             "dev": true
         },
+        "maplibre-gl": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.0.1.tgz",
+            "integrity": "sha512-IWfykU9K9JPUqG15WqarRSuAb2nxvZZPezaxg2pLOJ1XAXJzR4lykZrBkyUi2Y1avd8ehJs8rkZJgneqnrWWXg==",
+            "dev": true,
+            "requires": {
+                "@mapbox/geojson-rewind": "^0.5.0",
+                "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+                "@mapbox/mapbox-gl-supported": "^2.0.1",
+                "@mapbox/tiny-sdf": "^2.0.4",
+                "@mapbox/unitbezier": "^0.0.1",
+                "@mapbox/vector-tile": "^1.3.1",
+                "@mapbox/whoots-js": "^3.1.0",
+                "csscolorparser": "~1.0.3",
+                "earcut": "^2.2.2",
+                "geojson-vt": "^3.2.1",
+                "gl-matrix": "^3.2.1",
+                "grid-index": "^1.1.0",
+                "murmurhash-js": "^1.0.0",
+                "pbf": "^3.2.1",
+                "potpack": "^1.0.1",
+                "quickselect": "^2.0.0",
+                "supercluster": "^7.1.0",
+                "tinyqueue": "^2.0.3",
+                "vt-pbf": "^3.1.1"
+            },
+            "dependencies": {
+                "@mapbox/unitbezier": {
+                    "version": "0.0.1",
+                    "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+                    "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==",
+                    "dev": true
+                }
+            }
+        },
         "memorystream": {
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -5458,6 +5742,12 @@
             "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
             "dev": true
         },
+        "murmurhash-js": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+            "integrity": "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E=",
+            "dev": true
+        },
         "nanoid": {
             "version": "3.1.25",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
@@ -5853,6 +6143,12 @@
             "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
             "dev": true
         },
+        "potpack": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+            "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+            "dev": true
+        },
         "prelude-ls": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -6283,6 +6579,15 @@
                 "min-indent": "^1.0.0"
             }
         },
+        "supercluster": {
+            "version": "7.1.4",
+            "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.4.tgz",
+            "integrity": "sha512-GhKkRM1jMR6WUwGPw05fs66pOFWhf59lXq+Q3J3SxPvhNcmgOtLRV6aVQPMRsmXdpaeFJGivt+t7QXUPL3ff4g==",
+            "dev": true,
+            "requires": {
+                "kdbush": "^3.0.0"
+            }
+        },
         "supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6422,6 +6727,12 @@
                 "esm": "^3.2.25"
             }
         },
+        "tinyqueue": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+            "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==",
+            "dev": true
+        },
         "tmp": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -6533,6 +6844,17 @@
                 "rollup": "^2.38.5"
             }
         },
+        "vt-pbf": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+            "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+            "dev": true,
+            "requires": {
+                "@mapbox/point-geometry": "0.1.0",
+                "@mapbox/vector-tile": "^1.3.1",
+                "pbf": "^3.2.1"
+            }
+        },
         "w3c-hr-time": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
diff --git a/package.json b/package.json
index bdf82a2..6035320 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,13 @@
         "build:vite": "vite build"
     },
     "devDependencies": {
-        "@opendatasoft/api-client": "^0.3.2",
+        "@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",
         "lodash": "^4.17.21",
+        "maplibre-gl": "^2.0.1",
         "npm-run-all": "^4.1.5",
         "ol": "^6.10.0",
         "ol-layerswitcher": "^3.8.3",
diff --git a/src/App.svelte b/src/App.svelte
index 7f7313b..ed88e91 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,4 +3,4 @@
   import { routes } from "../.routify/routes";
 </script>
 
-<Router {routes} />
\ No newline at end of file
+<Router {routes} />
diff --git a/src/components/Maplibre.svelte b/src/components/Maplibre.svelte
new file mode 100644
index 0000000..83146e5
--- /dev/null
+++ b/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]
+        })
+
+        return {
+            destroy() {
+                map.destroy();
+            }
+        };
+    }
+
+    onMount(() => {
+        initMap(mapHTMLElement);
+    })
+</script>
+
+<div bind:this={mapHTMLElement}>
+    {#if map}
+        <slot />
+    {/if}
+</div>
+
+<style lang="scss">
+  div {
+    height: 100%;
+    width: 100%;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/MaplibreSource.svelte b/src/components/MaplibreSource.svelte
new file mode 100644
index 0000000..dec4689
--- /dev/null
+++ b/src/components/MaplibreSource.svelte
@@ -0,0 +1,45 @@
+<script>
+    import {getContext, onMount, setContext} from "svelte";
+    import mapUtilities from "../utilities/mapUtilities";
+
+    export let name;
+    export let data;
+
+    const { getMap } = getContext('map');
+    setContext('source', { source: name});
+
+    let map;
+    let sourceReady = false;
+
+    onMount(() => {
+        map = getMap();
+        map.on('load', () => {
+            map.addSource(name, {
+                type: 'geojson',
+                data: {
+                    type: 'FeatureCollection',
+                    features: [],
+                }
+            })
+            sourceReady = true;
+        })
+
+        return () => {
+            const { layers } = map.getStyle();
+            layers.forEach((layer) => map.removeLayer(layer.id));
+            if (map.getSource(name)) {
+                map.removeSource(name);
+            }
+            sourceReady = false;
+        };
+    })
+
+    $: if (data && data.features && sourceReady) {
+        map.getSource(name).setData(data);
+        mapUtilities.fitMapBoundsToGeojsonFeaturesPoint(map, data);
+    }
+</script>
+
+{#if sourceReady}
+    <slot />
+{/if}
\ No newline at end of file
diff --git a/src/components/MaplibreStyleLayer.svelte b/src/components/MaplibreStyleLayer.svelte
new file mode 100644
index 0000000..0cb2d8c
--- /dev/null
+++ b/src/components/MaplibreStyleLayer.svelte
@@ -0,0 +1,29 @@
+<script>
+    import {getContext, onMount} from "svelte";
+
+    export let name;
+    const { getMap } = getContext('map');
+    let { source } = getContext('source');
+    let map;
+
+    onMount(() => {
+        map = getMap();
+        map.addLayer({
+            id: name,
+            type: 'circle',
+            source: source,
+            paint: {
+                'circle-color': '#11b4da',
+                'circle-radius': 6,
+                'circle-stroke-width': 2,
+                'circle-stroke-color': '#000000'
+            }
+        });
+
+        return () => {
+            if (map.getLayer(name)) {
+                map.removeLayer(name);
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/src/pages/withstore.svelte b/src/pages/withstore.svelte
index c370ffb..8a706f9 100644
--- a/src/pages/withstore.svelte
+++ b/src/pages/withstore.svelte
@@ -6,6 +6,7 @@
 
     let data = new DatasetStore(config.domainid, config.datasetid);
     let records = data.getRecordsStore();
+    let naturelibelles = data.getFacetStore("naturelibelle");
 </script>
 
 <div class="container mx-auto mt-6">
@@ -18,6 +19,13 @@
     <Select showChevron={true}
             items={['Découvert','Intérieur']}
             on:select={(event) => { event.detail ? data.refine("naturelibelle", event.detail.value) : ''}}/>
+    <Select showChevron={true}
+            placeholder={"Nature libellé"}
+            items={$naturelibelles}
+            optionIdentifier="name"
+            labelIdentifier="name"
+            on:select={(event) => { event.detail ? data.refine("naturelibelle", event.detail.value) : ''}}
+            on:clear={(event) => { data.unrefine("naturelibelle")}}/>
 
     <Table records={$records} ref="smalltable"/>
 </div>
diff --git a/src/pages/withstore_map.svelte b/src/pages/withstore_map.svelte
new file mode 100644
index 0000000..4a00fa9
--- /dev/null
+++ b/src/pages/withstore_map.svelte
@@ -0,0 +1,47 @@
+<script>
+    import Table from "../components/Table.svelte";
+    import config from "../config.json";
+    import Select from "svelte-select";
+    import DatasetStore from "../stores/datasetStore";
+    import Maplibre from "../components/Maplibre.svelte";
+    import MaplibreSource from "../components/MaplibreSource.svelte";
+    import MaplibreStyleLayer from "../components/MaplibreStyleLayer.svelte";
+
+    let data = new DatasetStore("fpassaniti", "idf-golf");
+    let records = data.getRecordsStore();
+    let naturelibelles = data.getFacetStore("utilisateurs");
+    let geojson = data.getGeojsonExport();
+</script>
+
+<div class="container mx-auto mt-6">
+    <label class="search-box">
+        <input type="text"
+               placeholder="Recherchez..."
+               on:input={(event) => data.setQuery(event.target.value)}/>
+    </label>
+
+    <Select showChevron={true}
+            placeholder={"Nature libellé"}
+            items={$naturelibelles}
+            optionIdentifier="name"
+            labelIdentifier="name"
+            on:select={(event) => { event.detail ? data.refine("utilisateurs", event.detail.value) : ''}}
+            on:clear={(event) => { data.unrefine("utilisateurs")}}/>
+
+    <div class="map-container">
+        <Maplibre>
+            <MaplibreSource name="data" data={$geojson}>
+                <MaplibreStyleLayer name="datastyle"></MaplibreStyleLayer>
+            </MaplibreSource>
+        </Maplibre>
+    </div>
+</div>
+
+<style lang="scss">
+    .map-container {
+      display: block;
+      width: 600px;
+      height: 400px;
+      background: grey;
+    }
+</style>
diff --git a/src/stores/datasetStore.js b/src/stores/datasetStore.js
index 9c3c55e..4252f46 100644
--- a/src/stores/datasetStore.js
+++ b/src/stores/datasetStore.js
@@ -7,6 +7,19 @@ const defaultParameters = {
     offset: 0
 }
 
+const __addRefinesAndQuery = (query, parameters, fieldid = '') => {
+    let newQuery = query;
+    let keys = Object.keys(parameters.refine || {});
+    for (let i = 0; i < keys.length; i += 1) {
+        if (keys[i] !== fieldid)
+            newQuery = newQuery.refine(`${keys[i]}:"${parameters.refine[keys[i]]}"`);
+    }
+    if (parameters['q']) {
+        newQuery = newQuery.where(`"${parameters['q']}"`)
+    }
+    return newQuery;
+}
+
 const __getRecords = (domain, dataset, parameters, set) => {
     if (domain) {
         const client = new ApiClient({domain: domain});
@@ -15,29 +28,55 @@ const __getRecords = (domain, dataset, parameters, set) => {
             .records()
             .limit(parameters.limit)
             .offset(parameters.offset);
-        let keys = Object.keys(parameters.refine || {});
-        for (let i = 0; i < keys.length; i += 1) {
-            query = query.refine(`${keys[i]}:"${parameters.refine[keys[i]]}"`);
-        }
-        if (parameters['q']) {
-            query = query.where(`"${parameters['q']}"`)
-        }
+        query = __addRefinesAndQuery(query, parameters);
         client.get(query)
             .then(res => res)
             .then(res => {
-                console.log(`Set ${res.records.length} records`);
                 set(res.records)
             })
             .catch((err) => console.log(err));
     }
 }
 
+const __getFacet = (domain, dataset, parameters, set, fieldid) => {
+    if (domain) {
+        const client = new ApiClient({domain: domain});
+        let query = fromCatalog()
+            .dataset(dataset)
+            .facets().facet(fieldid)
+            .limit(parameters.limit)
+            .offset(parameters.offset);
+        query = __addRefinesAndQuery(query, parameters, fieldid);
+        client.get(query)
+            .then(res => res)
+            .then(res => {
+                set(res.facets[0].facets);
+            })
+            .catch((err) => console.log(err));
+    }
+}
+
+const __getExport = (domain, dataset, parameters, set, exportType) => {
+    if (domain) {
+        const client = new ApiClient({domain: domain});
+        let query = fromCatalog()
+            .dataset(dataset)
+            .exports(exportType);
+        query = __addRefinesAndQuery(query, parameters);
+        client.get(query)
+            .then(res => res)
+            .then(res => {
+                set(res);
+            })
+            .catch((err) => console.log(err));
+    }
+}
+
 class DatasetStore {
     constructor(domain, dataset, parameters = {}) {
         this.domain = writable(domain);
         this.dataset = writable(dataset);
         this.parameters = writable(Object.assign({}, defaultParameters, parameters));
-        this.records = [];
     }
 
     id = undefined;
@@ -47,7 +86,6 @@ class DatasetStore {
             clearTimeout(this.id);
         }
         this.id = setTimeout(() => {
-            console.log("set query");
             this.parameters.update(param => {
                 param['q'] = q;
                 return param;
@@ -66,13 +104,34 @@ class DatasetStore {
         })
     }
 
+    unrefine = (k) => {
+        this.parameters.update(param => {
+            if (param.hasOwnProperty('refine'))
+                if (param['refine'].hasOwnProperty(k))
+                    delete param['refine'][k];
+            return param;
+        })
+    }
+
     getRecordsStore = () => {
         return derived([this.domain, this.dataset, this.parameters],
             ([$domain, $dataset, $parameters], set) => {
-                console.log('call derived', $domain, $dataset, JSON.stringify($parameters));
-                    __getRecords($domain, $dataset, $parameters, set);
-                return () => {
-                }
+                console.log($parameters);
+                __getRecords($domain, $dataset, $parameters, set);
+            }, []);
+    }
+
+    getFacetStore = (fieldid) => {
+        return derived([this.domain, this.dataset, this.parameters],
+            ([$domain, $dataset, $parameters], set) => {
+                __getFacet($domain, $dataset, $parameters, set, fieldid);
+            }, []);
+    }
+
+    getGeojsonExport = () => {
+        return derived([this.domain, this.dataset, this.parameters],
+            ([$domain, $dataset, $parameters], set) => {
+                __getExport($domain, $dataset, $parameters, set, "geojson");
             }, []);
     }
 }
diff --git a/src/utilities/mapUtilities.js b/src/utilities/mapUtilities.js
new file mode 100644
index 0000000..8a7d648
--- /dev/null
+++ b/src/utilities/mapUtilities.js
@@ -0,0 +1,12 @@
+import {LngLat, LngLatBounds} from "maplibre-gl";
+
+const fitMapBoundsToGeojsonFeaturesPoint = (map, geojson) => {
+    let dataBoundaries = new LngLatBounds();
+    geojson.features.forEach((feature) => {
+        let coords = feature.geometry.coordinates
+        dataBoundaries.extend(new LngLat(...coords));
+    })
+    map.fitBounds(dataBoundaries, {padding: 50});
+}
+
+export default { fitMapBoundsToGeojsonFeaturesPoint }
\ No newline at end of file

From bd95b6e8643633e0ceb754991a7d76e4b535880c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Passaniti?= <f.passaniti@gmail.com>
Date: Tue, 18 Jan 2022 23:58:25 +0100
Subject: [PATCH 10/11] Maplibre first components and tests

---
 src/components/Maplibre.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Maplibre.svelte b/src/components/Maplibre.svelte
index 83146e5..aa679f1 100644
--- a/src/components/Maplibre.svelte
+++ b/src/components/Maplibre.svelte
@@ -19,16 +19,16 @@
             zoom: 5.5,
             center: [2.700748,46.893575]
         })
+    }
+
+    onMount(() => {
+        initMap(mapHTMLElement);
 
         return {
             destroy() {
                 map.destroy();
             }
         };
-    }
-
-    onMount(() => {
-        initMap(mapHTMLElement);
     })
 </script>
 

From 1bdd864f6263a26719fa9557d1ab2c76fbeeae30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Passaniti?= <f.passaniti@gmail.com>
Date: Tue, 25 Jan 2022 16:10:18 +0100
Subject: [PATCH 11/11] Maplibre, IGN store for routing

---
 package-lock.json                             | 199 ++++++++++++++++++
 package.json                                  |   1 +
 src/components/MaplibreFeaturesEvent.svelte   |  25 +++
 .../MaplibreGeolocateControl.svelte           |  30 +++
 src/components/MaplibrePopup.svelte           |  66 ++++++
 src/components/MaplibreStyleLayer.svelte      |  31 ++-
 src/pages/withstore_map.svelte                |  67 +++++-
 .../{datasetStore.js => DatasetStore.js}      |   0
 src/stores/IGNGeoportailRouting.js            |  57 +++++
 src/utilities/mapUtilities.js                 |  10 +-
 10 files changed, 463 insertions(+), 23 deletions(-)
 create mode 100644 src/components/MaplibreFeaturesEvent.svelte
 create mode 100644 src/components/MaplibreGeolocateControl.svelte
 create mode 100644 src/components/MaplibrePopup.svelte
 rename src/stores/{datasetStore.js => DatasetStore.js} (100%)
 create mode 100644 src/stores/IGNGeoportailRouting.js

diff --git a/package-lock.json b/package-lock.json
index e9d310c..a1d2d0b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
                 "@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",
@@ -511,6 +512,12 @@
             "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
             "dev": true
         },
+        "node_modules/async": {
+            "version": "0.9.2",
+            "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
+            "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=",
+            "dev": true
+        },
         "node_modules/asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -1070,6 +1077,21 @@
             "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug==",
             "dev": true
         },
+        "node_modules/ejs": {
+            "version": "3.1.6",
+            "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz",
+            "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==",
+            "dev": true,
+            "dependencies": {
+                "jake": "^10.6.1"
+            },
+            "bin": {
+                "ejs": "bin/cli.js"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/electron-to-chromium": {
             "version": "1.3.827",
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.827.tgz",
@@ -1260,6 +1282,15 @@
                 "reusify": "^1.0.4"
             }
         },
+        "node_modules/filelist": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
+            "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==",
+            "dev": true,
+            "dependencies": {
+                "minimatch": "^3.0.4"
+            }
+        },
         "node_modules/fill-range": {
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -1913,6 +1944,86 @@
             "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
             "dev": true
         },
+        "node_modules/jake": {
+            "version": "10.8.2",
+            "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz",
+            "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==",
+            "dev": true,
+            "dependencies": {
+                "async": "0.9.x",
+                "chalk": "^2.4.2",
+                "filelist": "^1.0.1",
+                "minimatch": "^3.0.4"
+            },
+            "bin": {
+                "jake": "bin/cli.js"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/jake/node_modules/ansi-styles": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+            "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+            "dev": true,
+            "dependencies": {
+                "color-convert": "^1.9.0"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/jake/node_modules/chalk": {
+            "version": "2.4.2",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+            "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+            "dev": true,
+            "dependencies": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/jake/node_modules/color-convert": {
+            "version": "1.9.3",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+            "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+            "dev": true,
+            "dependencies": {
+                "color-name": "1.1.3"
+            }
+        },
+        "node_modules/jake/node_modules/color-name": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+            "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+            "dev": true
+        },
+        "node_modules/jake/node_modules/has-flag": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+            "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+            "dev": true,
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/jake/node_modules/supports-color": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+            "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+            "dev": true,
+            "dependencies": {
+                "has-flag": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4365,6 +4476,12 @@
             "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
             "dev": true
         },
+        "async": {
+            "version": "0.9.2",
+            "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
+            "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=",
+            "dev": true
+        },
         "asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -4796,6 +4913,15 @@
             "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug==",
             "dev": true
         },
+        "ejs": {
+            "version": "3.1.6",
+            "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz",
+            "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==",
+            "dev": true,
+            "requires": {
+                "jake": "^10.6.1"
+            }
+        },
         "electron-to-chromium": {
             "version": "1.3.827",
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.827.tgz",
@@ -4936,6 +5062,15 @@
                 "reusify": "^1.0.4"
             }
         },
+        "filelist": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
+            "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==",
+            "dev": true,
+            "requires": {
+                "minimatch": "^3.0.4"
+            }
+        },
         "fill-range": {
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -5406,6 +5541,70 @@
             "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
             "dev": true
         },
+        "jake": {
+            "version": "10.8.2",
+            "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz",
+            "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==",
+            "dev": true,
+            "requires": {
+                "async": "0.9.x",
+                "chalk": "^2.4.2",
+                "filelist": "^1.0.1",
+                "minimatch": "^3.0.4"
+            },
+            "dependencies": {
+                "ansi-styles": {
+                    "version": "3.2.1",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+                    "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+                    "dev": true,
+                    "requires": {
+                        "color-convert": "^1.9.0"
+                    }
+                },
+                "chalk": {
+                    "version": "2.4.2",
+                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+                    "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+                    "dev": true,
+                    "requires": {
+                        "ansi-styles": "^3.2.1",
+                        "escape-string-regexp": "^1.0.5",
+                        "supports-color": "^5.3.0"
+                    }
+                },
+                "color-convert": {
+                    "version": "1.9.3",
+                    "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+                    "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+                    "dev": true,
+                    "requires": {
+                        "color-name": "1.1.3"
+                    }
+                },
+                "color-name": {
+                    "version": "1.1.3",
+                    "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+                    "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+                    "dev": true
+                },
+                "has-flag": {
+                    "version": "3.0.0",
+                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+                    "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+                    "dev": true
+                },
+                "supports-color": {
+                    "version": "5.5.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+                    "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+                    "dev": true,
+                    "requires": {
+                        "has-flag": "^3.0.0"
+                    }
+                }
+            }
+        },
         "js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/package.json b/package.json
index 6035320..43f0895 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
         "@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",
diff --git a/src/components/MaplibreFeaturesEvent.svelte b/src/components/MaplibreFeaturesEvent.svelte
new file mode 100644
index 0000000..9a0e7bd
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/MaplibreGeolocateControl.svelte b/src/components/MaplibreGeolocateControl.svelte
new file mode 100644
index 0000000..0849450
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/MaplibrePopup.svelte b/src/components/MaplibrePopup.svelte
new file mode 100644
index 0000000..82f7eb1
--- /dev/null
+++ b/src/components/MaplibrePopup.svelte
@@ -0,0 +1,66 @@
+<script>
+    import {getContext, onMount} from "svelte";
+    import {Popup} from "maplibre-gl";
+    import ejs from "ejs";
+
+    export let multiple = false;
+
+    let {getMap} = getContext('map');
+    let {layer} = getContext('layer');
+    let map = getMap();
+    let popupHTMLElement;
+    let popupContent;
+
+    onMount(() => {
+        map.on('click', layer, function (e) {
+            let coordinates;
+            popupContent = document.createElement('div');
+
+            e.features.forEach((feature, i) => {
+                if (i == 0) {
+                    coordinates = feature.geometry.coordinates.slice();
+                    // Ensure that if the map is zoomed out such that multiple copies of the feature are visible, the popup appears over the copy being pointed to.
+                    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+                        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+                    }
+                }
+                if (i >= 1 && !multiple) {
+                    return;
+                }
+                let output = document.createElement('div');
+                output.innerHTML = ejs.render(
+                    popupHTMLElement.innerHTML,
+                    feature.properties,
+                    {
+                        openDelimiter: '!',
+                        closeDelimiter: '!'
+                    });
+                popupContent.appendChild(output);
+            })
+
+            new Popup()
+                .setLngLat(coordinates)
+                .setHTML(popupContent.innerHTML)
+                .addTo(map);
+        });
+
+        map.on('mouseenter', layer, function () {
+            map.getCanvas().style.cursor = 'pointer';
+        });
+
+        map.on('mouseleave', layer, function () {
+            map.getCanvas().style.cursor = '';
+        });
+    })
+</script>
+
+<div bind:this={popupHTMLElement}>
+    <slot/>
+</div>
+
+<style>
+    :global(.maplibregl-popup-content.mapboxgl-popup-content) {
+        max-height: 250px;
+        overflow: auto;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/MaplibreStyleLayer.svelte b/src/components/MaplibreStyleLayer.svelte
index 0cb2d8c..bf79d34 100644
--- a/src/components/MaplibreStyleLayer.svelte
+++ b/src/components/MaplibreStyleLayer.svelte
@@ -1,24 +1,29 @@
 <script>
-    import {getContext, onMount} from "svelte";
+    import {getContext, onMount, setContext} from "svelte";
 
     export let name;
+    export let type = 'circle';
+    export let paint = {
+        'circle-color': '#11b4da',
+        'circle-radius': 6,
+        'circle-stroke-width': 2,
+        'circle-stroke-color': '#000000'
+    };
+
     const { getMap } = getContext('map');
     let { source } = getContext('source');
-    let map;
+    setContext('layer', { layer: name});
+    let map = getMap();
+    let layerCreated = false;
 
     onMount(() => {
-        map = getMap();
         map.addLayer({
             id: name,
-            type: 'circle',
+            type,
             source: source,
-            paint: {
-                'circle-color': '#11b4da',
-                'circle-radius': 6,
-                'circle-stroke-width': 2,
-                'circle-stroke-color': '#000000'
-            }
+            paint
         });
+        layerCreated = true;
 
         return () => {
             if (map.getLayer(name)) {
@@ -26,4 +31,8 @@
             }
         }
     });
-</script>
\ No newline at end of file
+</script>
+
+{#if layerCreated}
+    <slot />
+{/if}
\ No newline at end of file
diff --git a/src/pages/withstore_map.svelte b/src/pages/withstore_map.svelte
index 4a00fa9..3efacc9 100644
--- a/src/pages/withstore_map.svelte
+++ b/src/pages/withstore_map.svelte
@@ -1,16 +1,30 @@
 <script>
-    import Table from "../components/Table.svelte";
-    import config from "../config.json";
     import Select from "svelte-select";
-    import DatasetStore from "../stores/datasetStore";
+    import DatasetStore from "../stores/DatasetStore";
     import Maplibre from "../components/Maplibre.svelte";
     import MaplibreSource from "../components/MaplibreSource.svelte";
     import MaplibreStyleLayer from "../components/MaplibreStyleLayer.svelte";
+    import MaplibreGeolocateControl from "../components/MaplibreGeolocateControl.svelte";
+    import IGNGeoportailRouting from "../stores/IGNGeoportailRouting";
+    import MaplibreFeaturesEvent from "../components/MaplibreFeaturesEvent.svelte";
+    import MaplibrePopup from "../components/MaplibrePopup.svelte";
 
     let data = new DatasetStore("fpassaniti", "idf-golf");
     let records = data.getRecordsStore();
     let naturelibelles = data.getFacetStore("utilisateurs");
     let geojson = data.getGeojsonExport();
+
+    let routing = new IGNGeoportailRouting();
+    let dist = routing.getRouting();
+
+    const updateUserLoc = (event) => {
+        routing.setStart(event.detail);
+    }
+
+    const clickOnFeatures = (event) => {
+        let features = event.detail;
+        routing.setEnd(features[0].geometry.coordinates);
+    }
 </script>
 
 <div class="container mx-auto mt-6">
@@ -28,20 +42,53 @@
             on:select={(event) => { event.detail ? data.refine("utilisateurs", event.detail.value) : ''}}
             on:clear={(event) => { data.unrefine("utilisateurs")}}/>
 
+    {#if $dist.duration}
+        <h4>
+            Routing :
+        </h4>
+        <p>
+            {$dist.duration.toLocaleString()} {$dist.timeUnit}
+        </p>
+        <p>
+            {$dist.distance.toLocaleString()} {$dist.distanceUnit}
+        </p>
+        <button on:click={() => {routing.resetEnd()}}>Clear routing</button>
+    {/if}
+
     <div class="map-container">
         <Maplibre>
+            <MaplibreGeolocateControl watch={true} on:geolocate={updateUserLoc}></MaplibreGeolocateControl>
+
+            <MaplibreSource name="route" data={$dist.geojson}>
+                <MaplibreStyleLayer name="routestyle" type="line" paint={{
+                        'line-color': '#ff2222',
+                        'line-width': 2
+                    }}>
+                </MaplibreStyleLayer>
+            </MaplibreSource>
+
             <MaplibreSource name="data" data={$geojson}>
-                <MaplibreStyleLayer name="datastyle"></MaplibreStyleLayer>
+                <MaplibreStyleLayer name="datastyle">
+                    <MaplibrePopup multiple>
+                        <h3 style="margin-top: 6px">!%- insnom %!</h3>
+                        <p>!%- comlib %!</p>
+                        <ul>
+                            <li>!%- equipementtypelib %!</li>
+                            <li>!%- famille_type_d_equipement %!</li>
+                        </ul>
+                    </MaplibrePopup>
+                    <!--                    <MaplibreFeaturesEvent on:click={clickOnFeatures}></MaplibreFeaturesEvent>-->
+                </MaplibreStyleLayer>
             </MaplibreSource>
         </Maplibre>
     </div>
 </div>
 
 <style lang="scss">
-    .map-container {
-      display: block;
-      width: 600px;
-      height: 400px;
-      background: grey;
-    }
+  .map-container {
+    display: block;
+    width: 600px;
+    height: 400px;
+    background: grey;
+  }
 </style>
diff --git a/src/stores/datasetStore.js b/src/stores/DatasetStore.js
similarity index 100%
rename from src/stores/datasetStore.js
rename to src/stores/DatasetStore.js
diff --git a/src/stores/IGNGeoportailRouting.js b/src/stores/IGNGeoportailRouting.js
new file mode 100644
index 0000000..eae62c5
--- /dev/null
+++ b/src/stores/IGNGeoportailRouting.js
@@ -0,0 +1,57 @@
+import {derived, writable} from "svelte/store";
+
+const baseurl = "https://wxs.ign.fr/calcul/geoportail/itineraire/rest/1.0.0/route?resource=bdtopo-pgr&profile=car&optimization=fastest";
+
+// start & end must be lng,lat string
+const __getRouting = (start, end, set) => {
+    if (start && start.length > 0 && end && end.length > 0) {
+        let url = `${baseurl}&start=${start}&end=${end}`;
+        fetch(url)
+            .then(data => data.json())
+            .then(data => {
+                console.log(data);
+                let geojson = {
+                    type: 'FeatureCollection',
+                    features: [{
+                        "type": "Feature",
+                        "properties": {},
+                        "geometry": data.geometry
+                    }],
+                };
+                data.geojson = geojson;
+                set(data);
+            })
+    } else {
+        set({})
+    }
+}
+
+class IGNGeoportailRouting {
+    constructor() {
+        this.start = writable([]);
+        this.end = writable([]);
+    }
+
+    setStart = (start) => {
+        this.start.set(start);
+    }
+
+    setEnd = (end) => {
+        this.end.set(end);
+    }
+
+    resetEnd() {
+        this.end.set([]);
+    }
+
+    getRouting() {
+        return derived(
+            [this.start, this.end],
+            ([$start, $end], set) => {
+                __getRouting($start, $end, set);
+            }, {})
+    }
+
+}
+
+export default IGNGeoportailRouting;
\ No newline at end of file
diff --git a/src/utilities/mapUtilities.js b/src/utilities/mapUtilities.js
index 8a7d648..6b22ba7 100644
--- a/src/utilities/mapUtilities.js
+++ b/src/utilities/mapUtilities.js
@@ -3,8 +3,14 @@ import {LngLat, LngLatBounds} from "maplibre-gl";
 const fitMapBoundsToGeojsonFeaturesPoint = (map, geojson) => {
     let dataBoundaries = new LngLatBounds();
     geojson.features.forEach((feature) => {
-        let coords = feature.geometry.coordinates
-        dataBoundaries.extend(new LngLat(...coords));
+        if (Array.isArray(feature.geometry.coordinates[0])) { // list of coords (line/polygon/...)
+            feature.geometry.coordinates.forEach((coords) => {
+                dataBoundaries.extend(new LngLat(...coords));
+            })
+        } else { // single coords (point)
+            let coords = feature.geometry.coordinates
+            dataBoundaries.extend(new LngLat(...coords));
+        }
     })
     map.fitBounds(dataBoundaries, {padding: 50});
 }