umap-project 1.14.0a4__py3-none-any.whl → 2.0.0a0__py3-none-any.whl

umap/templates/umap/home.html

@@ -10,7 +10,9 @@
     </div>
   {% endif %}
   <div class="wrapper">
-    <h2 class="section">{% blocktrans %}Get inspired, browse maps{% endblocktrans %}</h2>
-    <div class="map_list row">{% include "umap/map_list.html" %}</div>
+    {% if maps %}
+      <h2 class="section">{% blocktrans %}Get inspired, browse maps{% endblocktrans %}</h2>
+      <div class="map_list row">{% include "umap/map_list.html" %}</div>
+    {% endif %}
   </div>
 {% endblock maincontent %}

umap/templates/umap/js.html

@@ -36,7 +36,6 @@
 <script src="{% static 'umap/js/umap.core.js' %}" defer></script>
 <script src="{% static 'umap/js/umap.autocomplete.js' %}" defer></script>
 <script src="{% static 'umap/js/umap.popup.js' %}" defer></script>
-<script src="{% static 'umap/js/umap.xhr.js' %}" defer></script>
 <script src="{% static 'umap/js/umap.forms.js' %}" defer></script>
 <script src="{% static 'umap/js/umap.icon.js' %}" defer></script>
 <script src="{% static 'umap/js/umap.features.js' %}" defer></script>

umap/templates/umap/map_detail.html

@@ -7,9 +7,18 @@
   map_detail
 {% endblock body_class %}
 {% block extra_head %}
+  {% if preconnect_domains %}
+    {% for domain in preconnect_domains %}
+      <link rel="preconnect" href="{{ domain }}" />
+    {% endfor %}
+  {% endif %}
   {% umap_css %}
+  {{ block.super }}
   {% umap_js locale=locale %}
   {% if object.share_status != object.PUBLIC %}<meta name="robots" content="noindex">{% endif %}
+  <link rel="alternate" type="application/json+oembed"
+    href="{{ oembed_absolute_uri }}?url={{ absolute_uri|urlencode }}&format=json"
+    title="{{ map.name }} oEmbed URL" />
 {% endblock extra_head %}
 {% block content %}
   {% block map_init %}

umap/templates/umap/map_init.html

@@ -4,7 +4,7 @@
 <script defer type="text/javascript">
   let MAP
   window.addEventListener('DOMContentLoaded', (event) => {
-    MAP = new L.U.Map("map", {{ map_settings|notag|safe }});
+    MAP = new U.Map("map", {{ map_settings|notag|safe }});
   });
 </script>
 <!-- djlint:on -->

umap/templates/umap/map_messages.html

@@ -1,10 +1,12 @@
 <script type="text/javascript">
-  {% for m in messages %}
+  window.addEventListener('DOMContentLoaded', (event) => {
+    {% for m in messages %}
     {# We have just one, but we need to loop, as for messages API #}
-    L.U.fire('ui:alert', {
+    MAP.ui.alert({
       content: "{{ m }}",
       level: "{{ m.tags }}",
       duration: 100000
     })
   {% endfor %}
+})
 </script>

umap/templates/umap/map_table.html

@@ -1,73 +1,134 @@
 {% load umap_tags i18n %}
-<table class="maps">
-  <thead>
-    <tr>
-      <th>{% blocktrans %}Name{% endblocktrans %}</th>
-      <th>{% blocktrans %}Preview{% endblocktrans %}</th>
-      <th>{% blocktrans %}Who can see / edit{% endblocktrans %}</th>
-      <th>{% blocktrans %}Last save{% endblocktrans %}</th>
-      <th>{% blocktrans %}Owner{% endblocktrans %}</th>
-      <th>{% blocktrans %}Actions{% endblocktrans %}</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for map_inst in maps %}
-      {% with unique_id="map_"|addstr:map_inst.pk %}
-        {{ map_inst.preview_settings|json_script:unique_id }}
-        <tr>
-          <td>
-            <a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a>
-          </td>
-          <td>
-            <button class="button map-opener neutral" data-map-id="{{ unique_id }}">{% blocktranslate %}Open preview{% endblocktranslate %}</button>
-            <dialog>
-              <form method="dialog">
-                <div id="{{ unique_id }}_target" class="map_fragment"></div>
-                <p class="close-dialog">
-                  <button class="button" type="submit">Close</button>
-                </p>
+<div class="table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        <th>{% blocktrans %}Name{% endblocktrans %}</th>
+        <th>{% blocktrans %}Preview{% endblocktrans %}</th>
+        <th>{% blocktrans %}Who can see{% endblocktrans %}</th>
+        <th>{% blocktrans %}Who can edit{% endblocktrans %}</th>
+        <th>{% blocktrans %}Last save{% endblocktrans %}</th>
+        <th>{% blocktrans %}Owner{% endblocktrans %}</th>
+        <th>{% blocktrans %}Actions{% endblocktrans %}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for map_inst in maps %}
+        {% with unique_id="map_"|addstr:map_inst.pk %}
+          <tr>
+            <td>
+              <a href="{{ map_inst.get_absolute_url }}">{{ map_inst.name }}</a>
+            </td>
+            <td>
+              {{ map_inst.preview_settings|json_script:unique_id }}
+              <button class="map-icon map-opener" data-map-id="{{ unique_id }}"
+                title="{% translate "Open preview" %}">
+                <span class="icon-dashboard icon-view"></span>
+                <span class="sr-only">{% translate "Open preview" %}</span>
+              </button>
+              <dialog>
+                <form method="dialog">
+                  <div id="{{ unique_id }}_target" class="map_fragment"></div>
+                  <p class="close-dialog">
+                    <button class="button" type="submit">Close</button>
+                  </p>
+                </form>
+              </dialog>
+            </td>
+            <td>{{ map_inst.get_share_status_display }}</td>
+            <td>{{ map_inst.get_edit_status_display }}</td>
+            <td>{{ map_inst.modified_at }}</td>
+            <td>
+              <a href="{{ map_inst.owner.get_url }}">{{ map_inst.owner }}</a>
+            </td>
+            <td>
+              <a href="{{ map_inst.get_absolute_url }}?share" class="icon-link"
+                title="{% translate "Share" %}">
+                <span class="icon-dashboard icon-share"></span>
+                <span class="sr-only">{% translate "Share" %}</span>
+              </a>
+              <a href="{{ map_inst.get_absolute_url }}?edit" class="icon-link"
+                title="{% translate "Edit" %}">
+                <span class="icon-dashboard icon-edit"></span>
+                <span class="sr-only">{% translate "Edit" %}</span>
+              </a>
+              <a href="{% url 'map_download' map_inst.pk %}" class="icon-link"
+                title="{% translate "Download" %}">
+                <span class="icon-dashboard icon-download"></span>
+                <span class="sr-only">{% translate "Download" %}</span>
+              </a>
+              <form action="{% url 'map_clone' map_inst.pk %}" method="post">
+                {% csrf_token %}
+                <button class="map-icon" type="submit"
+                  title="{% translate "Clone" %}">
+                  <span class="icon-dashboard icon-duplicate"></span>
+                  <span class="sr-only">{% translate "Clone" %}</span>
+                </button>
               </form>
-            </dialog>
-          </td>
-          <td>{{ map_inst.get_share_status_display }} / {{ map_inst.get_edit_status_display }}</td>
-          <td>{{ map_inst.modified_at }}</td>
-          <td>
-            <a href="{{ map_inst.owner.get_url }}">{{ map_inst.owner }}</a>
-          </td>
-          <td>
-            <a href="{{ map_inst.get_absolute_url }}?share">{% translate "Share" %}</a> |
-            <a href="{{ map_inst.get_absolute_url }}?edit">{% translate "Edit" %}</a> |
-            <a href="{% url 'map_download' map_inst.pk %}">{% translate "Download" %}</a>
-          </td>
-        </tr>
-      {% endwith %}
-    {% endfor %}
-  </tbody>
-</table>
-<div class="pagination">
-  {% if maps.has_previous %}
-    <a href="?p=1{% if q %}&q={{ q }}{% endif %}">« {% translate "first" %}</a>
-    <a href="?p={{ maps.previous_page_number }}{% if q %}&q={{ q }}{% endif %}">‹ {% translate "previous" %}</a>
-  {% else %}
-    {# djlint:off #}
-    <span></span>
-    <span></span>
-    {# djlint:on #}
-  {% endif %}
+              <form action="{% url 'map_delete' map_inst.pk %}"
+                method="post" class="map-delete">
+                {% csrf_token %}
+                <input type="hidden" name="next" value="{% url 'user_dashboard' %}">
+                <button class="map-icon" type="submit"
+                  title="{% translate "Delete" %}">
+                  <span class="icon-dashboard icon-delete"></span>
+                  <span class="sr-only">{% translate "Delete" %}</span>
+                </button>
+              </form>
+            </td>
+          </tr>
+        {% endwith %}
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+{% if maps.has_other_pages %}
+  <div class="pagination">
+    {% if maps.has_previous %}
+      <a href="?p=1{% if q %}&q={{ q }}{% endif %}">« {% translate "first" %}</a>
+      <a href="?p={{ maps.previous_page_number }}{% if q %}&q={{ q }}{% endif %}">‹ {% translate "previous" %}</a>
+    {% else %}
+      {# djlint:off #}
+      <span></span>
+      <span></span>
+      {# djlint:on #}
+    {% endif %}
 
-  <span class="current">
-    {% blocktranslate with maps_number=maps.number num_pages=maps.paginator.num_pages %}
-      Page {{ maps_number }} of {{ num_pages }}
-    {% endblocktranslate %}
-  </span>
+    <span class="current">
+      {% blocktranslate with maps_number=maps.number num_pages=maps.paginator.num_pages trimmed %}
+        Page {{ maps_number }} of {{ num_pages }}
+      {% endblocktranslate %}
+    </span>
 
-  {% if maps.has_next %}
-    <a href="?p={{ maps.next_page_number }}{% if q %}&q={{ q }}{% endif %}">{% translate "next" %} ›</a>
-    <a href="?p={{ maps.paginator.num_pages }}{% if q %}&q={{ q }}{% endif %}">{% translate "last" %} »</a>
-  {% else %}
-    {# djlint:off #}
-    <span></span>
-    <span></span>
-    {# djlint:on #}
-  {% endif %}
-</div>
+    {% if maps.has_next %}
+      <a href="?p={{ maps.next_page_number }}{% if q %}&q={{ q }}{% endif %}">{% translate "next" %} ›</a>
+      <a href="?p={{ maps.paginator.num_pages }}{% if q %}&q={{ q }}{% endif %}">{% translate "last" %} »</a>
+    {% else %}
+      {# djlint:off #}
+      <span></span>
+      <span></span>
+      {# djlint:on #}
+    {% endif %}
+    <span>
+      {% blocktranslate with per_page=maps.paginator.per_page trimmed %}
+      Lines per page: {{ per_page }}
+      {% endblocktranslate %}
+    </span>
+    <span>
+      {% blocktranslate with count=maps.paginator.count trimmed %}
+      {{ count }} maps
+      {% endblocktranslate %}
+    </span>
+  </div>
+{% endif %}
+<script>
+  !(function () {
+    for (const deleteForm of document.querySelectorAll('table.maps form.map-delete')) {
+      deleteForm.addEventListener('submit', (event) => {
+        if (!confirm(L._('Are you sure you want to delete this map?'))) {
+          event.preventDefault()
+        }
+      })
+    }
+  })()
+</script>

umap/templates/umap/navigation.html

@@ -1,9 +1,7 @@
 {% load i18n %}
 <nav class="umap-nav">
   <section>
-    <h1>
-      <a href="{% url "home" %}">{{ title }}</a>
-    </h1>
+    {% include "umap/branding.html" %}
   </section>
   <section>
     <ul>
@@ -39,7 +37,7 @@
   </section>
   <section>
     {% if not UMAP_READONLY %}
-      <a href="{% url "map_new" %}" class="button">{% trans "Create a map" %}</a>
+      <a href="{% url "map_new" %}" class="button button-primary">{% trans "Create a map" %}</a>
     {% endif %}
   </section>
 </nav>

umap/templates/umap/user_dashboard.html

@@ -5,15 +5,37 @@
 {% endblock head_title %}
 {% block maincontent %}
   {% trans "Search my maps" as placeholder %}
-  <div class="col wide">
+  <div class="row">
     <h2 class="section tabs">
-      <a class="selected" href="{% url 'user_dashboard' %}">{% trans "My Dashboard" %}</a> | <a href="{% url 'user_profile' %}">{% trans "My profile" %}</a>
+      <a class="selected" href="{% url 'user_dashboard' %}"
+      >{% blocktranslate with count=maps.paginator.count %}My Maps ({{ count }}){% endblocktranslate %}
+      </a>
+      <a href="{% url 'user_profile' %}">{% trans "My profile" %}</a>
     </h2>
-    {% include "umap/search_bar.html" with action=request.get_full_path placeholder=placeholder %}
   </div>
   <div class="wrapper">
     <div class="row">
-      {% if maps %}
+      <div class="table-header">
+        <form action="{{ request.get_full_path }}" method="get">
+          <span>
+            <label class="sr-only" for="q">{% translate "Map’s title" %}</label>
+            <input id="q" name="q" type="search"
+                   placeholder="{% translate "Map’s title" %}"
+                   value="{{ request.GET.q|default:"" }}" />
+          </span>
+          <input type="submit" value="{% trans "Search my maps" %}" />
+        </form>
+        {% if maps.object_list|length > 1 %}
+          <a href="{% url 'user_download' %}?{% spaceless %}
+          {% for map_inst in maps %}map_id={{ map_inst.pk }}{% if not forloop.last %}&{% endif %}{% endfor %}
+          {% endspaceless %}" class="button button-download"
+            >{% blocktranslate with count=maps.object_list|length trimmed %}
+              Download {{ count }} maps
+            {% endblocktranslate %}
+          </a>
+        {% endif %}
+      </div>
+      {% if maps or request.GET.q %}
         {% include "umap/map_table.html" %}
       {% else %}
         <div>
@@ -31,8 +53,9 @@
       const CACHE = {}
       for (const mapOpener of document.querySelectorAll("button.map-opener")) {
         mapOpener.addEventListener('click', (event) => {
-          event.target.nextElementSibling.showModal()
-          const mapId = event.target.dataset.mapId
+          const button = event.target.closest('button')
+          button.nextElementSibling.showModal()
+          const mapId = button.dataset.mapId
           if (!document.querySelector(`#${mapId}_target`).hasChildNodes()) {
             const previewSettings = JSON.parse(document.getElementById(mapId).textContent)
             const map = new L.U.Map(`${mapId}_target`, previewSettings)

umap/tests/base.py

@@ -81,7 +81,7 @@ class MapFactory(factory.django.DjangoModelFactory):
                     "attribution": "\xa9 OSM Contributors",
                     "maxZoom": 18,
                     "minZoom": 0,
-                    "url_template": "https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png",
+                    "url_template": "https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png",
                 },
                 "tilelayersControl": True,
                 "zoom": 7,

umap/tests/integration/conftest.py

@@ -0,0 +1,18 @@
+import pytest
+
+
+@pytest.fixture
+def login(context, settings, live_server):
+    def do_login(user):
+        # TODO use storage state to do login only once per session
+        # https://playwright.dev/python/docs/auth
+        settings.ENABLE_ACCOUNT_LOGIN = True
+        page = context.new_page()
+        page.goto(f"{live_server.url}/en/")
+        page.locator(".login").click()
+        page.get_by_placeholder("Username").fill(user.username)
+        page.get_by_placeholder("Password").fill("123123")
+        page.locator('#login_form input[type="submit"]').click()
+        return page
+
+    return do_login

umap/tests/integration/test_anonymous_owned_map.py

@@ -1,5 +1,4 @@
 import re
-from time import sleep
 
 import pytest
 from django.core.signing import get_cookie_signer
@@ -126,10 +125,14 @@ def test_anonymous_can_add_marker_on_editable_layer(
 
 def test_can_change_perms_after_create(tilelayer, live_server, page):
     page.goto(f"{live_server.url}/en/map/new")
+    # Create a layer
+    page.get_by_title("Manage layers").click()
+    page.get_by_role("button", name="Add a layer").click()
+    page.locator("input[name=name]").fill("Layer 1")
     save = page.get_by_role("button", name="Save")
     expect(save).to_be_visible()
-    save.click()
-    sleep(1)  # Let save ajax go back
+    with page.expect_response(re.compile(r".*/datalayer/create/.*")):
+        save.click()
     edit_permissions = page.get_by_title("Update permissions and editors")
     expect(edit_permissions).to_be_visible()
     edit_permissions.click()

umap/tests/integration/test_browser.py

@@ -1,8 +1,11 @@
+from copy import deepcopy
 from time import sleep
 
 import pytest
 from playwright.sync_api import expect
 
+from umap.models import Map
+
 from ..base import DataLayerFactory
 
 pytestmark = pytest.mark.django_db
@@ -13,12 +16,12 @@ DATALAYER_DATA = {
     "features": [
         {
             "type": "Feature",
-            "properties": {"name": "one point in france"},
+            "properties": {"name": "one point in france", "foo": "point"},
             "geometry": {"type": "Point", "coordinates": [3.339844, 46.920255]},
         },
         {
             "type": "Feature",
-            "properties": {"name": "one polygon in greenland"},
+            "properties": {"name": "one polygon in greenland", "foo": "polygon"},
             "geometry": {
                 "type": "Polygon",
                 "coordinates": [
@@ -34,7 +37,7 @@ DATALAYER_DATA = {
         },
         {
             "type": "Feature",
-            "properties": {"name": "one line in new zeland"},
+            "properties": {"name": "one line in new zeland", "foo": "line"},
             "geometry": {
                 "type": "LineString",
                 "coordinates": [
@@ -71,15 +74,32 @@ def test_data_browser_should_be_open(live_server, page, bootstrap, map):
 
 def test_data_browser_should_be_filterable(live_server, page, bootstrap, map):
     page.goto(f"{live_server.url}{map.get_absolute_url()}")
+    expect(page.get_by_title("Features in this layer: 3")).to_be_visible()
     markers = page.locator(".leaflet-marker-icon")
+    paths = page.locator(".leaflet-overlay-pane path")
     expect(markers).to_have_count(1)
-    el = page.locator("input[name='filter']")
-    expect(el).to_be_visible()
-    el.type("poly")
+    expect(paths).to_have_count(2)
+    filter_ = page.locator("input[name='filter']")
+    expect(filter_).to_be_visible()
+    filter_.type("poly")
+    expect(page.get_by_title("Features in this layer: 1/3")).to_be_visible()
+    expect(page.get_by_title("Features in this layer: 1/3")).to_have_text("1/3")
     expect(page.get_by_text("one point in france")).to_be_hidden()
     expect(page.get_by_text("one line in new zeland")).to_be_hidden()
     expect(page.get_by_text("one polygon in greenland")).to_be_visible()
     expect(markers).to_have_count(0)  # Hidden by filter
+    expect(paths).to_have_count(1)  # Only polygon
+    # Empty the filter
+    filter_.fill("")
+    filter_.blur()
+    expect(markers).to_have_count(1)
+    expect(paths).to_have_count(2)
+    filter_.type("point")
+    expect(page.get_by_text("one point in france")).to_be_visible()
+    expect(page.get_by_text("one line in new zeland")).to_be_hidden()
+    expect(page.get_by_text("one polygon in greenland")).to_be_hidden()
+    expect(markers).to_have_count(1)
+    expect(paths).to_have_count(0)
 
 
 def test_data_browser_can_show_only_visible_features(live_server, page, bootstrap, map):
@@ -131,3 +151,143 @@ def test_data_browser_bbox_limit_should_be_dynamic(live_server, page, bootstrap,
     expect(page.get_by_text("one point in france")).to_be_visible()
     expect(page.get_by_text("one polygon in greenland")).to_be_visible()
     expect(page.get_by_text("one line in new zeland")).to_be_hidden()
+
+
+def test_data_browser_bbox_filter_should_be_persistent(
+    live_server, page, bootstrap, map
+):
+    # Zoom on Europe
+    page.goto(f"{live_server.url}{map.get_absolute_url()}#6/51.000/2.000")
+    el = page.get_by_text("Current map view")
+    expect(el).to_be_visible()
+    el.click()
+    browser = page.locator("#umap-ui-container")
+    expect(browser.get_by_text("one point in france")).to_be_visible()
+    expect(browser.get_by_text("one line in new zeland")).to_be_hidden()
+    expect(browser.get_by_text("one polygon in greenland")).to_be_hidden()
+    # Close and reopen the browser to make sure this settings is persistent
+    close = browser.get_by_text("Close")
+    close.click()
+    expect(browser).to_be_hidden()
+    sleep(0.5)
+    expect(browser.get_by_text("one point in france")).to_be_hidden()
+    expect(browser.get_by_text("one line in new zeland")).to_be_hidden()
+    expect(browser.get_by_text("one polygon in greenland")).to_be_hidden()
+    page.get_by_title("See data layers").click()
+    page.get_by_role("button", name="Browse data").click()
+    expect(browser.get_by_text("one point in france")).to_be_visible()
+    expect(browser.get_by_text("one line in new zeland")).to_be_hidden()
+    expect(browser.get_by_text("one polygon in greenland")).to_be_hidden()
+
+
+def test_data_browser_bbox_filtered_is_clickable(live_server, page, bootstrap, map):
+    popup = page.locator(".leaflet-popup")
+    # Zoom on Europe
+    page.goto(f"{live_server.url}{map.get_absolute_url()}#6/51.000/2.000")
+    el = page.get_by_text("Current map view")
+    expect(el).to_be_visible()
+    el.click()
+    browser = page.locator("#umap-ui-container")
+    expect(browser.get_by_text("one point in france")).to_be_visible()
+    expect(browser.get_by_text("one line in new zeland")).to_be_hidden()
+    expect(browser.get_by_text("one polygon in greenland")).to_be_hidden()
+    expect(popup).to_be_hidden()
+    browser.get_by_text("one point in france").click()
+    expect(popup).to_be_visible()
+    expect(popup.get_by_text("one point in france")).to_be_visible()
+
+
+def test_data_browser_with_variable_in_name(live_server, page, bootstrap, map):
+    # Include a variable
+    map.settings["properties"]["labelKey"] = "{name} ({foo})"
+    map.save()
+    page.goto(f"{live_server.url}{map.get_absolute_url()}")
+    expect(page.get_by_text("one point in france (point)")).to_be_visible()
+    expect(page.get_by_text("one line in new zeland (line)")).to_be_visible()
+    expect(page.get_by_text("one polygon in greenland (polygon)")).to_be_visible()
+    filter_ = page.locator("input[name='filter']")
+    expect(filter_).to_be_visible()
+    filter_.type("foobar")  # Hide all
+    expect(page.get_by_text("one point in france (point)")).to_be_hidden()
+    expect(page.get_by_text("one line in new zeland (line)")).to_be_hidden()
+    expect(page.get_by_text("one polygon in greenland (polygon)")).to_be_hidden()
+    # Empty back the filter
+    filter_.fill("")
+    filter_.blur()
+    expect(page.get_by_text("one point in france (point)")).to_be_visible()
+    expect(page.get_by_text("one line in new zeland (line)")).to_be_visible()
+    expect(page.get_by_text("one polygon in greenland (polygon)")).to_be_visible()
+
+
+def test_can_open_databrowser_from_layers_list(live_server, map, page, bootstrap):
+    page.goto(f"{live_server.url}{map.get_absolute_url()}")
+    page.get_by_title("See data layers").click()
+    page.get_by_role("button", name="Browse data").click()
+    browser = page.locator(".umap-browse-data")
+    expect(browser).to_be_visible()
+    expect(browser.get_by_text("test datalayer")).to_be_visible()
+    expect(browser.get_by_text("one point in france")).to_be_visible()
+    expect(browser.get_by_text("one line in new zeland")).to_be_visible()
+    expect(browser.get_by_text("one polygon in greenland")).to_be_visible()
+
+
+def test_should_sort_features_in_natural_order(live_server, map, page):
+    map.settings["properties"]["onLoadPanel"] = "databrowser"
+    map.save()
+    datalayer_data = deepcopy(DATALAYER_DATA)
+    datalayer_data["features"][0]["properties"]["name"] = "9. a marker"
+    datalayer_data["features"][1]["properties"]["name"] = "1. a poly"
+    datalayer_data["features"][2]["properties"]["name"] = "100. a line"
+    DataLayerFactory(map=map, data=datalayer_data)
+    page.goto(f"{live_server.url}{map.get_absolute_url()}")
+    features = page.locator(".umap-browse-data li")
+    expect(features).to_have_count(3)
+    expect(features.nth(0)).to_have_text("1. a poly")
+    expect(features.nth(1)).to_have_text("9. a marker")
+    expect(features.nth(2)).to_have_text("100. a line")
+
+
+def test_should_redraw_list_on_feature_delete(live_server, map, page, bootstrap):
+    map.edit_status = Map.ANONYMOUS
+    map.save()
+    page.goto(f"{live_server.url}{map.get_absolute_url()}")
+    # Enable edit
+    page.get_by_role("button", name="Edit").click()
+    buttons = page.locator(".umap-browse-data li .feature-delete")
+    expect(buttons).to_have_count(3)
+    page.on("dialog", lambda dialog: dialog.accept())
+    buttons.nth(0).click()
+    expect(buttons).to_have_count(2)
+    page.get_by_role("button", name="Cancel edits").click()
+    expect(buttons).to_have_count(3)
+
+
+def test_should_show_header_for_display_on_load_false(
+    live_server, page, bootstrap, map, datalayer
+):
+    datalayer.settings["displayOnLoad"] = False
+    datalayer.settings["name"] = "This layer is not loaded"
+    datalayer.save()
+    page.goto(f"{live_server.url}{map.get_absolute_url()}")
+    browser = page.locator(".umap-browse-data")
+    expect(browser).to_be_visible()
+    expect(browser.get_by_text("This layer is not loaded")).to_be_visible()
+
+
+def test_should_use_color_variable(live_server, map, page):
+    map.settings["properties"]["onLoadPanel"] = "databrowser"
+    map.settings["properties"]["color"] = "{mycolor}"
+    map.save()
+    datalayer_data = deepcopy(DATALAYER_DATA)
+    datalayer_data["features"][0]["properties"]["mycolor"] = "DarkRed"
+    datalayer_data["features"][2]["properties"]["mycolor"] = "DarkGreen"
+    DataLayerFactory(map=map, data=datalayer_data)
+    page.goto(f"{live_server.url}{map.get_absolute_url()}")
+    features = page.locator(".umap-browse-data li .feature-color")
+    expect(features).to_have_count(3)
+    # DarkGreen
+    expect(features.nth(0)).to_have_css("background-color", "rgb(0, 100, 0)")
+    # DarkRed
+    expect(features.nth(1)).to_have_css("background-color", "rgb(139, 0, 0)")
+    # DarkBlue (default color)
+    expect(features.nth(2)).to_have_css("background-color", "rgb(0, 0, 139)")