-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpettine-leaflet.html
98 lines (83 loc) · 2.74 KB
/
pettine-leaflet.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
<!DOCTYPE html>
<html>
<head>
<title>Pettine</title>
<meta charset="utf-8" />
<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" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<!-- <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script> -->
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>
</head>
<body>
<div id="mapid" style="width: 1600px; height: 1026px;"></div>
<script>
const mbAttr = `Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, © <a href="http://mapbox.com">Mapbox</a>`
const options512 = {
tileSize: 512,
// maxZoom: 21,
zoomOffset: -1,
attribution: mbAttr,
// accessToken: 'pk.eyJ1IjoiZ3VhbHRpZXJvbWFyYXNjYSIsImEiOiJjaWt5N3JyOHEwMDR6d3ptNW8zeWo4Zmt1In0.G0VevJzeVSd59c9BAy6zdA' // info@bunet
}
const streets = L.tileLayer('https://{s}map.5t.torino.it/streets/{z}/{x}/{y}', options512);
const map = L.map('mapid', {
center: [45.05, 7.67],
zoom: 14,
layers: [streets]
})
const onClick = (e) => {
L.popup()
// .setContent(e.layer.properties.name)
// .setContent(JSON.stringify(e.layer.properties))
.setContent(`<b>${e.layer.properties.codNodo}</b><br > ${e.layer.properties.denominazione}` )
.setLatLng(e.latlng)
.openOn(map)
}
L.vectorGrid
// .protobuf('http://storm:3030/public.nodi,public.fermate,public.paline/{z}/{x}/{y}.pbf', {
// .protobuf('http://storm:3030/public.nodi,public.fermate,public.fermatecsr/{z}/{x}/{y}.pbf', {
// .protobuf('http://storm:3030/public.nodi/{z}/{x}/{y}.pbf', {
.protobuf('http://storm:3030/public.fermate/{z}/{x}/{y}.pbf', {
// .protobuf('http://storm:3030/public.paline/{z}/{x}/{y}.pbf', {
interactive: true,
vectorTileLayerStyles: {
'public.nodi': {
// icon: new L.Icon.Default(), // bi funge, cerca /marker-icon.png
color: 'blue',
fillColor: 'blue',
weight: 2,
radius: 12,
fill: true,
fillOpacity: 0.05,
},
'public.fermate': {
color: 'blue',
weight: 2,
fill: true,
fillColor: 'blue',
radius: 5,
fillOpacity: 1,
},
'public.paline': {
color: '#00ffff',
fill: true,
fillColor: '#00ffff',
radius: 2,
fillOpacity: 1,
},
'public.fermatecsr': {
color: '#ff0000',
fill: true,
fillColor: '#ff0000',
radius: 2,
fillOpacity: 1,
},
},
})
.on('click', onClick )
// .on('mouseover', onClick )
.addTo(map);
</script>
</body>
</html>