Get search map overlay working again.
This commit is contained in:
parent
f4a88623af
commit
9d2253a4a2
4 changed files with 243 additions and 27 deletions
|
|
@ -206,10 +206,3 @@ class MapLocator extends HTMLElement {
|
|||
}
|
||||
|
||||
customElements.define('map-locator', MapLocator);
|
||||
|
||||
|
||||
|
||||
function mapLoad(MAPBOX_ACCESS_TOKEN) {
|
||||
return new Promise((resolve, reject) => {
|
||||
});
|
||||
}
|
||||
|
|
|
|||
220
htmlpage/static/js/map-multipoint.js
Normal file
220
htmlpage/static/js/map-multipoint.js
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
var map = null;
|
||||
// A map that shows multiple single point locations.
|
||||
// Points have additional detail popups.
|
||||
class MapMultipoint extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// Create a shadow DOM
|
||||
this.attachShadow({mode: "open" });
|
||||
|
||||
// Initial render
|
||||
this.render();
|
||||
|
||||
this._map = null;
|
||||
// markers shown on the map. Should be none or 1, generally.
|
||||
this._markers = null;
|
||||
}
|
||||
|
||||
// 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', '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'));
|
||||
this._map.setCenter([lat, lng]);
|
||||
}
|
||||
}
|
||||
|
||||
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 organization_id = Number(this.getAttribute("organization-id") || 0);
|
||||
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({
|
||||
container: mapElement,
|
||||
center: {
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
},
|
||||
style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
||||
zoom: zoom,
|
||||
});
|
||||
this._map.addControl(new mapboxgl.GeolocateControl({
|
||||
positionOptions: {
|
||||
enableHighAccuracy: true
|
||||
},
|
||||
trackUserLocation: true,
|
||||
showUserHeading: true
|
||||
}));
|
||||
this._map.addControl(new mapboxgl.NavigationControl());
|
||||
this._map.on("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
|
||||
}
|
||||
}));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Initial render of component
|
||||
render() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<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>
|
||||
|
||||
<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);
|
||||
}
|
||||
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];
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('map-multipoint', MapMultipoint);
|
||||
|
|
@ -7,8 +7,9 @@ import (
|
|||
"github.com/Gleipnir-Technology/nidus-sync/htmlpage"
|
||||
)
|
||||
|
||||
type ContextSearch struct {
|
||||
type ContentSearch struct {
|
||||
MapboxToken string
|
||||
URLTegola string
|
||||
}
|
||||
|
||||
var (
|
||||
|
|
@ -19,8 +20,9 @@ func getSearch(w http.ResponseWriter, r *http.Request) {
|
|||
htmlpage.RenderOrError(
|
||||
w,
|
||||
Search,
|
||||
ContextSearch{
|
||||
ContentSearch{
|
||||
MapboxToken: config.MapboxToken,
|
||||
URLTegola: config.URLTegola,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link href='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet' />
|
||||
<script src="/static/js/geocode.js"></script>
|
||||
<script src="/static/js/location.js"></script>
|
||||
<script src="/static/js/map.js"></script>
|
||||
<script src="/static/js/map-multipoint.js"></script>
|
||||
<style>
|
||||
.clickable-row {
|
||||
cursor: pointer;
|
||||
|
|
@ -123,14 +123,13 @@ function renderReports(features) {
|
|||
} else {
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
mapLoad(MAPBOX_ACCESS_TOKEN).then((map) => {
|
||||
function updateReportTable() {
|
||||
}
|
||||
function onLoad() {
|
||||
const map = document.querySelector("map-multipoint");
|
||||
map.addEventListener("load", (event) => {
|
||||
map.addSource('tegola-mosquito', {
|
||||
'type': 'vector',
|
||||
'tiles': [
|
||||
'https://dev-tegola.nidus.cloud/maps/mosquito/{z}/{x}/{y}'
|
||||
'https://{{.URLTegola}}/maps/mosquito/{z}/{x}/{y}'
|
||||
]
|
||||
});
|
||||
map.addLayer({
|
||||
|
|
@ -154,27 +153,25 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
renderReports(uniqueFeatures);
|
||||
}
|
||||
});
|
||||
map.on('mousemove', 'report_location', (e) => {
|
||||
});
|
||||
map.on('mouseleave', 'report_location', () => {
|
||||
});
|
||||
getGeolocation({
|
||||
enableHighAccuracy: true,
|
||||
timeout: 10000,
|
||||
maximumAge: 0
|
||||
}).then(position => {
|
||||
mapJumpTo({
|
||||
map.jumpTo({
|
||||
center: {
|
||||
lng: position.coords.longitude,
|
||||
lat: position.coords.latitude,
|
||||
},
|
||||
zoom: 12,
|
||||
zoom: 14,
|
||||
});
|
||||
}).catch(error => {
|
||||
console.error("Failed to get position", error);
|
||||
});
|
||||
console.log("location error", error);
|
||||
})
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', onLoad);
|
||||
</script>
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
|
|
@ -218,9 +215,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
<h5 class="mb-0"><i class="fas fa-map-marked-alt me-2"></i>Reports Map</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="map-container" id="map-container">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
<map-multipoint
|
||||
api-key="{{ .MapboxToken }}"
|
||||
latitude="36.3"
|
||||
longitude="-119.2"
|
||||
tegola="{{.URLTegola}}"
|
||||
zoom="9"
|
||||
/></map-multipoint>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue