Initial work on creating custom map component
This isn't done, I'm just shifting gears.
This commit is contained in:
parent
ea48364d95
commit
749f8aaec7
4 changed files with 227 additions and 127 deletions
|
|
@ -197,30 +197,3 @@ class AddressInput extends HTMLElement {
|
|||
}
|
||||
|
||||
customElements.define('address-input', AddressInput);
|
||||
|
||||
function setLocationInputs(suggestion) {
|
||||
let address = document.getElementById('address');
|
||||
let country = document.getElementById('address-country');
|
||||
let latitude = document.getElementById('latitude');
|
||||
let longitude = document.getElementById('longitude');
|
||||
let latlngAccuracyType = document.getElementById('latlng-accuracy-type');
|
||||
let postcode = document.getElementById('address-postcode');
|
||||
let place = document.getElementById('address-place');
|
||||
let region = document.getElementById('address-region');
|
||||
let street = document.getElementById('address-street');
|
||||
|
||||
// Extract context data from properties
|
||||
const props = suggestion.properties;
|
||||
const context = props.context || {};
|
||||
|
||||
// Populate structured fields
|
||||
address.value = props.full_address;
|
||||
country.value = context.country.name;
|
||||
latitude.value = props.coordinates.latitude;
|
||||
longitude.value = props.coordinates.longitude;
|
||||
latlngAccuracyType.value = props.coordinates.accuracy;
|
||||
postcode.value = context.postcode.name;
|
||||
place.value = context.place.name;
|
||||
region.value = context.region.name;
|
||||
street.value = context.country.name;
|
||||
}
|
||||
|
|
|
|||
215
htmlpage/static/js/map-locator.js
Normal file
215
htmlpage/static/js/map-locator.js
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
var map = null;
|
||||
// A map that can be used to locate a single point by setting its location explicitly
|
||||
// or by allowing the user to move a marker.
|
||||
class MapLocator extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// Create a shadow DOM
|
||||
this.attachShadow({mode: "open" });
|
||||
|
||||
// Initial render
|
||||
this.render();
|
||||
|
||||
// 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 === '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 === 'zoom') {
|
||||
this._map.setZoom(Number(newValue));
|
||||
}
|
||||
}
|
||||
|
||||
_initializeMap() {
|
||||
console.log("Setting up the map...");
|
||||
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 = this._apiKey;
|
||||
map = new mapboxgl.Map({
|
||||
container: "map",
|
||||
center: {
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
},
|
||||
style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
||||
zoom: zoom,
|
||||
});
|
||||
map.addControl(new mapboxgl.GeolocateControl({
|
||||
positionOptions: {
|
||||
enableHighAccuracy: true
|
||||
},
|
||||
trackUserLocation: true,
|
||||
showUserHeading: true
|
||||
}));
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
map.on("load", function() {
|
||||
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>
|
||||
`;
|
||||
}
|
||||
|
||||
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 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-locator', MapLocator);
|
||||
|
||||
|
||||
|
||||
function mapLoad(MAPBOX_ACCESS_TOKEN) {
|
||||
return new Promise((resolve, reject) => {
|
||||
});
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
var map = null;
|
||||
var markers = [];
|
||||
|
||||
function mapAddMarker(coords) {
|
||||
const mapContainer = document.getElementById("map-container");
|
||||
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);
|
||||
});
|
||||
markers.push(marker);
|
||||
}
|
||||
|
||||
function mapLoad(MAPBOX_ACCESS_TOKEN) {
|
||||
return new Promise((resolve, reject) => {
|
||||
console.log("Setting up the map...");
|
||||
mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
|
||||
map = new mapboxgl.Map({
|
||||
container: "map",
|
||||
center: {
|
||||
lat: 36.2,
|
||||
lng: -119.2
|
||||
},
|
||||
style: 'mapbox://styles/mapbox/streets-v12', // style URL
|
||||
zoom: 15,
|
||||
});
|
||||
map.addControl(new mapboxgl.GeolocateControl({
|
||||
positionOptions: {
|
||||
enableHighAccuracy: true
|
||||
},
|
||||
trackUserLocation: true,
|
||||
showUserHeading: true
|
||||
}));
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
map.on("load", function() {
|
||||
console.log("Map loaded.");
|
||||
resolve(map);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function mapJumpTo(args) {
|
||||
map.jumpTo(args);
|
||||
}
|
||||
|
||||
function mapSetMarker(coords) {
|
||||
console.log("Setting map marker", coords);
|
||||
map.jumpTo({
|
||||
center: coords,
|
||||
zoom: 14,
|
||||
});
|
||||
markers.forEach((marker) => marker.remove());
|
||||
mapAddMarker(coords);
|
||||
}
|
||||
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<script src="/static/js/address-suggestion.js"></script>
|
||||
<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-locator.js"></script>
|
||||
{{template "photo-upload-header"}}
|
||||
<style>
|
||||
.district-logo {
|
||||
|
|
@ -25,26 +25,6 @@
|
|||
margin-bottom: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.photo-upload-area {
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 8px;
|
||||
|
|
@ -158,12 +138,6 @@ function handlePhotoSelection() {
|
|||
}
|
||||
}
|
||||
|
||||
function onMapMarkerDragEnd(marker) {
|
||||
const lngLat = marker.getLngLat();
|
||||
//displaySelectedCoordinates(lngLat);
|
||||
geocodeReverse(MAPBOX_ACCESS_TOKEN, lngLat);
|
||||
}
|
||||
|
||||
function setLocationInputs(location) {
|
||||
let country = document.getElementById('address-country');
|
||||
let latitude = document.getElementById('latitude');
|
||||
|
|
@ -216,20 +190,21 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
handleFiles(e.dataTransfer.files);
|
||||
}
|
||||
});
|
||||
mapLoad(MAPBOX_ACCESS_TOKEN).then(() => {
|
||||
const mapLocator = document.querySelector("map-locator");
|
||||
mapLocator.addEventListener("load", (event) => {
|
||||
getGeolocation({
|
||||
enableHighAccuracy: true,
|
||||
timeout: 10000,
|
||||
maximumAge: 0
|
||||
}).then(position => {
|
||||
mapJumpTo({
|
||||
mapLocator.jumpTo({
|
||||
center: {
|
||||
lng: position.coords.longitude,
|
||||
lat: position.coords.latitude,
|
||||
},
|
||||
zoom: 14,
|
||||
});
|
||||
mapAddMarker([
|
||||
mapLocator.setMarker([
|
||||
position.coords.longitude,
|
||||
position.coords.latitude,
|
||||
]);
|
||||
|
|
@ -241,18 +216,19 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
console.log("location error", error);
|
||||
})
|
||||
})
|
||||
mapLocator.addEventListener("markerdragend",
|
||||
let mapZoom = document.getElementById('map-zoom');
|
||||
map.on("zoomend", function(e) {
|
||||
mapLocator.addEventListener("zoomend", function(e) {
|
||||
mapZoom.value = e.target.getZoom();
|
||||
});
|
||||
const mapContainer = document.getElementById("map-container");
|
||||
mapContainer.addEventListener("markerdragend", (e) => {
|
||||
onMapMarkerDragEnd(e.detail.marker);
|
||||
mapLocator.addEventListener("markerdragend", (e) => {
|
||||
const lngLat = marker.getLngLat();
|
||||
//displaySelectedCoordinates(lngLat);
|
||||
geocodeReverse(MAPBOX_ACCESS_TOKEN, lngLat);
|
||||
});
|
||||
|
||||
const addressDisplay = document.querySelector("address-display");
|
||||
const addressInput = document.querySelector("address-input");
|
||||
const mapComponent = document.querySelector("map-component");
|
||||
addressInput.addEventListener("address-selected", (event) => {
|
||||
const l = event.detail.location;
|
||||
console.log("Address selected", l);
|
||||
|
|
@ -346,9 +322,7 @@ function displaySelectedCoordinates(lngLat) {
|
|||
</div>
|
||||
|
||||
<p class="small text-muted mb-2">You can also click on the map to mark the location precisely</p>
|
||||
<div id="map-container" class="map-container">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
<map-locator api-key="{{ .MapboxToken }}"></map-locator>
|
||||
<input type="hidden" id="map-zoom" name="map-zoom"/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue