markusand / mapboxgl-legend

Add a legend to a mapbox-gl map by parsing layer layout & paint expressions.
ISC License
49 stars 13 forks source link

Support multiple maps per HTML page #11

Closed tituomin closed 1 year ago

tituomin commented 1 year ago

There is a problem when the legend is added to multiple maps per document.

If there are multiple maps per document, and if theses maps share a layer with the same id, scoping the legend pane querySelector to document instead of the container causes matches across the different maps.

The error thrown is this:

index.ts:122 Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.
    at http://localhost:5173/src/index.ts?t=1671003943193:94:25
    at Array.forEach (<anonymous>)
    at LegendControl._loadPanes (http://localhost:5173/src/index.ts?t=1671003943193:71:187)
    at Map.fire (http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:717:20)
    at Map.<anonymous> (http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:21086:59)
    at Map.fire (http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:717:20)
    at ei.fire (http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:722:132)
    at ei.update (http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:15664:246)
    at Map._render (http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:21568:115)
    at http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:21678:76

You can reproduce this by adding a second map to the demo html page:

https://github.com/kausaltech/mapboxgl-legend/commit/0d2809e9ce7dc8aa5f90430b841feaa05b0f82ad