Package Exports

map-gl-indoor

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (map-gl-indoor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Mapbox GL Indoor Plugin

A mapboxgl-js plugin to enable multi-floors maps

Note: This is a work in progress and we welcome contributions.

Demo

https://map-gl-indoor.github.io/

Usage

Create an OSM indoor map following the Simple Indoor Tagging guidelines.

Transform the osm file into a geojson using osmtogeojson.

Then use the following code:

import { Map } from 'mapbox-gl';
import { IndoorMap, IndoorControl } from 'map-gl-indoor';

const map = new Map({
    accessToken,
    container,
    style: 'mapbox://styles/mapbox/streets-v10'
});

// Retrieve the geojson from the path and add the map
fetch('maps/gare-de-l-est.geojson')
    .then(res => res.json())
    .then(geojson => {
        const indoorMap = IndoorMap.fromGeojson(geojson);
        map.indoor.addMap(indoorMap);
    });

// Add the specific control
map.addControl(map.indoor.control);

Options

For the moment, refer to samples.

How does it work?

The library parses the geojson to find level tags and retrieve the map range (minimum and maximum levels).

If the viewport of the map intersects the building bounds, then the map is selected and the IndoorControl is visible.

When a level is set (initialisation or user click), only the geojson features which have the level property equals (or in the range of) to the current level are shown.

Developing

npm install & npm start

Then, visit http://localhost:9966/debug/index.html to load the samples

Put your mapbox access token in the web console: window.localStorage.setItem('MapboxAccessToken', '_YOUR_TOKEN_');

With docker-compose

Install and start: docker-compose up --build