-
Notifications
You must be signed in to change notification settings - Fork 0
/
carte_limites_pnc.html
128 lines (110 loc) · 4.41 KB
/
carte_limites_pnc.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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Limites PNC</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark rounded">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="img/Spirale_orange.png" alt="" width="30" height="30"
class="d-inline-block align-text-top">
Le Parc national des Cévennes
</a>
</div>
</nav>
<div class="container-fluid mx-0 px-0">
<div id="mapid" style="width: 100%; height: 100vh;"></div>
</div>
<!-- script and library-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script>
const basemaps = {
Scan25: L.tileLayer(
"https://wxs.ign.fr/5a3efc2bq1dv1hz6gthcb445/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/jpeg&LAYER=GEOGRAPHICALGRIDSYSTEMS.MAPS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}",
{ opacity: 0.5 },
{ minZoom: 0, maxZoom: 18, attribution: "IGN-F/Geoportail", tileSize: 256 }
),
Plan_ign: L.tileLayer(
"https://wxs.ign.fr/cartes/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/png&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}",
{ minZoom: 0, maxZoom: 18, attribution: "IGN-F/Geoportail", tileSize: 256 }
),
orthoPhoto: L.tileLayer(
"https://wxs.ign.fr/ortho/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/jpeg&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}",
{ minZoom: 0, maxZoom: 18, attribution: "IGN-F/Geoportail", tileSize: 256 }
),
OpenStreetMap: L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{ attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }
),
OpenTopoMap: L.tileLayer(
'http://a.tile.opentopomap.org/{z}/{x}/{y}.png',
{ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors | Design : © <a href="http://opentopomap.org/">OpenTopoMap</a> (CC-BY-SA)' }
)
};
const overlaymaps = {
'Limites PNC': L.tileLayer('https://maps.cevennes-parcnational.net/data/tiles/limites_zc_aa_pnc/{z}/{x}/{y}.png', {
maxZoom: 19
})
};
var map = L.map('mapid', {
layers: [
basemaps.Plan_ign,
overlaymaps["Limites PNC"]
]
}).setView([44.23, 3.72], 9.75);
var layerControl = L.control.layers(basemaps, overlaymaps).addTo(map);
function featurePoi(feature, layer) {
layer.bindPopup("<b>" + feature.properties.name + "</b>" + "<br>" + feature.properties.description);
};
var legend = L.control({ position: 'bottomright' });
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend');
div.innerHTML = `
<div id='legend'>
<nav class='clearfix'>
<div>
<b>Cœur du Parc</b>
<span style='background: #efc270; border-color: #a4702a; border-style: solid;'></span>
</div>
<div>
<b>Aire d'adhésion du Parc</b>
<span style='background: #ece0a7;'></span>
</div>
</nav>
</div>`;
return div;
};
legend.addTo(map);
</script>
<style>
.leaflet-bottom {
position: fixed;
}
.legend {
background-color: rgba(255, 255, 255, 0.7);
padding: 15px;
}
.legend div label,
.legend div span {
display: block;
text-align: left;
font-size: 9px;
}
.legend div span {
height: 15px;
width: 30px;
margin-right: 5px;
}
</style>
</body>
</html>