122 lines
3.6 KiB
JavaScript
122 lines
3.6 KiB
JavaScript
import maplibregl from "maplibre-gl"
|
|
|
|
const defaultStyle = {
|
|
version: 8,
|
|
sources: {
|
|
osm: {
|
|
type: "raster",
|
|
tiles: [document.documentElement.dataset.mapTileUrl],
|
|
tileSize: 256,
|
|
attribution: "© OpenStreetMap contributors"
|
|
}
|
|
},
|
|
layers: [{id: "osm", type: "raster", source: "osm"}]
|
|
}
|
|
|
|
export const Hooks = {
|
|
AidMap: {
|
|
mounted() {
|
|
this.markers = []
|
|
this.map = new maplibregl.Map({
|
|
container: this.el,
|
|
style: defaultStyle,
|
|
center: [30.5234, 50.4501],
|
|
zoom: 5
|
|
})
|
|
this.map.addControl(new maplibregl.NavigationControl(), "top-right")
|
|
this.renderMarkers()
|
|
},
|
|
updated() {
|
|
this.renderMarkers()
|
|
},
|
|
destroyed() {
|
|
this.map?.remove()
|
|
},
|
|
renderMarkers() {
|
|
if (!this.map) return
|
|
this.markers.forEach(marker => marker.remove())
|
|
this.markers = []
|
|
|
|
const points = JSON.parse(this.el.dataset.markers || "[]")
|
|
points.forEach(point => {
|
|
const popup = new maplibregl.Popup({offset: 18}).setHTML(
|
|
`<strong>${escapeHtml(point.title)}</strong><br>${escapeHtml(point.location)}`
|
|
)
|
|
const marker = new maplibregl.Marker({color: point.exact ? "#d6573b" : "#278467"})
|
|
.setLngLat([point.longitude, point.latitude])
|
|
.setPopup(popup)
|
|
.addTo(this.map)
|
|
this.markers.push(marker)
|
|
})
|
|
|
|
if (points.length === 1) {
|
|
this.map.flyTo({center: [points[0].longitude, points[0].latitude], zoom: 12})
|
|
} else if (points.length > 1) {
|
|
const bounds = new maplibregl.LngLatBounds()
|
|
points.forEach(point => bounds.extend([point.longitude, point.latitude]))
|
|
this.map.fitBounds(bounds, {padding: 52, maxZoom: 13})
|
|
}
|
|
}
|
|
},
|
|
|
|
LocationPicker: {
|
|
mounted() {
|
|
this.el.addEventListener("click", () => {
|
|
navigator.geolocation.getCurrentPosition(
|
|
position => {
|
|
document.querySelector("#request-latitude").value = position.coords.latitude
|
|
document.querySelector("#request-longitude").value = position.coords.longitude
|
|
this.el.textContent = "Location added"
|
|
this.el.classList.add("btn-success")
|
|
},
|
|
() => {
|
|
this.el.textContent = "Location permission denied"
|
|
this.el.classList.add("btn-error")
|
|
},
|
|
{enableHighAccuracy: true, timeout: 10000}
|
|
)
|
|
})
|
|
}
|
|
},
|
|
|
|
LiveTracking: {
|
|
mounted() {
|
|
this.destroying = false
|
|
|
|
if (window.WhoNeedHelpAndroid) {
|
|
this.nativeError = () => {
|
|
this.pushEvent("location-error", {})
|
|
this.pushEvent("stop-tracking", {})
|
|
}
|
|
window.addEventListener("wnh:native-tracking-error", this.nativeError)
|
|
return
|
|
}
|
|
|
|
this.watchId = navigator.geolocation.watchPosition(
|
|
position => this.pushEvent("location-update", {
|
|
latitude: position.coords.latitude,
|
|
longitude: position.coords.longitude,
|
|
accuracy_meters: position.coords.accuracy
|
|
}),
|
|
() => {
|
|
if (!this.destroying) this.pushEvent("location-error", {})
|
|
},
|
|
{enableHighAccuracy: true, maximumAge: 5000, timeout: 15000}
|
|
)
|
|
},
|
|
destroyed() {
|
|
this.destroying = true
|
|
if (this.nativeError) {
|
|
window.removeEventListener("wnh:native-tracking-error", this.nativeError)
|
|
}
|
|
if (this.watchId !== undefined) navigator.geolocation.clearWatch(this.watchId)
|
|
}
|
|
}
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
const node = document.createElement("div")
|
|
node.textContent = value || ""
|
|
return node.innerHTML
|
|
}
|