114 lines
No EOL
3.3 KiB
JavaScript
114 lines
No EOL
3.3 KiB
JavaScript
import * as L from "./lib/leaflet/leaflet-src.esm.js"
|
|
import { PlaceDatabase } from "./places.js";
|
|
import "./lib/turf/turf.js"
|
|
|
|
let map = null;
|
|
/** @type {PlaceDatabase| null} */
|
|
let places = null;
|
|
|
|
export async function init(){
|
|
/** Le centre de la carte */
|
|
let map_center = null
|
|
/** Les bords de la carte */
|
|
let map_bounds = null
|
|
|
|
map = L.map(document.getElementById("map"), {
|
|
attributionControl: false,
|
|
zoomControl: false
|
|
})
|
|
|
|
L.control.attribution({
|
|
position: 'topright'
|
|
}).addTo(map)
|
|
|
|
await Promise.all([
|
|
// Point définissant le centre de la carte
|
|
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)
|
|
}),
|
|
// Polygone définissant les limites de la carte
|
|
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)
|
|
}),
|
|
])
|
|
|
|
// La couche Openstreetmap standard
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map)
|
|
|
|
// La couche custom de l'antenne
|
|
L.tileLayer('./tuiles/{z}/{x}/{y}.png', {
|
|
minZoom: 14,
|
|
maxZoom: 23
|
|
}).addTo(map)
|
|
|
|
// Parametrage de la carte initiale
|
|
map.setMaxBounds(map_bounds)
|
|
map.setView(map_center, 19, {
|
|
animate: false,
|
|
})
|
|
}
|
|
|
|
const HIGHLIGHT_LAYER = Symbol("Hilight map layer")
|
|
|
|
export async function init_places(places_db){
|
|
places = places_db
|
|
|
|
// La couche des zones disponibles
|
|
const area_highlight = L.geoJSON(null, {
|
|
style: function(feature){
|
|
return {
|
|
className: "map-hilight-area",
|
|
fill: false,
|
|
stroke: false
|
|
}
|
|
},
|
|
onEachFeature: function(feature, layer){
|
|
feature[HIGHLIGHT_LAYER] = layer
|
|
}
|
|
}).addTo(map)
|
|
|
|
// On ajoute toutes les zones à la carte
|
|
for(let [feature_id, feature] of Object.entries(places.featuresById)){
|
|
area_highlight.addData(feature)
|
|
}
|
|
}
|
|
|
|
export function unhighlight_all(){
|
|
for(let el of document.querySelectorAll(".map-hilight-area.active")){
|
|
el.classList.remove("active")
|
|
}
|
|
}
|
|
|
|
export function highlight(place_or_placeid){
|
|
unhighlight_all()
|
|
|
|
let place;
|
|
|
|
if(typeof place_or_placeid == "string"){
|
|
place = places.getFeatureById(place_or_placeid)
|
|
} else {
|
|
place = place_or_placeid
|
|
}
|
|
|
|
if(place[HIGHLIGHT_LAYER]){
|
|
place[HIGHLIGHT_LAYER].getElement()
|
|
.classList.add("active")
|
|
}
|
|
|
|
let centroid = turf.centroid(place)
|
|
map.panTo(L.latLng(
|
|
centroid.geometry.coordinates[1],
|
|
centroid.geometry.coordinates[0]
|
|
))
|
|
} |