-
Notifications
You must be signed in to change notification settings - Fork 0
/
leaflet-map-element.js
33 lines (31 loc) · 1.26 KB
/
leaflet-map-element.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
class LeafletMapElement extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<style>
#map {
height: 700px;
}
</style>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
`;
}
connectedCallback() {
this.map = L.map(this.shadowRoot.querySelector('#map')).setView([50.792073, -1.063223], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
L.marker([50.781429, -1.066585]).addTo(this.map).bindPopup('This is central Southsea ༆');
this.map.on('click', (e) => {
alert("You clicked the map at " + e.latlng);
});
}
}
customElements.define('leaflet-map', LeafletMapElement);