Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Move standing woter to use libremap instead of mapbox

Browse source
This commit is contained in:
Eli Ribble 2026-03-03 20:27:33 +00:00
parent 6aa7fa60b4
commit 38906db816
No known key found for this signature in database
4 changed files with 57 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

1
html/static/js/map-cell.js
View file

@ -1,4 +1,3 @@
var map = null;
// A map for showing a single h3 cell
class MapCell extends HTMLElement {
constructor() {

79
html/static/js/map-locator.js
View file

@ -5,7 +5,7 @@ class MapLocator extends HTMLElement {
super();
// Create a shadow DOM
this.attachShadow({mode: "open" });
this.attachShadow({ mode: "open" });
// Initial render
this.render();
@ -29,66 +29,71 @@ class MapLocator extends HTMLElement {
_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);
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({
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/alidade_smooth.json",
zoom: zoom,
});
/*
map.addControl(new mapboxgl.GeolocateControl({
map.addControl(new maplibregl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true,
showUserHeading: true
}));
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new maplibregl.NavigationControl());
*/
this._map.on("click", (e) => {
e.preventDefault();
console.log("internal click", e);
this.dispatchEvent(new CustomEvent("click", {
bubbles: true,
composed: true, // Allows event to cross shadow DOM boundary
detail: {
lngLat: e.lngLat,
},
}));
this.dispatchEvent(
new CustomEvent("click", {
bubbles: true,
composed: true, // Allows event to cross shadow DOM boundary
detail: {
lngLat: e.lngLat,
},
}),
);
});
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.dispatchEvent(
new CustomEvent("load", {
bubbles: true,
composed: true, // Allows event to cross shadow DOM boundary
detail: {
map: this,
},
}),
);
});
this._map.on("zoomend", (e) => {
this.dispatchEvent(new CustomEvent("zoomend", {
bubbles: true,
composed: true,
detail: e,
}));
this.dispatchEvent(
new CustomEvent("zoomend", {
bubbles: true,
composed: true,
detail: e,
}),
);
});
}
// 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>
@import url("//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css");
.map-container {
background-color: #e9ecef;
border-radius: 10px;
@ -133,15 +138,17 @@ class MapLocator extends HTMLElement {
console.log("Setting map marker", coords);
this._markers.forEach((marker) => marker.remove());
const marker = new mapboxgl.Marker({
const marker = new maplibregl.Marker({
color: "#FF0000",
draggable: true
}).setLngLat(coords).addTo(this._map);
marker.on('dragend', (e) => {
draggable: true,
})
.setLngLat(coords)
.addTo(this._map);
marker.on("dragend", (e) => {
const markerDraggedEvent = new CustomEvent("markerdragend", {
detail: {
marker: marker
}
marker: marker,
},
});
this.dispatchEvent(markerDraggedEvent);
});
@ -149,4 +156,4 @@ class MapLocator extends HTMLElement {
}
}
customElements.define('map-locator', MapLocator);
customElements.define("map-locator", MapLocator);