From b426d212f00ec88f654619bef56f2d5158ed6967 Mon Sep 17 00:00:00 2001 From: David Larlet Date: Tue, 25 Jun 2024 15:41:17 -0400 Subject: [PATCH 1/3] feat: handle multiple dataUrl parameters on map load --- umap/static/umap/js/umap.js | 17 ++++++---- umap/tests/integration/test_map_preview.py | 38 ++++++++++++++++++++-- 2 files changed, 46 insertions(+), 9 deletions(-) diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index 84d567c27..b5c41450e 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -184,14 +184,17 @@ U.Map = L.Map.extend({ this._default_extent = true this.options.name = L._('Untitled map') let data = L.Util.queryString('data', null) - let dataUrl = L.Util.queryString('dataUrl', null) + const url = new URL(window.location.href) + const dataUrls = new URLSearchParams(url.search).getAll('dataUrl') const dataFormat = L.Util.queryString('dataFormat', 'geojson') - if (dataUrl) { - dataUrl = decodeURIComponent(dataUrl) - dataUrl = this.localizeUrl(dataUrl) - dataUrl = this.proxyUrl(dataUrl) - const datalayer = this.createDataLayer() - datalayer.importFromUrl(dataUrl, dataFormat) + if (dataUrls.length) { + for (let dataUrl of dataUrls) { + dataUrl = decodeURIComponent(dataUrl) + dataUrl = this.localizeUrl(dataUrl) + dataUrl = this.proxyUrl(dataUrl) + const datalayer = this.createDataLayer() + datalayer.importFromUrl(dataUrl, dataFormat) + } } else if (data) { data = decodeURIComponent(data) const datalayer = this.createDataLayer() diff --git a/umap/tests/integration/test_map_preview.py b/umap/tests/integration/test_map_preview.py index ca338956e..fe836f1fc 100644 --- a/umap/tests/integration/test_map_preview.py +++ b/umap/tests/integration/test_map_preview.py @@ -21,6 +21,21 @@ } ], } +GEOJSON2 = { + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": { + "name": "Montmorency Falls", + }, + "geometry": { + "type": "Point", + "coordinates": [-71.14, 46.89], + }, + } + ], +} CSV = "name,latitude,longitude\nNiagara Falls,43.08,-79.04" @@ -43,10 +58,29 @@ def handle(route): expect(markers).to_have_count(1) +def test_map_preview_can_load_mutiple_remote_geojson(page, live_server, tilelayer): + def handle(route): + if "2" in route.request.url: + route.fulfill(json=GEOJSON2) + else: + route.fulfill(json=GEOJSON) + + # Intercept the route to the proxy + page.route("*/**/ajax-proxy/**", handle) + + page.goto( + ( + f"{live_server.url}/map/?" + "dataUrl=http://some.org/geo.json&dataUrl=http://some.org/geo2.json" + ) + ) + markers = page.locator(".leaflet-marker-icon") + expect(markers).to_have_count(2) + + def test_map_preview_can_load_remote_csv(page, live_server, tilelayer): def handle(route): - csv = """name,latitude,longitude\nNiagara Falls,43.08,-79.04""" - route.fulfill(body=csv) + route.fulfill(body=CSV) # Intercept the route to the proxy page.route("*/**/ajax-proxy/**", handle) From 9f7f9b08be5031e9370aeee5245a20f4dee31472 Mon Sep 17 00:00:00 2001 From: David Larlet Date: Wed, 26 Jun 2024 13:41:44 -0400 Subject: [PATCH 2/3] docs-users: Preloading a map with data --- docs-users/fr/support/advanced.md | 23 +++++++++++++++++++++++ docs-users/support/advanced.md | 20 ++++++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 docs-users/fr/support/advanced.md create mode 100644 docs-users/support/advanced.md diff --git a/docs-users/fr/support/advanced.md b/docs-users/fr/support/advanced.md new file mode 100644 index 000000000..1e8a68fce --- /dev/null +++ b/docs-users/fr/support/advanced.md @@ -0,0 +1,23 @@ +# Usages avancés de uMap + +## Précharger une carte avec des données {: #preloading-data } + +Il est possible de précharger une carte avec des données en utilisant +le paramètre `dataUrl`, ce paramètre doit lier vers une URL encodée +(avec la méthode `encodeURIComponent()` en JavaScript par exemple). + +Vous pouvez aussi utiliser le paramètre `dataFormat` en fonction de la +ressource distante vers laquelle vous faites un lien: + +* `geojson` (défaut) +* `csv` +* `gpx` +* `georss` +* `kml` +* `osm` + +Cet exemple va charger une carte avec les contours géographiques pour +la commune d’Arles, récupérés dynamiquement depuis +[geo.api.gouv.fr](https://geo.api.gouv.fr/): + +https://umap.openstreetmap.fr/en/map/?dataUrl=https%3A%2F%2Fgeo.api.gouv.fr%2Fcommunes%3Fcode%3D13004%26format%3Dgeojson%26geometry%3Dcontour diff --git a/docs-users/support/advanced.md b/docs-users/support/advanced.md new file mode 100644 index 000000000..129659522 --- /dev/null +++ b/docs-users/support/advanced.md @@ -0,0 +1,20 @@ +# uMap advanced usages + +## Preloading a map with data {: #preloading-data } + +You can preload a map using the `dataUrl` parameter, that parameter must link +to an encoded URL (using JavaScript’s `encodeURIComponent()` for instance). + +You can also set the `dataFormat` parameter given the resource you are linking to: + +* `geojson` (default) +* `csv` +* `gpx` +* `georss` +* `kml` +* `osm` + +This example will load a map with borders for Arles, dynamically fetched +from [geo.api.gouv.fr](https://geo.api.gouv.fr/) : + +https://umap.openstreetmap.fr/en/map/?dataUrl=https%3A%2F%2Fgeo.api.gouv.fr%2Fcommunes%3Fcode%3D13004%26format%3Dgeojson%26geometry%3Dcontour From 393ae0df6bea62f4adecbb1148bea6b86b8f7506 Mon Sep 17 00:00:00 2001 From: David Larlet Date: Wed, 26 Jun 2024 14:16:16 -0400 Subject: [PATCH 3/3] docs-users: Also document the `data` URL parameter --- docs-users/fr/support/advanced.md | 23 ++++++++++++++++------- docs-users/support/advanced.md | 21 ++++++++++++++++----- 2 files changed, 32 insertions(+), 12 deletions(-) diff --git a/docs-users/fr/support/advanced.md b/docs-users/fr/support/advanced.md index 1e8a68fce..42624378c 100644 --- a/docs-users/fr/support/advanced.md +++ b/docs-users/fr/support/advanced.md @@ -3,11 +3,15 @@ ## Précharger une carte avec des données {: #preloading-data } Il est possible de précharger une carte avec des données en utilisant -le paramètre `dataUrl`, ce paramètre doit lier vers une URL encodée -(avec la méthode `encodeURIComponent()` en JavaScript par exemple). +les paramètres `data` ou `dataUrl` : -Vous pouvez aussi utiliser le paramètre `dataFormat` en fonction de la -ressource distante vers laquelle vous faites un lien: +* Le paramètre `data` doit être URI encodé + (avec la méthode `encodeURIComponent()` en JavaScript par exemple). +* Le paramètre `dataUrl` doit lier vers une URL encodée + (avec la méthode `encodeURIComponent()` en JavaScript par exemple). + +Vous pouvez ajouter le paramètre `dataFormat` en fonction de la +nature de vos données: * `geojson` (défaut) * `csv` @@ -16,8 +20,13 @@ ressource distante vers laquelle vous faites un lien: * `kml` * `osm` -Cet exemple va charger une carte avec les contours géographiques pour +Cet exemple, utilisant le paramètre `data`, va charger une carte avec un marqueur +positionné sur les Chutes du Niagara à partir de données en CSV : + +https://umap.openstreetmap.fr/fr/map/?data=name%252Clatitude%252Clongitude%250AChutes%20du%20Niagara%252C43.084799710219066%252C-79.0693759918213&dataFormat=csv + +Cet exemple, utilisant le paramètre `dataUrl`, va charger une carte avec les contours géographiques pour la commune d’Arles, récupérés dynamiquement depuis -[geo.api.gouv.fr](https://geo.api.gouv.fr/): +[geo.api.gouv.fr](https://geo.api.gouv.fr/) en GeoJSON : -https://umap.openstreetmap.fr/en/map/?dataUrl=https%3A%2F%2Fgeo.api.gouv.fr%2Fcommunes%3Fcode%3D13004%26format%3Dgeojson%26geometry%3Dcontour +https://umap.openstreetmap.fr/fr/map/?dataUrl=https%3A%2F%2Fgeo.api.gouv.fr%2Fcommunes%3Fcode%3D13004%26format%3Dgeojson%26geometry%3Dcontour diff --git a/docs-users/support/advanced.md b/docs-users/support/advanced.md index 129659522..89e6dc4f7 100644 --- a/docs-users/support/advanced.md +++ b/docs-users/support/advanced.md @@ -2,10 +2,14 @@ ## Preloading a map with data {: #preloading-data } -You can preload a map using the `dataUrl` parameter, that parameter must link -to an encoded URL (using JavaScript’s `encodeURIComponent()` for instance). +You can preload a map using the `data` or the `dataUrl` parameter: -You can also set the `dataFormat` parameter given the resource you are linking to: +* The `data` parameter must be URI encoded + (using JavaScript’s `encodeURIComponent()` for instance). +* The `dataURL` parameter must link to an encoded URL + (using JavaScript’s `encodeURIComponent()` for instance). + +You can add the `dataFormat` parameter given the nature of your data: * `geojson` (default) * `csv` @@ -14,7 +18,14 @@ You can also set the `dataFormat` parameter given the resource you are linking t * `kml` * `osm` -This example will load a map with borders for Arles, dynamically fetched -from [geo.api.gouv.fr](https://geo.api.gouv.fr/) : + +This example, using the `data` parameter, will load a map with a marker +set on Niagara Falls from CSV formatted data: + +https://umap.openstreetmap.fr/en/map/?data=name%252Clatitude%252Clongitude%250ANiagara%20Falls%252C43.084799710219066%252C-79.0693759918213&dataFormat=csv + +That example, using the `dataUrl` parameter, will load a map with +borders for Arles, dynamically fetched from +[geo.api.gouv.fr](https://geo.api.gouv.fr/) in GeoJSON: https://umap.openstreetmap.fr/en/map/?dataUrl=https%3A%2F%2Fgeo.api.gouv.fr%2Fcommunes%3Fcode%3D13004%26format%3Dgeojson%26geometry%3Dcontour