Vue2-leaflet-floormap-service NPM

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: 1. 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>',
            ],
}