You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
desregistradores/client/public/index.html

159 lines
4.8 KiB

1 year ago
<!DOCTYPE html>
<html lang="en">
1 year ago
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<style>
#myMap {
height: 1000px;
}
</style>
1 year ago
<title>Map</title>
</head>
1 year ago
<body>
<div id="myMap"></div>
1 year ago
</body>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
1 year ago
<script>
const tilesProvider = 'https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png';
let myMap = L.map('myMap').setView([41.41, 2.13], 12);
L.tileLayer(tilesProvider, {
1 year ago
maxzoom: 18,
}).addTo(myMap)
1 year ago
/*DEfinim les propietats del marcador*/
let iconMarker = L.icon({
iconUrl: 'images/marker.png',
iconSize: [30, 30],
iconAnchor: [15, 30] /*A quin punt en píxels de la imatge es clva el marcador al mapa */
1 year ago
})
let marker = L.marker([41.41, 2.13], {
icon: iconMarker
}).addTo(myMap);
1 year ago
/*Definim el marcador amb les coordenades i l'objecte iconMarker definit*/
/*carregar els arxius geojson*/
function fetchJSON (url) {
1 year ago
return fetch(url)
.then(function(response) {
return response.json();
});
}
function fetchParceles () {
return fetch("parceles", {
method: "POST",
cache: "no-cache",
cors: "no-cors",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
redirect: "error",
body: JSON.stringify({
west: myMap.getBounds().getWest(),
north: myMap.getBounds().getNorth(),
east: myMap.getBounds().getEast(),
south: myMap.getBounds().getSouth()
})
}).then(function(response) {
1 year ago
return response.json();
});
};
//canvis de color segons el valor d'una variable
function getColor(nom, districte) {
return nom == "Ciutat Vella" ? '#f7fcfd' :
nom == "Eixample" ? '#e5f5f9' :
nom == "Sants-Montjuïc" ? '#ccece6' :
nom == "Les Corts" ? '#99d8c9' :
nom == "Sarrià-Sant Gervasi" ? '#66c2a4' :
nom == "Gràcia" ? '#41ae76' :
nom == "Horta-Guinardó" ? '#238b45' :
nom == "Nou Barris" ? '#006d2c' :
nom == "Sant Andreu" ? '#00441b' :
nom == "Sant Martí" ? '#e0f3db' :
districte == "01" ? '#f7fcfd' :
districte == "02" ? '#e5f5f9' :
districte == "03" ? '#ccece6' :
districte == "04" ? '#99d8c9' :
districte == "05" ? '#66c2a4' :
districte== "06" ? '#41ae76' :
districte == "07" ? '#238b45' :
districte == "08" ? '#006d2c' :
districte == "09" ? '#00441b' :
districte == "10" ? '#e0f3db' :
'grey';
1 year ago
};
//creem una funció per donar estil segons el NOM que tingui el districte
function style(feature) {
return {
fillColor: getColor(feature.properties.NOM, feature.properties.DISTRICTE),
weight: 1.5,
opacity: 1,
color: 'black',
dashArray: '3',
fillOpacity: 0.7
};
}
var layers = {
districtes: null,
barris: null
}
1 year ago
var currentlayer = null;
fetchJSON('data/districtres.geojson').then(function(data) {
layers.districtes = data;
currentlayer = L.geoJSON(data, {
style: style
}).addTo(myMap);
1 year ago
})
function loadData (ev) {
if (myMap.getZoom() <= 12) {
currentlayer.clearLayers();
currentlayer.addData(layers.districtes);
} else if (myMap.getZoom() > 12 && myMap.getZoom() <= 16) {
if (layers.barris != null) {
currentlayer.clearLayers();
currentlayer.addData(layers.barris);
} else {
fetchJSON('data/barris.4326.geojson')
.then(function(data) {
layers.barris = data;
currentlayer.clearLayers();
currentlayer.addData(data);
});
1 year ago
}
} else {
fetchParceles().then(function(data) {
currentlayer.clearLayers();
currentlayer.addData(data);
})
}
};
1 year ago
//creem un event que escolti els botons de zoom (es una fucnion propia del leaflet)
myMap.on("zoom", loadData);
myMap.on("moveend", loadData);
1 year ago
1 year ago
</script>
1 year ago
</html>