layer controls - Githubissues

waternumbers commented 1 week ago

I've been having a look at generating maps based on this work and htmx - looks really promising :)

Based on the examples I've been struggling to see how to get a layer control. I would have expected the following to work:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
        rel="stylesheet"
  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
  crossorigin=""
    />
    <style>
    body {
    padding: 0;
    margin: 0;
}
html, body, l-map {
    height: 100vh;
    width: 100vw;
}
    l-map {
      display: block;
        isolation: isolate;
  z-index: 1;
}
</style>
</head>
<body>
<l-map center="[39.61, -105.02]" zoom="10" zoom-control="true">
<l-control-layers>
<l-base-layers>
        <l-tile-layer name="layer1" url-template="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"></l-tile-layer>
        <l-tile-layer name="layer2" url-template="https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png"></l-tile-layer>
    </l-base-layers>
    <l-overlay-layers>
      <l-layer-group name="Cities">
        <l-marker lat-lng="[39.61, -105.02]">
          <l-popup content="This is Littleton, CO."></l-popup>
        </l-marker>
        <l-marker lat-lng="[39.74, -104.99]">
          <l-popup content="This is Denver, CO."></l-popup>
        </l-marker>
        <l-marker lat-lng="[39.73, -104.8]">
          <l-popup content="This is Aurora, CO."></l-popup>
        </l-marker>
        <l-marker lat-lng="[39.77, -105.23]">
          <l-popup content="This is Golden, CO."></l-popup>
        </l-marker>
      </l-layer-group>
    </l-overlay-layers>
    </l-control-layers>
</l-map>

</body>
<script type="importmap">
  {
    "imports": {
      "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js",
      "leaflet-html": "https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js"
    }
  }
</script>
<script type="module">
  import "leaflet-html";
</script>

</html>

This generates a map showing layer2 and the markers, but no layer control. The browser console reports the error

Uncaught Error: The provided object is not a Layer.
    addLayer https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js:3034
    connectedCallback https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js:6543
    connectedCallback https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js:6356
    lr https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js:8137
    <anonymous> https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js:8138

I get the same error using examples/index.html having substituted the same script import statements used above. The same error also appears loading https://andrewgryan.github.io/leaflet-html/ - which makes me think there may be a issue?

andrewgryan commented 1 week ago

@waternumbers I think you are right, this is a regression that was introduced a while back, #34 was created to remind me to fix it. I'll create a PR to deal with it.

andrewgryan commented 1 week ago

I've opened #55 to address the default zoom-control behaviour.

As for the import error in examples/index.html and the importmap usage. I believe this could be related to and ultimately resolved by the switch to using vite instead of microbundle as the build tool. I will revisit the docs and examples to understand the recommended approach to client side imports.

andrewgryan commented 1 week ago

Actually, re-reading your initial comment, it's not the zoom controls but the layer controls that you were referring to. I'll take a look into it.

andrewgryan / leaflet-html

layer controls #54