vue2-leaflet-floormap-service
v1.0.16
Published
Floormap service for Smart Dock and Smart Indoor Positioning
Downloads
8
Readme
Leatlet Floor Map Service
Leatlet Floor Map Service is developed for Smart Dock and Smart Indoor Positioning web portal.
Installation
npm install vue2-leaflet-floormap-service
Usage
Currently only support vue2:
<div id="map" ref="map" class="floormap-container">
<div
id="map-image-container-id"
style="width: 100%; height: 50vw"
>
</div>
</div>
import FloorMapService from "vue2-leaflet-floormap-service"
Create FloorMapService class:
const floormap = new FloorMapService(
"{{map-image-container-id}}",
{
width: {{map-image-width}},
height: {{map-image-height}},
url: {{map-image-url}}
},
{
width: {{map-width-in-meters}},
height: {{map-height-in-meters}},
floormap: true,
zone: false,
dock: false,
legend: true,
fullscreen: true
},
{
mapControllers,
mapElements,
mapDecorators,
mapLegend
}
)
Floor Map Options
- floormap: set true if the map is view only.
- zone: set true if you wish to show rectangle editor buttons. (floormap must be false)
- dock: set true if you wish to show circle editor buttons. (floormap must be false)
- legend: set true to show map legend. (mapLegend cannot be null or undefined)
- fullscreen: set true to show fullscreen button on map.
Map Controllers
Currently support 5 controllers:
- Tooltip controller
{
type: "elements",
target: "nameTooltips",
value: {{boolean}},
}
- Elements display controller:
{
type: "elements",
target: "{{type of elements}}",
value: {{boolean}},
}
- Tracker range controller:
{
type: "elements",
target: "trackerRange",
value: {{boolean}},
}
- Connection controller:
{
type: "decorators",
target: "Connection",
value: {{boolean}},
}
- Installation Quality controller:
{
type: "decorators",
target: "InstallQuality",
value: {{boolean}},
}
Map Elements
{
Anchor: {
type: "circle",
data: {{ anchor array}},
options: {
markers: {
lowBattery: {
trigger: "lowBatt",
icon: {
iconUrl: "./images/low_battery.png",
iconSize: [18, 18],
iconAnchor: [9, 9],
popupAnchor: [0, 0],
}
}
}
}
},
Tracker: {
type: "circle",
data: {{ tracker array }},
options: {
markers: {
lowBattery: {
trigger: "lowBatt",
icon: {
iconUrl: "./images/low_battery.png",
iconSize: [18, 18],
iconAnchor: [9, 9],
popupAnchor: [0, 0],
}
}
}
}
}
}
Map Decorators
{
Connection: {
type: "polyline",
data: {{ connection array }},
options: {
markers: {},
},
},
InstallQuality: {
type: "donus",
data: {{ quality array }},
options: {
markers: {},
},
}
}
Map Legend
{
width: 250 (default 250),
labels: [
'<strong style="margin:0 0 20px 5px;;font-size:15px">Nodes:</strong>',
],
defaultCats: ["Sink", "Anchor", "Tracker (default)"],
defaultColors: ["blue", "blue", "red"],
additionalCatType: "Tracker",
additionalCats: this.trackerClasses,
additionalEntries: [
'<strong style="margin-left:5px;margin-bottom:20px;font-size:15px">Mesh:</strong>',
'<div style="height:15px;width:15px;display: inline-block;margin-left:8px;"><div class="line" style="border-top: 2px dotted green;width: 100%;transform: rotate(45deg) scale(1.5);transform-origin: top left;"></div></div><span style="font-size:15px"> Connection quality (Good)</span>',
'<div style="height:15px;width:15px;display: inline-block;margin-left:8px;"><div class="line" style="border-top: 2px dotted #ff9900;width: 100%;transform: rotate(45deg) scale(1.5);transform-origin: top left;"></div></div><span style="font-size:15px"> Connection quality (Average)</span>',
'<div style="height:15px;width:15px;display: inline-block;margin-left:8px;"><div class="line" style="border-top: 2px dotted red;width: 100%;transform: rotate(45deg) scale(1.5);transform-origin: top left;"></div></div><span style="font-size:15px"> Connection quality (Bad)</span>',
'<i class="circle" style="height:15px;width:15px;background:blue;border-radius:50%;border:solid green 3px;display:inline-block;margin-left:8px;"></i><span style="font-size:15px"> Installation quality (Good)</span>',
'<i class="circle" style="height:15px;width:15px;background:blue;border-radius:50%;border:solid #ff9900 3px;display:inline-block;margin-left:8px;"></i><span style="font-size:15px"> Installation quality (Average)</span>',
'<i class="circle" style="height:15px;width:15px;background:blue;border-radius:50%;border:solid red 3px;display:inline-block;margin-left:8px;"></i><span style="font-size:15px"> Installation quality (Bad)</span>',
],
}
License
This project is licensed under the MIT License - see the LICENSE file for details