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
|
<!DOCTYPE html>
<html>
<head>
<title>Indoor Map Example</title>
<link rel="stylesheet" href="leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="libs/leaflet.ie.css" /><![endif]-->
<style type="text/css">
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
.info {
width: 150px;
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,1);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="jquery.min.js"></script>
<script src="leaflet-src.js"></script>
<script src="../leaflet-indoor.js"></script>
<script type="text/JavaScript">
// Create the map
var osmUrl = '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osm = new L.TileLayer(osmUrl, {
maxZoom: 22,
attribution: "Map data © OpenStreetMap contributors"
});
var map = new L.Map('map', {
layers: [osm],
center: new L.LatLng(49.41873, 8.67689),
zoom: 19
});
// This example uses a GeoJSON FeatureCollection saved to a file
// (data.json), see the other example (live/index.html) for details on
// fetching data using the OverpassAPI (this is also how the data in
// data.json was generated)
$.getJSON("data.json", function(geoJSON) {
var indoorLayer = new L.Indoor(geoJSON, {
getLevel: function(feature) {
if (feature.properties.relations.length === 0)
return null;
return feature.properties.relations[0].reltags.level;
},
onEachFeature: function(feature, layer) {
layer.bindPopup(JSON.stringify(feature.properties, null, 4));
},
style: function(feature) {
var fill = 'white';
if (feature.properties.tags.buildingpart === 'corridor') {
fill = '#169EC6';
} else if (feature.properties.tags.buildingpart === 'verticalpassage') {
fill = '#0A485B';
}
return {
fillColor: fill,
weight: 1,
color: '#666',
fillOpacity: 1
};
}
});
indoorLayer.setLevel("0");
indoorLayer.addTo(map);
var levelControl = new L.Control.Level({
level: "0",
levels: indoorLayer.getLevels()
});
// Connect the level control to the indoor layer
levelControl.addEventListener("levelchange", indoorLayer.setLevel, indoorLayer);
levelControl.addTo(map);
});
var legend = L.control({position: 'topright'});
legend.onAdd = function(map) {
var d = "This Leaflet plugin makes it easier to create indoor " +
"maps. This example pulls in the data for a particular " +
"building, and then displays it on the map, you can " +
"change the level displayed by using the selector at " +
"the bottom right of the map."
var div = L.DomUtil.create('div', 'info legend');
div.appendChild(document.createTextNode(d));
return div;
};
legend.addTo(map);
</script>
</body>
</html>
|