Sélectionnez l’un des cinq portraits sur la carte.

// Read CSV
function readCSV(txt, sep) {
// converts the CSV file into a javascript object
const lines = txt.split(« \n »);
const keys = lines[0].split(sep);
const rows = getRows(lines.slice(1,lines.length), sep);
const items = [];

for(let i=0; i < rows.length; i++){
let item = {};

for(let j = 0; j < rows[i].length; j++){
item[keys[j].trim()] = rows[i][j].trim();
}
items.push(item);
}

return {
"items": items,
"keys": keys
};
}

// helper function for readCSV() that splits the rows of the CSV file
function getRows(listOfRows, sep){
const rows = [] for(let i=0; i < listOfRows.length; i++){
rows.push(listOfRows[i].split(sep));
}
return rows;
}

function loadJSON(data, callback) {

const xobj = new XMLHttpRequest();
xobj.overrideMimeType("txt/csv");
xobj.open("GET", data, true);
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && (xobj.status == "200" || xobj.status == "0")) {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}

function init(csv){

loadJSON(csv, function(data){
const csvData = readCSV(data, ";");
console.log(csvData);
const intViewportWidth = window.innerWidth;
let zoom;
if (intViewportWidth <= 768) {
zoom = 6.5;
} else {
zoom = 7.5;
}

const map = L.map('uebersichtskarte', {minZoom: 7.5}).setView([46.84786, 8.25677], zoom);
const url = 'https://wmts10.geo.admin.ch/1.0.0/ch.swisstopo.pixelkarte-farbe/default/current/3857/{z}/{x}/{y}.jpeg';
const siteIcon = L.icon({
iconUrl: 'https://agripedia.ch/wasserversorgung/wp-content/uploads/sites/29/2020/04/icon-water-supply.png',
shadowUrl: 'https://agripedia.ch/wasserversorgung/wp-content/uploads/sites/29/2020/04/icon-water-supply-shadow.png',

iconSize: [70,62], // size of the icon
shadowSize: [70,62], // size of the shadow
iconAnchor: [30,55], // point of the icon which will correspond to marker's location
shadowAnchor: [30,55], // the same for the shadow
popupAnchor: [2,-49] // point from which the popup should open relative to the iconAnchor
});

L.tileLayer(url, {
layers: 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
attribution: '© Daten: swisstopo. Icons made by Freepik from www.flaticon.com‘
}).addTo(map);

for (let i = 0; i < csvData.items.length; i++) {
let content = '

‘
L.marker([csvData.items[i].lat, csvData.items[i].lng], {icon: siteIcon}).addTo(map).bindPopup(content);
}
});

}

init(« https://agripedia.ch/wasserversorgung/wp-content/uploads/sites/29/leafletjs/alp-sites.csv »);