95 lines
No EOL
3 KiB
JavaScript
95 lines
No EOL
3 KiB
JavaScript
import * as L from "./lib/leaflet/leaflet-src.esm.js"
|
|
import { PlaceDatabase } from "./places.js";
|
|
|
|
/** La carte */
|
|
const map = L.map(document.getElementById("map"), {
|
|
attributionControl: false,
|
|
zoomControl: false
|
|
})
|
|
|
|
L.control.attribution({
|
|
position: 'topright'
|
|
}).addTo(map)
|
|
|
|
/** La base de données de lieux @type {PlaceDatabase|null} */
|
|
let places = null
|
|
/** Le centre de la carte */
|
|
let map_center = null
|
|
/** Les bords de la carte */
|
|
let map_bounds = null
|
|
|
|
// CHARGEMENT
|
|
await Promise.all([
|
|
PlaceDatabase.createDefault().then(db => places = db),
|
|
fetch("./couches/centre.geojson").then(res => res.json()).then(geojson => {
|
|
map_center = L.latLng([...geojson.features[0].geometry.coordinates].reverse())
|
|
console.log("Centre:", map_center)
|
|
}),
|
|
fetch("./couches/emprise.geojson").then(res => res.json()).then(geojson => {
|
|
let coordinate_list = geojson.features[0].geometry.coordinates[0]
|
|
let first_point = map.project(L.latLng([...coordinate_list[0]].reverse()))
|
|
let bounds = L.bounds(first_point, first_point)
|
|
for(let i = 1; i<coordinate_list.length; i++){
|
|
let point = map.project([...coordinate_list[i]].reverse())
|
|
bounds.extend(point)
|
|
}
|
|
map_bounds = bounds
|
|
console.log("Bounds:", map_bounds)
|
|
}),
|
|
]);
|
|
// CHARGEMENT FINI
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map)
|
|
|
|
L.tileLayer('./tuiles/{z}/{x}/{y}.png', {
|
|
minZoom: 14,
|
|
maxZoom: 23
|
|
}).addTo(map)
|
|
|
|
const geojson_layer = L.geoJSON(null, {
|
|
//TODO
|
|
}).addTo(map)
|
|
|
|
for(let [feature_id, feature] of Object.entries(places.featuresById)){
|
|
geojson_layer.addData(feature)
|
|
}
|
|
|
|
map.setMaxBounds(map_bounds)
|
|
map.setView(map_center, 19, {
|
|
animate: false,
|
|
})
|
|
|
|
const search_form = document.getElementById("search-area")
|
|
search_form.elements["query"].addEventListener("change", () => search_form.requestSubmit())
|
|
search_form.elements["query"].addEventListener("input", () => search_form.requestSubmit())
|
|
|
|
search_form.addEventListener("submit", e => {
|
|
e.preventDefault()
|
|
if(places){
|
|
let data = new FormData(search_form)
|
|
|
|
if(data.get("query")){
|
|
let resultElements = []
|
|
|
|
let search_results = places.search(data.get("query"))
|
|
console.log("Search results:", search_results)
|
|
|
|
for(let result_item of search_results){
|
|
let el = document.createElement("li")
|
|
el.textContent = result_item.feature.properties.name+" ("+result_item.ref+")"
|
|
resultElements.push(el)
|
|
}
|
|
|
|
if(resultElements.length > 0){
|
|
document.getElementById("search-result").replaceChildren(...resultElements)
|
|
} else {
|
|
document.getElementById("search-result").replaceChildren(document.createTextNode("Pas de resultat"))
|
|
}
|
|
} else {
|
|
document.getElementById("search-result").replaceChildren([])
|
|
}
|
|
|
|
}
|
|
}) |