diff --git a/htmlpage/static/js/map-single-point.js b/htmlpage/static/js/map-single-point.js new file mode 100644 index 00000000..e191c68a --- /dev/null +++ b/htmlpage/static/js/map-single-point.js @@ -0,0 +1,118 @@ +var map = null; +// A map that just shows a single point location, and can't be moved +class MapSinglePoint extends HTMLElement { + constructor() { + super(); + + // Create a shadow DOM + this.attachShadow({mode: "open" }); + + // Initial render + this.render(); + + // markers shown on the map. Should be none or 1, generally. + this._markers = null; + } + + // 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"); + map = new mapboxgl.Map({ + container: mapElement, + center: { + lat: lat, + lng: lng, + }, + style: 'mapbox://styles/mapbox/streets-v12', // style URL + zoom: zoom, + }); + map.on("load", function() { + this.dispatchEvent(new CustomEvent('load'), { + bubbles: true, + composed: true, // Allows event to cross shadow DOM boundary + detail: { + map: this + } + }); + }); + } + + // Initial render of component + render() { + this.shadowRoot.innerHTML = ` + + +
Foo:Bar
None
+ {{ end }} +