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
|
Leaflet Indoor
=====================
Provides basic tools to create indoor maps with
[Leaflet](http://leafletjs.com).
This plugin provides a layer intended for displaying indoor data (rooms,
corridors, ...). It also provides a control component to change the level
displayed.
## Demo
You can see the demo included in the example directory
[here](http://cbaines.github.io/leaflet-indoor/examples/).
## Using the plugin
See the included example for usage.
### Basic Usage
Create a L.Indoor, then add the data to it.
// where data is a GeoJSON feature collection
var indoorLayer = new L.Indoor(data);
// set the initial level to show
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);
### Usage Instructions
The data should be a GeoJSON feature collection (or an array of GeoJSON
features). With the standard configuration, each feature must have a property
attribute "level", which can be a integer, string or array of either (or both).
{
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: ...,
properties: {
...
level: 1
....
}
},
{
type: "Feature",
geometry: ...,
properties: {
...
level: [2, 3]
....
}
}
]
}
If the data is not in this format, you can pass in a replacement getLevel
function, that will be used to get the level for each Feature.
var indoorLayer = new L.Indoor(data, {
getLevel: function(feature) {
return feature.properties.otherLevel;
}
onEachFeature
markerForFeature
});
L.Control.Level is the user interface component that allows for the easy
switching of levels. It takes in some levels (which you can get from the indoor
layer by using getLevels()), and displays a list.
var levelControl = new L.Control.Level({
level: "0",
levels: indoorLayer.getLevels()
});
When using the L.Control.Indoor, if the levels are not integers, by default,
the levels will be converted to integers for the ordering in the control. If
the levels given to the control are not integers, then the parseLevel option
can be used to replace the default function that uses parseInt(level, 10).
var levelControl = new L.Control.Level({
level: "1A",
levels: indoorLayer.getLevels()
parseLevel: function(level) {
var levels = {
"1A": 1,
"1B": 2,
"1C": 3,
"2": 4
};
return levels[level];
}
});
You can then bind the "levelchange" event, to change the level displayed by the
layer. Note that the levels that the control has must match that used by the
layer, if the levels in the control have been set via getLevels), this should
be the case.
levelControl.addEventListener("levelchange", indoorLayer.setLevel, indoorLayer);
## Events
L.Control.Level will fire levelchange events when a level is selected.
## License
Leaflet Indoor is free software, and may be redistributed under the BSD
2-Clause License.
|