diff --git a/html/static/js/map-multipoint.js b/html/static/js/map-multipoint.js index 6c993a03..8c22aaea 100644 --- a/html/static/js/map-multipoint.js +++ b/html/static/js/map-multipoint.js @@ -6,7 +6,7 @@ class MapMultipoint extends HTMLElement { super(); // Create a shadow DOM - this.attachShadow({mode: "open" }); + this.attachShadow({ mode: "open" }); // Initial render this.render(); @@ -30,118 +30,61 @@ class MapMultipoint extends HTMLElement { // Lifecycle: watch these attributes for changes static get observedAttributes() { - return ['api-key', 'latitude', 'longitude', 'zoom']; + return ["api-key", "latitude", "longitude", "zoom"]; } // Lifecycle: respond to attribute changes attributeChangedCallback(name, oldValue, newValue) { // Only handle if map exists and values actually changed if (!this._map || oldValue === newValue) return; - - if (name === 'latitude' || name === 'longitude') { - if (this.hasAttribute('latitude') && this.hasAttribute('longitude')) { - const lat = Number(this.getAttribute('latitude')); - const lng = Number(this.getAttribute('longitude')); + + if (name === "latitude" || name === "longitude") { + if (this.hasAttribute("latitude") && this.hasAttribute("longitude")) { + const lat = Number(this.getAttribute("latitude")); + const lng = Number(this.getAttribute("longitude")); this._map.setCenter([lat, lng]); } } - if (name === 'zoom') { + if (name === "zoom") { this._map.setZoom(Number(newValue)); } } - + _initializeMap() { const apiKey = this.getAttribute("api-key"); - const lat = Number(this.getAttribute('latitude') || 36.2); - const lng = Number(this.getAttribute('longitude') || -119.2); + const lat = Number(this.getAttribute("latitude") || 36.2); + const lng = Number(this.getAttribute("longitude") || -119.2); const organization_id = Number(this.getAttribute("organization-id") || 0); - const tegola = this.getAttribute("tegola") - const zoom = Number(this.getAttribute('zoom') || 15); + const tegola = this.getAttribute("tegola"); + const zoom = Number(this.getAttribute("zoom") || 15); - mapboxgl.accessToken = apiKey; const mapElement = this.shadowRoot.querySelector("#map"); - this._map = new mapboxgl.Map({ + this._map = new maplibregl.Map({ container: mapElement, center: { lat: lat, lng: lng, }, - style: 'mapbox://styles/mapbox/streets-v12', // style URL + style: "https://tiles.stadiamaps.com/styles/osm_bright.json", zoom: zoom, }); - /*this._map.addControl(new mapboxgl.GeolocateControl({ + /*this._map.addControl(new maplibregl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true, showUserHeading: true })); - this._map.addControl(new mapboxgl.NavigationControl()); + this._map.addControl(new maplibregl.NavigationControl()); */ this._map.on("load", () => { - this.dispatchEvent(new CustomEvent('load'), { + this.dispatchEvent(new CustomEvent("load"), { bubbles: true, composed: true, // Allows event to cross shadow DOM boundary detail: { - map: this - } - }); - }); - } - - async _fetchAddressSuggestions(text) { - try { - const url = `https://api.mapbox.com/search/geocode/v6/forward?q=${encodeURIComponent(text)}&access_token=${this._apiKey}`; - - const response = await fetch(url); - const data = await response.json(); - return data; - } catch (error) { - console.error('Error fetching geocoding suggestions:', error); - } - } - - _renderSuggestions(suggestions) { - console.log("Rendering suggestions", suggestions); - this._suggestions.innerHTML = suggestions.map((item, index) => { - if (item.properties.place_formatted != "") { - return ` -
-
${item.properties.name || item.properties.full_address}
-
${item.properties.place_formatted}
-
` - } else { - return ` -
-
${item.properties.name || item.properties.full_address}
-
${item.properties.place_formatted}
-
` - } - }).join(''); - - // Add click listeners to suggestions - this.shadowRoot.querySelectorAll('.suggestion-item').forEach(el => { - el.addEventListener('click', e => { - const index = parseInt(el.dataset.index); - const suggestion = suggestions[index]; - this.value = suggestion.properties.full_address; - this._suggestions.innerHTML = ''; - - // Dispatch custom event - this.dispatchEvent(new CustomEvent('address-selected', { - bubbles: true, - composed: true, // Allows event to cross shadow DOM boundary - detail: { - location: suggestion - } - })); + map: this, + }, }); }); } @@ -150,28 +93,9 @@ class MapMultipoint extends HTMLElement { render() { this.shadowRoot.innerHTML = ` @@ -200,33 +124,9 @@ class MapMultipoint extends HTMLElement { return this._map.queryRenderedFeatures(a); } - setMarker(coords) { - console.log("Setting map marker", coords); - this._map.jumpTo({ - center: coords, - zoom: 14, - }); - this._markers.forEach((marker) => marker.remove()); - - const marker = new mapboxgl.Marker({ - color: "#FF0000", - draggable: true - }).setLngLat(coords).addTo(map); - marker.on('dragend', function(e) { - const markerDraggedEvent = new CustomEvent("markerdragend", { - detail: { - marker: marker - } - }); - mapContainer.dispatchEvent(markerDraggedEvent); - }); - this._markers = [marker]; - } - SetLayoutProperty(layout, property, value) { return this._map.setLayoutProperty(layout, property, value); } - } -customElements.define('map-multipoint', MapMultipoint); +customElements.define("map-multipoint", MapMultipoint); diff --git a/html/template/rmo/status.html b/html/template/rmo/status.html index 8c605f50..c879cd3f 100644 --- a/html/template/rmo/status.html +++ b/html/template/rmo/status.html @@ -2,7 +2,10 @@ {{ define "title" }}Status{{ end }} {{ define "extraheader" }} - + @@ -237,13 +240,16 @@ document.addEventListener('DOMContentLoaded', onLoad);
Reports Map
- +
+ +
diff --git a/html/template/sync/intelligence-root.html b/html/template/sync/intelligence-root.html index 56d9e7c1..0a280155 100644 --- a/html/template/sync/intelligence-root.html +++ b/html/template/sync/intelligence-root.html @@ -6,7 +6,7 @@ type="text/javascript" src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js" > - +