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.
121 lines
3.6 KiB
121 lines
3.6 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<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> |
|
|
|
<title>Map</title> |
|
</head> |
|
|
|
<body> |
|
<div id="myMap"></div> |
|
</body> |
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> |
|
|
|
<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, { |
|
maxzoom: 18, |
|
}).addTo(myMap) |
|
/*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 */ |
|
}) |
|
|
|
let marker = L.marker([41.41, 2.13], { |
|
icon: iconMarker |
|
}).addTo(myMap); |
|
/*Definim el marcador amb les coordenades i l'objecte iconMarker definit*/ |
|
|
|
/*carregar els arxius geojson*/ |
|
|
|
function fetchJSON (url) { |
|
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) { |
|
return response.json(); |
|
}); |
|
}; |
|
|
|
var style = { |
|
fillColor: 'white', |
|
weight: 1, |
|
opacity: 1, |
|
color: 'grey', |
|
dashArray: '3', |
|
fillOpacity: 0.7 |
|
}; |
|
var layers = { |
|
districtes: null, |
|
barris: null |
|
} |
|
var currentlayer = null; |
|
fetchJSON('data/districtres.geojson').then(function(data) { |
|
layers.districtes = data; |
|
currentlayer = L.geoJSON(data, { |
|
style: style |
|
}).addTo(myMap); |
|
}) |
|
|
|
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); |
|
}); |
|
} |
|
} else { |
|
fetchParceles().then(function(data) { |
|
currentlayer.clearLayers(); |
|
currentlayer.addData(data); |
|
}) |
|
} |
|
}; |
|
|
|
//creem un event que escolti els botons de zoom (es una fucnion propia del leaflet) |
|
myMap.on("zoom", loadData); |
|
myMap.on("moveend", loadData); |
|
|
|
</script> |
|
|
|
</html>
|
|
|