Move multipoint map to use maplibregl
This commit is contained in:
parent
b5636af514
commit
61d9a21636
3 changed files with 38 additions and 133 deletions
|
|
@ -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 `
|
||||
<div class="suggestion-item list-group-item"
|
||||
data-index="${index}"
|
||||
data-lat="${item.geometry.coordinates[1]}"
|
||||
data-lng="${item.geometry.coordinates[0]}">
|
||||
<div class="main-address">${item.properties.name || item.properties.full_address}</div>
|
||||
<div class="place-info">${item.properties.place_formatted}</div>
|
||||
</div>`
|
||||
} else {
|
||||
return `
|
||||
<div class="suggestion-item list-group-item"
|
||||
data-index="${index}"
|
||||
data-lat="${item.coordinates.lat}"
|
||||
data-lng="${item.coordinates.lng}">
|
||||
<div class="main-address">${item.properties.name || item.properties.full_address}</div>
|
||||
<div class="place-info">${item.properties.place_formatted}</div>
|
||||
</div>`
|
||||
}
|
||||
}).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 = `
|
||||
<style>
|
||||
.mapboxgl-ctrl-bottom-right {
|
||||
display: none;
|
||||
}
|
||||
.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;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#map img {
|
||||
max-width: none;
|
||||
min-width: 0px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,10 @@
|
|||
|
||||
{{ define "title" }}Status{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js"></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
|
||||
></script>
|
||||
<script src="/static/js/address-or-report-suggestion.js"></script>
|
||||
<script src="/static/js/geocode.js"></script>
|
||||
<script src="/static/js/location.js"></script>
|
||||
|
|
@ -237,13 +240,16 @@ document.addEventListener('DOMContentLoaded', onLoad);
|
|||
<h5 class="mb-0"><i class="bi bi-pin-map-fill me-2"></i>Reports Map</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<map-multipoint
|
||||
api-key="{{ .MapboxToken }}"
|
||||
latitude="36.3"
|
||||
longitude="-119.2"
|
||||
tegola="{{ .URL.Tegola }}"
|
||||
zoom="9"
|
||||
></map-multipoint>
|
||||
<div class="map-container">
|
||||
<map-multipoint
|
||||
api-key="{{ .MapboxToken }}"
|
||||
id="map"
|
||||
latitude="36.3"
|
||||
longitude="-119.2"
|
||||
tegola="{{ .URL.Tegola }}"
|
||||
zoom="9"
|
||||
></map-multipoint>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
type="text/javascript"
|
||||
src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
|
||||
></script>
|
||||
<script src="/static/js/map-aggregate.js"></script>
|
||||
<script src="/static/js/map-multipoint.js"></script>
|
||||
<script
|
||||
defer
|
||||
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
|
||||
|
|
@ -309,8 +309,7 @@
|
|||
</div>
|
||||
<div class="card-body">
|
||||
<div class="workbench-map mb-3">
|
||||
Map Placeholder<br />
|
||||
H3 Cells • Parcels • Signal Density • Lead Clusters
|
||||
<map-multipoint id="map"></map-multipoint>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue