Merge pull request #1943 from umap-project/multiple-dataurl-onload

feat: handle multiple dataUrl parameters on map load

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

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

umap/static/umap/js/umap.js

@@ -175,14 +175,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) {
+      if (dataUrls.length) {
-        dataUrl = decodeURIComponent(dataUrl)
+        for (let dataUrl of dataUrls) {
-        dataUrl = this.localizeUrl(dataUrl)
+          dataUrl = decodeURIComponent(dataUrl)
-        dataUrl = this.proxyUrl(dataUrl)
+          dataUrl = this.localizeUrl(dataUrl)
-        const datalayer = this.createDataLayer()
+          dataUrl = this.proxyUrl(dataUrl)
-        datalayer.importFromUrl(dataUrl, dataFormat)
+          const datalayer = this.createDataLayer()
+          datalayer.importFromUrl(dataUrl, dataFormat)
+        }
       } else if (data) {
         data = decodeURIComponent(data)
         const datalayer = this.createDataLayer()

umap/tests/integration/test_map_preview.py

@@ -21,6 +21,21 @@ GEOJSON = {
         }
     ],
 }
+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 test_map_preview_can_load_remote_geojson(page, live_server, tilelayer):
     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)