-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvalencia.html
90 lines (76 loc) · 3.96 KB
/
valencia.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html>
<head>
<meta charset='utf-8' />
<title>Valencia buildings</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<!-- Calen per afegir geocoder -->
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
<!--Reaprovechamos estilo de la práctica 3, edificios-->
<link href='css/estilobase.css' rel='stylesheet' />
<script src='js/valencia.js'></script>
<script>
var map;
var aah = false;
function init() {
mapboxgl.accessToken =
'pk.eyJ1IjoibWFwYXRvciIsImEiOiJjbTZmam4waDgwNTZyMmtzMGdva2U2Z3RzIn0.-ATkyErnGnpGKRjeMZyDHQ';
map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [ -0.376347296480418, 39.46971305343229 ],
zoom: 15,
// attributionControl: false,
pitch: 45,
hash: true
});
//////////////////////////////////////////////////////////////QUARENTENA
//Empaquetar la creació del mapa i cridar-la segons el botó clickat??
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
for (const input of inputs) {
input.onclick = (layer) => { //where does this come from?
//remove old layer?
//map.removeLayer('edificios');
//map.removeSource('edificios_source');
const layerId = layer.target.id;
map.setStyle('mapbox://styles/mapbox/' + layerId);
//addlayeragain, on the new version of map? ->
};
} // final for
//////////////////////////////////////////////////////////////FI QUARENTENA
if (aah == false) {
map.addControl(new mapboxgl.AttributionControl({ compact: true })); //atribució down-right col·lapsada
map.addControl(new mapboxgl.NavigationControl()); //Zooms i nord
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl,
collapsed: true,
bbox:[ -0.8040464595956109 , 39.22401204479797 , 0.010398749996284096 , 39.70734534726117]
}));
map.on('load', function () {
addEdificiosCapa();
addPopupToMapEdificios("edificios");
});
aah=true;
};
}//fin init
</script>
</head>
<body onload="init()">
<div class="panelTopIzquierda">
<label id="altura">More than 0 floors</label>
<input onChange="filtrarEdificios(this.value)" id="slider" type="range" min="1" max="40" step="1" value="0" />
</div>
<div id="menu">
<input id="light-v10" type="radio" name="rtoggle" value="light" checked="checked">
<label for="light-v10">light</label>
<input id="dark-v11" type="radio" name="rtoggle" value="dark">
<label for="dark-v11">dark</label>
</div>
<div id="map"></div>
</body>
</html>