55 lines
1.4 KiB
Plaintext
55 lines
1.4 KiB
Plaintext
---
|
|
import type { string } from 'astro/zod'
|
|
import type { Marker } from 'leaflet'
|
|
|
|
export interface Props {
|
|
latitude: number
|
|
longitude: number
|
|
zoom: number
|
|
/** the DOM ID of a <div> element */
|
|
container: string
|
|
/** https://leafletjs.com/reference.html#tilelayer */
|
|
tileLayer: string
|
|
/** Most tile servers require attribution. */
|
|
attribution: string
|
|
containerstyle?: string
|
|
}
|
|
|
|
const { latitude, longitude, zoom, container, tileLayer, attribution, containerstyle = "height: 61.8vh", class } = Astro.props
|
|
---
|
|
|
|
<leaflet-map
|
|
data-latitude={latitude}
|
|
data-longitude={longitude}
|
|
data-zoom={zoom}
|
|
data-container={container}
|
|
data-tiles={tileLayer}
|
|
data-attribution={attribution}
|
|
data-containerstyle={containerstyle}
|
|
>
|
|
|
|
<div id={container} style={containerstyle}></div>
|
|
|
|
<script>
|
|
import L, { type LatLngTuple } from "leaflet"
|
|
import "leaflet/dist/leaflet"
|
|
import "leaflet/dist/leaflet.css"
|
|
|
|
|
|
class LeafletMap extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
|
|
const latlng = [Number(this.dataset.latitude), Number(this.dataset.longitude)] as LatLngTuple
|
|
|
|
var map = L.map(this.dataset.container as string).setView(latlng, Number(this.dataset.zoom))
|
|
L.tileLayer(
|
|
this.dataset.tiles as string,
|
|
{attribution: this.dataset.attribution}
|
|
).addTo(map)
|
|
var marker = L.marker([51.5, -0.09]).addTo(map);
|
|
}
|
|
}
|
|
|
|
window.customElements.define("leaflet-map", LeafletMap);
|
|
</script> |