Git Product home page Git Product logo

leaflet-indoor's Introduction

Leaflet Indoor

Provides basic tools to create indoor maps with Leaflet.

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.

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.

leaflet-indoor's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.