-
Notifications
You must be signed in to change notification settings - Fork 1
/
icon-layer.html
96 lines (84 loc) · 2.71 KB
/
icon-layer.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
<!DOCTYPE html>
<head>
<title>Leaflet Panel Layers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<link rel="stylesheet" href="/src/leaflet-panel-layers.css" />
<link rel="stylesheet" href="icons.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<script src="src/leaflet-panel-layers.js"></script>
<!-- GEOJSON DATA -->
<script src="data/bar.js"></script>
<!-- <script src="data/fuel.js"></script>
<script src="data/parking.js"></script>
<script src="data/drinking_water.js"></script> -->
<script>
var map = L.map('map', {
zoom: 11,
attributionControl: false,
center: L.latLng([42.4918,12.4992]),
maxBounds: L.latLngBounds([[42.41281,12.28821],[42.5589,12.63805]]).pad(0.5)
}),
osmLayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(osmLayer);
function iconByName(name) {
return '<i class="icon icon-'+name+'"></i>';
}
// function featureToMarker(feature, latlng) {
// return L.marker(latlng, {
// icon: L.divIcon({
// className: 'marker-'+feature.properties.amenity,
// html: iconByName(feature.properties.amenity),
// iconUrl: '../images/markers/'+feature.properties.amenity+'.png',
// iconSize: [25, 41],
// iconAnchor: [12, 41],
// popupAnchor: [1, -34],
// shadowSize: [41, 41]
// })
// });
// }
var baseLayers = [
{
name: "OpenStreetMap",
layer: osmLayer
},
{
name: "OpenCycleMap",
layer: L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png')
},
{
name: "Outdoors",
layer: L.tileLayer('http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png')
}
];
var overLayers = [
{
name: "Bar",
icon: iconByName('bar'),
layer: L.geoJson(Bar, {pointToLayer: featureToMarker })
}
// {
// name: "Drinking Water",
// icon: iconByName('drinking_water'),
// layer: L.geoJson(Drinking_water, {pointToLayer: featureToMarker })
// },
// {
// name: "Fuel",
// icon: iconByName('fuel'),
// layer: L.geoJson(Fuel, {pointToLayer: featureToMarker })
// },
// {
// name: "Parking",
// icon: iconByName('parking'),
// layer: L.geoJson(Parking, {pointToLayer: featureToMarker })
// }
];
var panelLayers = new L.Control.PanelLayers(baseLayers, overLayers);
map.addControl(panelLayers);
</script>
<script type="text/javascript" src="https://labs.easyblog.it/labs-common.js"></script>
</body>
</html>