Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

layer controls #54

Closed
waternumbers opened this issue Nov 9, 2024 · 4 comments · Fixed by #58
Closed

layer controls #54

waternumbers opened this issue Nov 9, 2024 · 4 comments · Fixed by #58

Comments

@waternumbers
Copy link

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/[email protected]/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/[email protected]/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
Copy link
Owner

@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
Copy link
Owner

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
Copy link
Owner

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.

@mo-martinwilson mo-martinwilson mentioned this issue Nov 27, 2024
Merged
@mo-martinwilson
Copy link
Contributor

Hi @waternumbers - thank you for posting an issue and highlighting a bug.

I took a look today and have hopefully found the fix for the control layers, PR#58 has now been merged and will be part of the v0.13.4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Resolve issue 54 control layers mo-martinwilson/leaflet-html
3 participants
@andrewgryan @waternumbers @mo-martinwilson