Skip to content

Commit

Permalink
switch to using Custom Elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrewgryan
andrewgryan committed May 7, 2024
1 parent 834840e commit 21afcf8
Show file tree
Hide file tree
Showing 16 changed files with 455 additions and 305 deletions.
72 changes: 36 additions & 36 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ Include both Leaflet and Leaflet HTML in script tags in the head of the document
And remember to style the various map container elements with enough size to be visible.

```css
[data-leaflet-html] {
l-map {
display: block;
block-size: 100vh;
}
```
Expand All @@ -43,41 +44,40 @@ The HTML in `example/index.html` is a simple demonstration of the API.

```html
<!-- Note: Leaflet JS/CSS must be included in <head> and [data-leaflet-html] styled to an appropriate size. -->
<div data-leaflet-html data-center="[39.61, -105.02]" data-zoom="10">
<div data-control-layers>
<div data-base-maps>
<div data-tile-layer
data-name="OpenStreetMap"
data-url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
data-attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
data-max-zoom="12"
></div>
<div data-tile-layer
data-name="Toner"
data-url-template="https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.png"
data-attribution=''
data-max-zoom="12"
data-show
></div>
</div>
<div data-overlay-maps>
<div data-layer-group data-name="Cities">
<div data-marker data-lat-lng="[39.61, -105.02]">
<div data-popup data-content="This is Littleton, CO."></div>
</div>
<div data-marker data-lat-lng="[39.74, -104.99]">
<div data-popup data-content="This is Denver, CO."></div>
</div>
<div data-marker data-lat-lng="[39.73, -104.8]">
<div data-popup data-content="This is Aurora, CO."></div>
</div>
<div data-marker data-lat-lng="[39.77, -105.23]">
<div data-popup data-content="This is Golden, CO."></div>
</div>
</div>
</div>
</div>
</div>
<l-map center="[39.61, -105.02]" zoom="10">
<l-control-layers>
<l-base-layers>
<l-tile-layer
name="OpenStreetMap"
url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
max-zoom="12"
></l-tile-layer>
<l-tile-layer
name="Toner"
url-template="https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.png"
attribution=''
max-zoom="12"
></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>
```

## Build
Expand Down
108 changes: 58 additions & 50 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,89 +15,97 @@
crossorigin=""
></script>
<script
src="/dist/leaflet-html.umd.js"
src="/src/index.js"
type="module"
defer
></script>
<style>
* {
margin: 0;
}

[data-leaflet-html] {
l-map {
block-size: 100vh;
isolation: isolate;
z-index: 1;
}

#btn {
.btn-group {
z-index: 2;
position: absolute;
bottom: 0;
left: 0;
margin: 1rem;
}

button {
padding: 1rem;
background-color: #337;
color: white;
border-radius: 0.25rem;
cursor: pointer;
font-size: 1.2rem;
}

body {
display: grid;
grid-template-columns: 1fr 1fr;
}
</style>
</head>
<body>
<div data-leaflet-html data-center="[39.61, -105.02]" data-zoom="10">
<div data-control-layers>
<div data-base-maps>
<div
data-tile-layer
data-name="OpenStreetMap"
data-url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
data-attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
data-max-zoom="12"
></div>
<div
data-tile-layer
data-name="CartoDB_Voyager"
data-url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
data-attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
data-max-zoom="20"
data-subdomains="abcd"
data-show
></div>
</div>
<div data-overlay-maps>
<div data-layer-group data-name="Cities">
<div data-marker data-lat-lng="[39.61, -105.02]">
<div data-popup data-content="This is Littleton, CO."></div>
</div>
<div data-marker data-lat-lng="[39.74, -104.99]">
<div data-popup data-content="This is Denver, CO."></div>
</div>
<div data-marker data-lat-lng="[39.73, -104.8]" data-opacity="0.7">
<div data-popup data-content="This is Aurora, CO."></div>
</div>
<div data-marker data-lat-lng="[39.77, -105.23]">
<div data-popup data-content="This is Golden, CO."></div>
</div>
</div>
</div>
</div>
<l-map center="[39.61, -105.02]" zoom="10">
<l-control-layers>
<l-base-layers>
<l-tile-layer
name="OpenStreetMap"
url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
max-zoom="12"
></l-tile-layer>
<l-tile-layer
name="CartoDB_Voyager"
url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
max-zoom="20"
subdomains="abcd"
></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]" opacity="0.7">
<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>
<div class="btn-group">
<button id="btn-move">Move Denver</button>
<button id="btn-remove">Remove Denver</button>
</div>
<button id="btn">Add a city</button>
<script type="module">
// Manual tests
document.getElementById("btn").addEventListener("click", () => {
// New city
let el = document.querySelector('[data-name="Cities"]');
const city = document.createElement("div");
city.dataset.marker = "";
city.dataset.latLng = "[39.60, -105.02]";
el.appendChild(city);

document.getElementById("btn-remove").addEventListener("click", () => {
// Remove Denver
el = document.querySelector('[data-lat-lng="[39.74, -104.99]"]');
let el = document.querySelector('[lat-lng="[39.74, -104.99]"]');
el.remove();
});
document.getElementById("btn-move").addEventListener("click", () => {
// Move Denver
let el = document.querySelector('[lat-lng="[39.74, -104.99]"]');
el.setAttribute("lat-lng", "[39.74, -104.89]");
el.setAttribute("opacity", "0.5");
});
</script>
</body>
</html>
69 changes: 34 additions & 35 deletions example/overlays/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,60 +15,59 @@
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<script src="/dist/leaflet-html.umd.js"></script>
<script type="module" src="/src/index.js"></script>
<style>
* {
margin: 0;
}

[data-leaflet-html] {
l-map {
display: block;
block-size: 100vh;
outline: 1px solid hotpink;
isolation: isolate;
z-index: 1;
}
</style>
</head>
<body>
<div data-leaflet-html data-center="[37.8, -96]" data-zoom="4">
<div
data-lat-lng-bounds
data-bounds="[[40.799311, -74.118464], [40.68202047785919, -74.33]]"
></div>
<div
data-tile-layer
data-name="OpenStreetMap"
data-url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
data-attribution=""
></div>
<l-map center="[37.8, -96]" zoom="4">
<l-lat-lng-bounds
bounds="[[40.799311, -74.118464], [40.68202047785919, -74.33]]"
></l-lat-lng-bounds>
<l-tile-layer
name="OpenStreetMap"
url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution=""
></l-tile-layer>
<!-- Newark -->
<div
data-image-overlay
data-url="https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
data-bounds="[[40.799311, -74.118464], [40.68202047785919, -74.33]]"
data-opacity="0.8"
data-interactive="true"
data-error-overlay-url="https://cdn-icons-png.flaticon.com/512/110/110686.png"
data-alt="Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection."
></div>
<l-image-overlay
url="https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
bounds="[[40.799311, -74.118464], [40.68202047785919, -74.33]]"
opacity="0.8"
interactive="true"
error-overlay-url="https://cdn-icons-png.flaticon.com/512/110/110686.png"
alt="Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection."
></l-image-overlay>
<!-- Hurricane Patricia -->
<div
data-video-overlay
data-url='["https://www.mapbox.com/bites/00188/patricia_nasa.webm", "https://www.mapbox.com/bites/00188/patricia_nasa.mp4"]'
data-error-overlay-url="https://cdn-icons-png.flaticon.com/512/110/110686.png"
data-bounds="[[32, -130], [13, -100]]"
></div>
</div>
<l-video-overlay
url='["https://www.mapbox.com/bites/00188/patricia_nasa.webm", "https://www.mapbox.com/bites/00188/patricia_nasa.mp4"]'
error-overlay-url="https://cdn-icons-png.flaticon.com/512/110/110686.png"
bounds="[[32, -130], [13, -100]]"
></l-video-overlay>
</l-map>

<script>
el = document.querySelector("[data-lat-lng-bounds]")
el = document.querySelector("l-lat-lng-bounds")
let counter = 0
document.body.addEventListener("click", () => {
console.log("click")
el.setAttribute("method", "flyToBounds")
if (counter === 0) {
const { bounds } = document.querySelector("[data-video-overlay]").dataset
el.dataset.bounds = bounds
const bounds = document.querySelector("l-video-overlay").getAttribute("bounds")
el.setAttribute("bounds", bounds)
} else {
const { bounds } = document.querySelector("[data-image-overlay]").dataset
el.dataset.bounds = bounds
const bounds = document.querySelector("l-image-overlay").getAttribute("bounds")
el.setAttribute("bounds", bounds)
}
counter += 1
})
Expand Down
3 changes: 3 additions & 0 deletions src/events.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const mapAddTo = "map:addTo"
export const popupAdd = "popup:add"
export const layerRemove = "layer:remove"
Loading

0 comments on commit 21afcf8

Please sign in to comment.