You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.0 KiB
38 lines
1.0 KiB
import {PolymerElement} from '@polymer/polymer/polymer-element';
|
|
import {html} from '@polymer/polymer/lib/utils/html-tag';
|
|
import * as L from 'leaflet';
|
|
|
|
const openStreetMapLayer = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
|
const openStreetMapAttribution = `© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors`;
|
|
|
|
export class LeafletMap extends PolymerElement {
|
|
_attachDom(dom) {
|
|
// Do not use a shadow root
|
|
this.appendChild(dom);
|
|
}
|
|
|
|
render() {
|
|
return html``;
|
|
}
|
|
|
|
ready() {
|
|
super.ready();
|
|
|
|
this.map = L.map(this);
|
|
let tileLayer = L.tileLayer(openStreetMapLayer, {
|
|
attribution: openStreetMapAttribution,
|
|
maxZoom: 13,
|
|
});
|
|
tileLayer.addTo(this.map);
|
|
}
|
|
|
|
async setView(latitude, longitude, zoomLevel) {
|
|
this.map.setView([latitude, longitude], zoomLevel);
|
|
}
|
|
|
|
static get is() {
|
|
return 'leaflet-map';
|
|
}
|
|
}
|
|
|
|
customElements.define(LeafletMap.is, LeafletMap);
|