diff --git a/docs-users/fr/support/advanced.md b/docs-users/fr/support/advanced.md new file mode 100644 index 000000000..42624378c --- /dev/null +++ b/docs-users/fr/support/advanced.md @@ -0,0 +1,32 @@ +# 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 +les paramètres `data` ou `dataUrl` : + +* 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` +* `gpx` +* `georss` +* `kml` +* `osm` + +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/) en GeoJSON : + +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 new file mode 100644 index 000000000..89e6dc4f7 --- /dev/null +++ b/docs-users/support/advanced.md @@ -0,0 +1,31 @@ +# uMap advanced usages + +## Preloading a map with data {: #preloading-data } + +You can preload a map using the `data` or the `dataUrl` parameter: + +* 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` +* `gpx` +* `georss` +* `kml` +* `osm` + + +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 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)