114 lines
2.6 KiB
JavaScript
114 lines
2.6 KiB
JavaScript
var map = null;
|
|
// A map that just shows a bunch of markers, it can't change them
|
|
class MapWithMarkers extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
// Create a shadow DOM
|
|
this.attachShadow({mode: "open" });
|
|
|
|
// Initial render
|
|
this.render();
|
|
|
|
this._map = null;
|
|
|
|
// markers shown on the map. Should be none or 1, generally.
|
|
this._markers = [];
|
|
}
|
|
|
|
// Lifecycle: when element is added to the DOM
|
|
connectedCallback() {
|
|
// Initialize the map when the element is added to the DOM
|
|
setTimeout(() => this._initializeMap(), 0);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if (this._map) {
|
|
this._map.remove();
|
|
}
|
|
}
|
|
|
|
_initializeMap() {
|
|
console.log("Setting up the map...");
|
|
const apiKey = this.getAttribute("api-key");
|
|
const lat = Number(this.getAttribute('latitude') || 36.2);
|
|
const lng = Number(this.getAttribute('longitude') || -119.2);
|
|
const zoom = Number(this.getAttribute('zoom') || 15);
|
|
|
|
mapboxgl.accessToken = apiKey;
|
|
const mapElement = this.shadowRoot.querySelector("#map");
|
|
this._map = new mapboxgl.Map({
|
|
container: mapElement,
|
|
center: {
|
|
lat: lat,
|
|
lng: lng,
|
|
},
|
|
style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
|
zoom: zoom,
|
|
});
|
|
this._map.on("load", () => {
|
|
console.log("map loaded");
|
|
this.dispatchEvent(new CustomEvent('load'), {
|
|
bubbles: true,
|
|
composed: true, // Allows event to cross shadow DOM boundary
|
|
detail: {
|
|
map: this
|
|
}
|
|
});
|
|
});
|
|
this._markers = [];
|
|
}
|
|
|
|
// Initial render of component
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
|
|
<style>
|
|
.map-container {
|
|
background-color: #e9ecef;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
|
height: 500px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
#map {
|
|
height: 500px;
|
|
width:100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
#map img {
|
|
max-width: none;
|
|
min-width: 0px;
|
|
height: auto;
|
|
}
|
|
</style>
|
|
|
|
<div id="map-container" class="map-container">
|
|
<div id="map"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
jumpTo(args) {
|
|
this._map.jumpTo(args);
|
|
}
|
|
|
|
clearMarkers() {
|
|
this._markers.forEach((marker) => marker.remove());
|
|
}
|
|
addMarker(coords, color) {
|
|
console.log("Add marker", coords, color);
|
|
const el = document.createElement("div");
|
|
el.id = "marker";
|
|
const marker = new mapboxgl.Marker({
|
|
color: color,
|
|
scale: 1.5,
|
|
}).setLngLat(coords).addTo(this._map);
|
|
this._markers.push(marker);
|
|
}
|
|
}
|
|
|
|
customElements.define('map-with-markers', MapWithMarkers);
|