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

Switch file upload page to not use map-libre-test

Browse source 
That libre test was something I built when doing the changeover to
stadia maps. It's now pretty well baked, so it's better to just use it.
This commit is contained in:
Eli Ribble 2026-03-19 03:30:01 +00:00
parent 434746aa99
commit c039c70e3e
No known key found for this signature in database
2 changed files with 10 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

148
html/static/js/map-libre-test.js
View file

@ -1,148 +0,0 @@
// A test of maplibre-gl in a custom element
class MapLibreTest extends HTMLElement {
constructor() {
super();
// Create a shadow DOM
this.attachShadow({ mode: "open" });
// Initial render
this.render();
this._map = null;
// markers shown on the map
this._markers = [];
}
// 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() {
const centroid = JSON.parse(this.getAttribute("centroid"));
const organization_id = this.getAttribute("organization-id");
const tegola = this.getAttribute("tegola");
const xmin = parseFloat(this.getAttribute("xmin"));
const ymin = parseFloat(this.getAttribute("ymin"));
const xmax = parseFloat(this.getAttribute("xmax"));
const ymax = parseFloat(this.getAttribute("ymax"));
const bounds = [
[xmin, ymin],
[xmax, ymax],
];
const mapElement = this.shadowRoot.querySelector("#map");
this._map = new maplibregl.Map({
center: centroid.coordinates,
container: mapElement,
style: "https://tiles.stadiamaps.com/styles/alidade_smooth.json", // Style URL; see our documentation for more options
}).fitBounds(bounds, {
padding: { top: 10, bottom: 10, left: 10, right: 10 },
});
this._map.on("load", () => {
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 = `
<style>
@import url('//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css');
.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;
width:100%;
margin-bottom: 10px;
}
#map img {
max-width: none;
min-width: 0px;
height: auto;
}
</style>
<div id="map-container" class="map-container">
<div id="map"></div>
</div>
`;
}
addLayer(a) {
return this._map.addLayer(a);
}
addSource(a, b) {
return this._map.addSource(a, b);
}
jumpTo(args) {
return this._map.jumpTo(args);
}
on(a, b) {
return this._map.on(a, b);
}
once(a, b) {
return this._map.once(a, b);
}
queryRenderedFeatures(a) {
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-libre-test", MapLibreTest);

21
html/template/sync/upload-by-id.html
View file

@ -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-libre-test.js"></script>
<script src="/static/js/map-multipoint.js"></script>
<script>
const CSV_FILE_ID={{.C.CSVFileID}};
const ORG_ID={{.Organization.ID}};
@ -26,7 +26,7 @@ function handleShowIssuesOnly() {
}
}
function onLoad() {
const map = document.querySelector("map-libre-test");
const map = document.querySelector("map-multipoint");
map.addEventListener("load", (event) => {
map.addSource('tegola-nidus', {
'type': 'vector',
@ -108,16 +108,15 @@ document.addEventListener('DOMContentLoaded', onLoad);
</div>
<div class="card mb-4">
<map-libre-test
centroid="{{ if .Organization.ServiceAreaCentroidGeojson.IsValue }}
{{ .Organization.ServiceAreaCentroidGeojson.MustGet|json }}
{{ end }}"
<map-multipoint
id="map"
organization-id="{{ .Organization.ID }}"
xmin="{{ .Organization.ServiceAreaXmin.GetOr 0 }}"
ymin="{{ .Organization.ServiceAreaYmin.GetOr 0 }}"
xmax="{{ .Organization.ServiceAreaXmax.GetOr 0 }}"
ymax="{{ .Organization.ServiceAreaYmax.GetOr 0 }}"
></map-libre-test>
tegola="{{ .URL.Tegola }}"
xmin="{{ .Organization.ServiceArea.Min.X }}"
ymin="{{ .Organization.ServiceArea.Min.Y }}"
xmax="{{ .Organization.ServiceArea.Max.X }}"
ymax="{{ .Organization.ServiceArea.Max.Y }}"
></map-multipoint>
</div>
<div class="card mb-4">
<div