134 lines
6.3 KiB
JavaScript
134 lines
6.3 KiB
JavaScript
|
|
|
|
//
|
|
// Map
|
|
//
|
|
|
|
var map = L.map('map', {
|
|
zoomControl: false,
|
|
attributionControl: false
|
|
})
|
|
|
|
|
|
//
|
|
// Icons
|
|
// doc : https://onestepcode.com/leaflet-markers-svg-icons/
|
|
//
|
|
|
|
const mspIcon = L.divIcon({
|
|
html: `
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4453 6.16795C16.7812 5.94402 17.2188 5.94402 17.5547 6.16795L23.5547 10.1679C23.8329 10.3534 24 10.6656 24 11V19C24 19.5523 23.5523 20 23 20H11C10.4477 20 10 19.5523 10 19V11C10 10.6656 10.1671 10.3534 10.4453 10.1679L16.4453 6.16795ZM16 18H18V14H16V18ZM20 18V13C20 12.4477 19.5523 12 19 12H15C14.4477 12 14 12.4477 14 13V18H12V11.5352L17 8.20185L22 11.5352V18H20Z" fill="currentColor"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.4961 12.1318C34.1887 11.9561 33.8113 11.9561 33.5039 12.1318L26.5039 16.1318C26.1923 16.3098 26 16.6411 26 17V27C26 27.5523 26.4477 28 27 28H41C41.5523 28 42 27.5523 42 27V17C42 16.6411 41.8077 16.3098 41.4961 16.1318L34.4961 12.1318ZM37 26H40V17.5803L34 14.1518L28 17.5803V26H31V20C31 19.4477 31.4477 19 32 19H36C36.5523 19 37 19.4477 37 20V26ZM35 26V21H33V26H35Z" fill="currentColor"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4472 28.1056L15.4472 24.1056C15.1657 23.9648 14.8343 23.9648 14.5528 24.1056L6.55279 28.1056C6.214 28.275 6 28.6212 6 29V41C6 41.5523 6.44772 42 7 42H23C23.5523 42 24 41.5523 24 41V29C24 28.6212 23.786 28.275 23.4472 28.1056ZM16 34V40H14V34H16ZM18 33V40H22V29.618L15 26.118L8 29.618V40H12V33C12 32.4477 12.4477 32 13 32H17C17.5523 32 18 32.4477 18 33Z" fill="currentColor"/>
|
|
</svg>
|
|
`,
|
|
className: "",
|
|
iconSize: [48, 48],
|
|
iconAnchor: [12, 40],
|
|
});
|
|
const pharmacyIcon = L.divIcon({
|
|
html: `
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.8708 16.5029L26.5001 16.5029C27.0523 16.5029 27.5001 16.0552 27.5001 15.5029C27.5001 14.9506 27.0523 14.5029 26.5001 14.5029L23.8708 14.5029C23.5214 14.503 23.1149 14.56 22.7209 14.7523C21.2959 15.4476 20.4893 16.6497 20.0467 17.8209C19.8971 18.2165 19.786 18.6158 19.7045 19.0029H21.7622C21.8068 18.8436 21.8583 18.6846 21.9175 18.528C22.2394 17.6764 22.7625 16.9573 23.5979 16.5497C23.6444 16.527 23.7301 16.5029 23.8708 16.5029ZM18.0001 20.0029C17.4478 20.0029 16.9874 20.4588 17.1366 20.9906C17.7143 23.05 20.0631 24.6522 23.0001 24.9523V26.5105C22.3051 26.5275 21.5829 26.5829 20.9705 26.7612C20.492 26.9005 19.9849 27.1393 19.5969 27.575C19.1907 28.0312 19 28.6074 19 29.25C19 29.8932 19.1902 30.47 19.5958 30.9272C19.9836 31.3641 20.4906 31.6038 20.9696 31.7437C21.2897 31.8372 21.6397 31.897 22 31.9353V29.9217C21.8289 29.8972 21.6722 29.8653 21.5305 29.8239C21.2595 29.7448 21.1415 29.6558 21.0918 29.5997C21.0599 29.5638 21 29.4833 21 29.25C21 29.0191 21.0594 28.9401 21.0907 28.905C21.1402 28.8493 21.2581 28.7605 21.5296 28.6814C21.9135 28.5697 22.4074 28.5277 23.0001 28.5121V29.9938L23 31.9954L23.0001 34.0029H20.0001V36.0029H28.0001V34.0029H25.0001V28.4661C26.1018 28.3797 26.9948 28.1376 27.6667 27.7046C28.6123 27.0953 29 26.1881 29 25.2252C29 24.7019 28.8853 24.199 28.6292 23.7536C29.754 23.0448 30.5574 22.0819 30.8635 20.9906C31.0127 20.4588 30.5523 20.0029 30.0001 20.0029H18.0001ZM26.5833 26.0235C26.3 26.2061 25.8089 26.3795 25.0001 26.4584V24.9523C25.6205 24.8889 26.2147 24.7674 26.7715 24.5957C26.9363 24.7528 27 24.9436 27 25.2252C27 25.5956 26.8878 25.8272 26.5833 26.0235Z" fill="currentColor"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 32H42V16H32V6H16V16H6V32H16V42H32V32ZM30 40V30H40V18H30V8H18V18H8V30H18V40H30Z" fill="currentColor"/>
|
|
</svg>
|
|
`,
|
|
className: "",
|
|
iconSize: [48, 48],
|
|
iconAnchor: [12, 40],
|
|
});
|
|
|
|
//
|
|
// Markers
|
|
//
|
|
|
|
const markersMSP = new L.MarkerClusterGroup({ chunkedLoading: true });
|
|
const markersPharmacy = new L.MarkerClusterGroup({ chunkedLoading: true });
|
|
|
|
export function updateLayers(layerMSPChecked, layerPharmacieChecked) {
|
|
// MSP
|
|
if (layerMSPChecked && !map.hasLayer(markersMSP)) {
|
|
map.addLayer(markersMSP)
|
|
} else if (!layerMSPChecked && map.hasLayer(markersMSP)) {
|
|
map.removeLayer(markersMSP)
|
|
}
|
|
|
|
//Pharmacy
|
|
if (layerPharmacieChecked && !map.hasLayer(markersPharmacy)) {
|
|
map.addLayer(markersPharmacy)
|
|
} else if (!layerPharmacieChecked && map.hasLayer(markersPharmacy)) {
|
|
map.removeLayer(markersPharmacy)
|
|
}
|
|
}
|
|
|
|
export function initMap(data, dataP4Pillon, columns, getName, displayInfo, layerMSPChecked, layerPharmacieChecked) {
|
|
for (const msp of data) {
|
|
if (msp[columns.x] && msp[columns.y]) {
|
|
const isMSP = msp[columns.categetab] == "603"
|
|
const marker = L.marker([msp[columns.x], msp[columns.y]], {
|
|
title: getName(msp, dataP4Pillon[msp[columns.finessET]]),
|
|
icon: isMSP ? mspIcon : pharmacyIcon
|
|
})
|
|
.on("click", (e)=> {
|
|
window.msp = msp
|
|
displayInfo(msp, dataP4Pillon[msp[columns.finessET]])
|
|
});
|
|
isMSP ? markersMSP.addLayer(marker) : markersPharmacy.addLayer(marker)
|
|
}
|
|
}
|
|
if (layerMSPChecked) {
|
|
map.addLayer(markersMSP)
|
|
}
|
|
if (layerPharmacieChecked) {
|
|
map.addLayer(markersPharmacy)
|
|
}
|
|
}
|
|
|
|
// tileLayer
|
|
|
|
var tileLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
|
|
maxZoom: 19,
|
|
subdomains: 'abcd',
|
|
attribution: ''
|
|
})
|
|
map.addLayer(tileLayer)
|
|
|
|
// Localisation
|
|
|
|
function getMapLocation() {
|
|
const mapLocation = L.Permalink.getMapLocation();
|
|
const mapLocationDefaultCenter = [52.26869,-113.81034]
|
|
const defaultCenter = [46.55886, 3.21924]
|
|
const defaultZoom = 6
|
|
|
|
function isDefaultCenter() {
|
|
return JSON.stringify(mapLocation.center) == JSON.stringify(defaultCenter)
|
|
}
|
|
|
|
return {
|
|
getCenter : () => {
|
|
return isDefaultCenter() ? defaultCenter : mapLocation.center
|
|
},
|
|
getZoom : () => {
|
|
return isDefaultCenter() ? defaultZoom : mapLocation.zoom
|
|
},
|
|
}
|
|
}
|
|
const mapLocation = getMapLocation();
|
|
map.setView(mapLocation.getCenter(), mapLocation.getZoom())
|
|
|
|
// Zoom
|
|
|
|
export function zoomIn() {
|
|
map.zoomIn()
|
|
}
|
|
|
|
export function zoomOut() {
|
|
map.zoomOut()
|
|
}
|
|
|
|
// Changement d'URL
|
|
|
|
L.Permalink.setup(map);
|