[openstreetmap/openstreetmap-website] Split interactive history layer into areas and borders above areas (PR #5963)

[Anton Khorev]

@AntonKhorev commented on this pull request.



>      this._highlightLayer.clearLayers();
 
     for (const changeset of this._changesets.values()) {
-      const rect = L.rectangle(changeset.bounds, this._getInteractiveStyle(changeset));
+      const rect = L.rectangle(changeset.bounds, this._getAreaStyle(changeset));
+      rect.id = changeset.id;
+      rect.addTo(this._areaLayer);
+    }
+
+    for (const changeset of this._changesets.values()) {
+      const rect = L.rectangle(changeset.bounds, this._getBorderStyle(changeset));

We can't because the order of `<path>` elements inside Leaflet's svg layer depends on the order of `addTo` calls. Even if the rectangles are added to different feture groups, their `<path>`s end up in the same `<svg>` element.

The alternative is to put feature grous in different [panes](https://leafletjs.com/reference.html#map-pane), but that becomes more complicated, and I'll need even more panes [later](https://github.com/openstreetmap/openstreetmap-website/pull/5964).

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/5963#discussion_r2067480715
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/5963/review/2805164558 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20250429/d7bcf468/attachment-0001.htm>