Switch cell detail page to libremap rendering
This commit is contained in:
parent
9d0a4b4b88
commit
5b33b7ffcf
8 changed files with 295 additions and 200 deletions
167
html/static/js/map-cell.js
Normal file
167
html/static/js/map-cell.js
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
var map = null;
|
||||
// A map for showing a single h3 cell
|
||||
class MapCell extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// Create a shadow DOM
|
||||
this.attachShadow({ mode: "open" });
|
||||
|
||||
this._markers = [];
|
||||
// Initial render
|
||||
this.render();
|
||||
}
|
||||
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
|
||||
// Lifecycle: watch these attributes for changes
|
||||
static get observedAttributes() {
|
||||
return [
|
||||
"api-key",
|
||||
"latitude",
|
||||
"longitude",
|
||||
"organization-id",
|
||||
"tegola",
|
||||
"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 === "api-key") {
|
||||
this._apiKey = newValue;
|
||||
}
|
||||
|
||||
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 === "organization-id") {
|
||||
this._organizationID = newValue;
|
||||
}
|
||||
|
||||
if (name === "tegola") {
|
||||
this._tegola = newValue;
|
||||
}
|
||||
|
||||
if (name === "zoom") {
|
||||
this._map.setZoom(Number(newValue));
|
||||
}
|
||||
}
|
||||
|
||||
_initializeMap() {
|
||||
const geojson = JSON.parse(this.getAttribute("geojson"));
|
||||
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 mapElement = this.shadowRoot.querySelector("#map");
|
||||
this._map = new maplibregl.Map({
|
||||
container: mapElement,
|
||||
center: {
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
},
|
||||
style: "https://tiles.stadiamaps.com/styles/alidade_smooth.json",
|
||||
zoom: zoom,
|
||||
});
|
||||
const layer_id = "geojson-layer";
|
||||
const source_id = "geojson-source";
|
||||
this._map.on("load", () => {
|
||||
this._map.addSource(source_id, {
|
||||
data: geojson,
|
||||
type: "geojson",
|
||||
});
|
||||
this._map.addLayer({
|
||||
id: layer_id,
|
||||
interactive: false,
|
||||
paint: {
|
||||
"fill-opacity": 0.3,
|
||||
"fill-color": "#dc3545",
|
||||
},
|
||||
source: source_id,
|
||||
type: "fill",
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Initial render of component
|
||||
render() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
@import url("//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css");
|
||||
.map-container {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
||||
height: 500px;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
}
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 100%
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="map-container" class="map-container">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
jumpTo(args) {
|
||||
this._map.jumpTo(args);
|
||||
}
|
||||
|
||||
setMarker(coords) {
|
||||
console.log("Setting map marker", coords);
|
||||
this._map.jumpTo({
|
||||
center: coords,
|
||||
zoom: 14,
|
||||
});
|
||||
this._markers.forEach((marker) => marker.remove());
|
||||
|
||||
const marker = new maplibregl.Marker({
|
||||
color: "#FF0000",
|
||||
draggable: true,
|
||||
})
|
||||
.setLngLat(coords)
|
||||
.addTo(this._map);
|
||||
marker.on("dragend", function (e) {
|
||||
const markerDraggedEvent = new CustomEvent("markerdragend", {
|
||||
detail: {
|
||||
marker: marker,
|
||||
},
|
||||
});
|
||||
mapContainer.dispatchEvent(markerDraggedEvent);
|
||||
});
|
||||
this._markers = [marker];
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("map-cell", MapCell);
|
||||
|
|
@ -2,21 +2,11 @@
|
|||
|
||||
{{ define "title" }}Dash{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
{{ template "map" .MapData }}
|
||||
<style>
|
||||
.address-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
</style>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
|
||||
></script>
|
||||
<script src="/static/js/map-cell.js"></script>
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="container mt-4 mb-5">
|
||||
|
|
@ -30,9 +20,14 @@
|
|||
<!-- Map and Address Section - Side by Side -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-8">
|
||||
<div class="map-container">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
<map-cell
|
||||
geojson="{{ .MapData.GeoJSON|json }}"
|
||||
latitude="{{ .MapData.Center.Lat }}"
|
||||
longitude="{{ .MapData.Center.Lng }}"
|
||||
organization-id="{{ .User.Organization.ID }}"
|
||||
tegola="{{ .URL.Tegola }}"
|
||||
zoom="{{ .MapData.Zoom }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
{{ define "sync/component/map.html" }}
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js"></script>
|
||||
<link
|
||||
href="https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script>
|
||||
const geojson = JSON.parse({{.GeoJSON}})
|
||||
function addMarkers(map, markers) {
|
||||
for (let i = 0; i < markers.length; i++) {
|
||||
let marker = markers[i];
|
||||
marker.addTo(map);
|
||||
}
|
||||
}
|
||||
function mapMarkers() {
|
||||
const markers = [
|
||||
{{ range .Markers }}
|
||||
new mapboxgl.Marker().setLngLat([{{.LatLng.Lng}}, {{.LatLng.Lat}}])
|
||||
{{end}}
|
||||
];
|
||||
return markers;
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
console.log("Setting up the map...", geojson);
|
||||
mapboxgl.accessToken = {{ .MapboxToken }};
|
||||
const map = new mapboxgl.Map({
|
||||
container: "map",
|
||||
center: [{{.Center.Lng}}, {{.Center.Lat}}],
|
||||
style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
||||
zoom: {{.Zoom}},
|
||||
});
|
||||
map.on("load", function() {
|
||||
console.log("Map post-load...");
|
||||
addMarkers(map, mapMarkers());
|
||||
const sourceId = 'h3-hexes';
|
||||
const layerId = 'h3-hexes-layer';
|
||||
let source = map.getSource(sourceId);
|
||||
|
||||
if (!source) {
|
||||
map.addSource(sourceId, {
|
||||
type: 'geojson',
|
||||
data: geojson
|
||||
});
|
||||
map.addLayer({
|
||||
id: layerId,
|
||||
source: sourceId,
|
||||
type: 'fill',
|
||||
interactive: false,
|
||||
paint: {
|
||||
'fill-color': '#F00000',
|
||||
'fill-opacity': 0.3
|
||||
}
|
||||
});
|
||||
source = map.getSource(sourceId);
|
||||
}
|
||||
source.setData(geojson);
|
||||
|
||||
console.log("Map post-load done.");
|
||||
});
|
||||
console.log("Map init done.");
|
||||
}
|
||||
window.addEventListener("load", onLoad);
|
||||
</script>
|
||||
<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>
|
||||
{{ end }}
|
||||
|
|
@ -7,7 +7,6 @@
|
|||
src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
|
||||
></script>
|
||||
<script src="/static/js/map-aggregate.js"></script>
|
||||
<style></style>
|
||||
<script>
|
||||
function onLoad() {
|
||||
const map = document.querySelector("map-aggregate");
|
||||
|
|
@ -144,7 +143,6 @@
|
|||
<div class="row">
|
||||
<div class="col-12">
|
||||
<map-aggregate
|
||||
api-key="{{ .MapData.MapboxToken }}"
|
||||
latitude="36.3"
|
||||
longitude="-119.2"
|
||||
organization-id="{{ .User.Organization.ID }}"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue