ndf-elements
Version:
My collection of useful custom elements.
190 lines (168 loc) • 5.95 kB
HTML
<!--
DEPRECATED.
Easily embed a map powered by Leaflet.js - optionally with a GeoJSON feed.
Nick Freear, 27-Nov-2021.
-->
<meta name="robots" content="noindex">
<!--
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
-->
<template id="my-map-template">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<style>
.map-desc {
color: #333;
font: 1rem sans-serif;
max-width: 35rem;
margin: 0 auto;
}
#my-map {
border: 1px solid #ddd;
border-radius: .2rem;
height: 82vh; /* Was: 78 vh */
max-height: 540px;
min-height: 180px;
}
.my-loading {
font-size: 1.3rem;
margin: 1.3rem;
}
.my-icon {
height: 1.8rem ;
width: 1.8rem ;
}
.my-icon button {
border: none;
border-radius: .2rem;
background-color: transparent;
cursor: pointer;
padding: .2rem;
}
.my-button svg,
.my-icon svg {
width: 100%;
height: 100%;
}
.my-button use,
.my-icon use {
fill: var(--my-map-marker-color, navy);
}
</style>
<style type="X-deprecated">
#my-map.leaflet-container {
font-size: .95rem;
}
.my-loading {
font-size: 1.3rem;
margin: 1.3rem;
}
.leaflet-container .leaflet-pane .leaflet-popup-close-button {
border: 1px solid #ddd;
border-radius: 20%;
color: #bbb;
height: 20px;
width: 20px;
padding: 2px;
}
.leaflet-container .leaflet-pane .leaflet-popup-close-button:hover {
background: rgba(200, 200, 200, .6);
color: navy;
}
.leaflet-container .leaflet-popup-content {
margin: .55rem;
margin-right: 1.2rem;
}
.leaflet-container .leaflet-control-attribution {
font-size: .7rem;
}
.leaflet-popup-content-wrapper {
border-radius: .5rem;
}
.leaflet-overlay-pane path.leaflet-interactive {
stroke: var(--my-map-path-color, #3388ff);
stroke-width: var(--my-map-path-width, 3px);
}
/* Accessibility fixes */
:focus {
outline: 3px solid var(--my-map-focus-color, navy) ;
outline-offset: 1px;
}
.my-button.leaflet-control {
cursor: pointer;
height: 30px;
width: 30px;
}
.my-icon {
height: 1.8rem ;
width: 1.8rem ;
}
.my-icon button {
border: none;
border-radius: .2rem;
background-color: transparent;
cursor: pointer;
padding: .2rem;
}
.my-button svg,
.my-icon svg {
width: 100%;
height: 100%;
}
.my-button use,
.my-icon use {
fill: var(--my-map-marker-color, navy);
}
/* leaflet-messagebox.css */
.leaflet-control-messagebox {
display: none; /* Initially hidden */
border: 2px solid red;
background-color: white;
padding: 3px 10px;
}
</style>
<div id="desc" class="map-desc"><slot> Description of the map. </slot></div>
<div id="my-map" role="region" aria-label="Embedded Map" aria-describedby="desc">
<p class="my-loading">Loading map…</p>
</div>
<!-- <button id="locate-btn" aria-label="Locate me" class="my-button">
<svg viewBox="0 0 512 512"><use href="#fa-crosshairs"/></svg>
</button> -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" height="0" width="0">
<defs>
<!-- viewBox="0 0 384 512" -->
<path id="fa-location-dot" d=
"M168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2H168.3zM192 256C227.3 256 256 227.3 256 192C256 156.7 227.3 128 192 128C156.7 128 128 156.7 128 192C128 227.3 156.7 256 192 256z"
/>
<!-- viewBox="0 0 320 512" -->
<path id="fa-map-pin" d=
"M320 144C320 223.5 255.5 288 176 288C96.47 288 32 223.5 32 144C32 64.47 96.47 0 176 0C255.5 0 320 64.47 320 144zM192 64C192 55.16 184.8 48 176 48C122.1 48 80 90.98 80 144C80 152.8 87.16 160 96 160C104.8 160 112 152.8 112 144C112 108.7 140.7 80 176 80C184.8 80 192 72.84 192 64zM144 480V317.1C154.4 319 165.1 319.1 176 319.1C186.9 319.1 197.6 319 208 317.1V480C208 497.7 193.7 512 176 512C158.3 512 144 497.7 144 480z"
/>
<!-- viewBox="0 0 512 512" -->
<path id="fa-crosshairs" data-fa="location-crosshairs" d=
"M176 256C176 211.8 211.8 176 256 176C300.2 176 336 211.8 336 256C336 300.2 300.2 336 256 336C211.8 336 176 300.2 176 256zM256 0C273.7 0 288 14.33 288 32V66.65C368.4 80.14 431.9 143.6 445.3 224H480C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H445.3C431.9 368.4 368.4 431.9 288 445.3V480C288 497.7 273.7 512 256 512C238.3 512 224 497.7 224 480V445.3C143.6 431.9 80.14 368.4 66.65 288H32C14.33 288 0 273.7 0 256C0 238.3 14.33 224 32 224H66.65C80.14 143.6 143.6 80.14 224 66.65V32C224 14.33 238.3 0 256 0zM128 256C128 326.7 185.3 384 256 384C326.7 384 384 326.7 384 256C384 185.3 326.7 128 256 128C185.3 128 128 185.3 128 256z"
/>
</defs>
</svg>
</template>
<!--!
Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license (Commercial License)
Copyright 2022 Fonticons, Inc.
-->
<!--<pre>
NDF, 27-Nov-2021.
* https://leafletjs.com/examples/quick-start/
* https://openmaptiles.org/docs/website/leaflet/
* https://stackoverflow.com/questions/62571474/open-street-maps-default-tiles-leaflet
* https://latlong.net/place/the-tower-of-london-uk-81.html
* https://cse.google.com/cse?cx=partner-pub-1669785826962003:rppuucliysy&q=London&
* https://github.blog/2013-08-07-gist-meets-geojson/
* https://labs.mapbox.com/maki-icons/
* https://gist.github.com/nfreear/a0a21eacc7a728075a4d
* https://stackoverflow.com/questions/57091717/how-to-set-marker-icon-in-leaflet-map;
* https://gomakethings.com/getting-html-with-fetch-in-vanilla-js/
</pre>-->