Merge pull request #2008 from umap-project/layer-var-in-popup

feat: add {layer} as popup variable (aka extended properties)

docs-users/fr/support/faq.md

@@ -47,3 +47,43 @@ Sur macOS, utliser `Cmd` à la place de `Ctrl`.
 
 Quand la condition est vraie pour un élément donné, le style associé sera appliqué.
 
+
+## Comment utiliser les variables ? {: #variables}
+
+Utiliser une variable est aussi simple que `{variable}`.
+
+Il est possible de définir une seconde variable de repli, dans le cas où la première ne serait pas définie: `{variable|repli}`
+
+La valeur de repli peut être une chaîne, définie entre guillemets: `{variable|"repli"}`
+
+Il est possible d'enchaîner plusieurs variables: `{variable|autrevariable|"une chaîne"}`
+
+Il est possible d'utiliser une variable à l'intérieur d'une URL: `[[https://domain.org/?locale={locale}|Wikipedia]]`
+
+Ou même comme chemin vers une image: `{{{variable}}}` (noter le triple `{}`).
+
+### Variables disponibles pour les éléments de la carte:
+
+Ces variables peuvent être utilisées dans le champ description d'un élément, ou comme gabarit manuel de popup.
+
+Toute propriété de l'élément sera disponible, ainsi que:
+
+- `{lat}/{lng}` → la position de l'élément (ou le centroïde dans le cas d'une ligne ou d'un polygone)
+- `{alt}` → l'altitude (pour les points uniquement), si elle est définie dans les données
+- `{locale}` → la langue sous la forme `fr` ou `fr_CA` quand une variante est utilisée
+- `{lang}` → la langue sous la forme `fr` ou `fr-ca` quand une variante est utilisée
+- `{measure}` → la longueur d'une ligne ou la surface d'un polygone
+- `{rank}` → la rang d'un élément dans son calque
+- `{layer}` → le nom du calque de l'élément
+- `{zoom}` → le zoom actuel de la carte
+
+### Variables disponibles dans les URL de données distantes:
+
+- `{bbox}` → la bbox de la carte sous la forme `sud_ouest_lng,sud_ouest_lat,nord_est_lng,nord_est_lat`
+- `{north}/{top}` → la latitude nord de la vue actuelle de la carte
+- `{south}/{bottom}` → la latitude sud de la vue actuelle de la carte
+- `{east}/{right}` → la longitude est de la vue actuelle de la carte
+- `{west}/{left}` → la longitude ouest de la vue actuelle de la carte
+- `{zoom}` → le zoom actuel de la carte
+- `{lat}` → la latitude du centre actuel de la carte
+- `{lng}` → la longitude du centre actuel de la carte

docs-users/support/faq.md

@@ -46,3 +46,44 @@ With macOS, replace `Ctrl` by `Cmd`.
 * `mycolumn<12.34` → will match features whose column `mycolumn` is lower than `12.34` (as number)
 
 When the condition match, the associated style will be applied to the corresponding feature.
+
+
+## How to use variables ? {: #variables}
+
+In general, using a variable is as simple as `{myvar}`.
+
+It's possible to define another variable as fallback of the first one like this: `{myvar|fallbackvar}`.
+
+To fallback to a string, add it between double quotes: `{myvar|"fallback"}`.
+
+It's possible to combine more variables: `{myvar|othervar|"some string"}`.
+
+It's possible to use a variable inside an URL, for example: `[[https://domain.org/?locale={locale}|Wikipedia]]`.
+
+Or even as source for an image: `{{{myvar}}}` (note the triple `{}`).
+
+### Available variables for features:
+
+Those variables can be used in a feature description, or in popup content templates.
+
+Any property of the feature will be available, plus:
+
+- `{lat}/{lng}` → the feature position (or centroid in case of line or polygon)
+- `{alt}` → the altitude of a marker, if defined in the data
+- `{locale}` → the locale in the form `en` or `en_US` when a variant is used
+- `{lang}` → the lang in the form `en` or `en-us` when a variant is used
+- `{measure}` → the length of a line or the area of a polygon
+- `{rank}` → the rank of the feature in the layer
+- `{layer}` → the name of the feature's layer
+- `{zoom}` → the current map zoom
+
+### Available variables in URL for remote data:
+
+- `{bbox}` → the current bbox of the map in the form `southwest_lng,southwest_lat,northeast_lng,northeast_lat`
+- `{north}/{top}` → the North latitude of the current map view
+- `{south}/{bottom}` → the South latitude of the current map view
+- `{east}/{right}` → the East longitude of the current map view
+- `{west}/{left}` → the West longitude of the current map view
+- `{zoom}` → the current map zoom
+- `{lat}` → the latitude of the current map center
+- `{lng}` → the longitude of the current map center

umap/static/umap/js/umap.features.js

@@ -602,11 +602,13 @@ U.FeatureMixin = {
     if (locale) properties.locale = locale
     if (L.lang) properties.lang = L.lang
     properties.rank = this.getRank() + 1
+    properties.layer = this.datalayer.getName()
     if (this._map && this.hasGeom()) {
       center = this.getCenter()
       properties.lat = center.lat
       properties.lon = center.lng
       properties.lng = center.lng
+      properties.alt = this._latlng?.alt
       if (typeof this.getMeasure !== 'undefined') {
         properties.measure = this.getMeasure()
       }

umap/tests/integration/test_view_marker.py

@@ -19,7 +19,7 @@ DATALAYER_DATA = {
             },
             "geometry": {
                 "type": "Point",
-                "coordinates": [14.6889, 48.5529],
+                "coordinates": [14.6889, 48.5529, 241],
             },
         },
     ],
@@ -79,3 +79,30 @@ def test_should_open_popup_panel_on_click(live_server, map, page, bootstrap):
     # Close popup
     page.locator("#map").click()
     expect(panel).to_be_hidden()
+
+
+def test_extended_properties_in_popup(live_server, map, page, bootstrap):
+    map.settings["properties"]["popupContentTemplate"] = """
+    Rank: {rank}
+    Locale: {locale}
+    Lang: {lang}
+    Lat: {lat}
+    Lon: {lon}
+    Alt: {alt}
+    Zoom: {zoom}
+    Layer: {layer}
+    """
+    map.save()
+    page.goto(f"{live_server.url}{map.get_absolute_url()}")
+    expect(page.locator(".umap-icon-active")).to_be_hidden()
+    page.locator(".leaflet-marker-icon").click()
+    expect(page.locator(".umap-icon-active")).to_be_visible()
+    expect(page.locator(".leaflet-popup-content-wrapper")).to_be_visible()
+    expect(page.get_by_text("Rank: 1")).to_be_visible()
+    expect(page.get_by_text("Locale: en")).to_be_visible()
+    expect(page.get_by_text("Lang: en")).to_be_visible()
+    expect(page.get_by_text("Lat: 48.5529")).to_be_visible()
+    expect(page.get_by_text("Lon: 14.6889")).to_be_visible()
+    expect(page.get_by_text("Alt: 241")).to_be_visible()
+    expect(page.get_by_text("Zoom: 7")).to_be_visible()
+    expect(page.get_by_text("Layer: test datalayer")).to_be_visible()