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

122 lines
3.6 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();
});
};
1 year ago
var style = {
fillColor: 'white',
weight: 1,
opacity: 1,
color: 'grey',
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
</script>
1 year ago
</html>