MapGL Indoor Plugin

A mapboxgl-js plugin to enable multi-floors maps

The project should works with maplibre-gl-js too.

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

Demo

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

or examples in the debug directory.

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 { addIndoorTo, IndoorControl, IndoorMap } from 'map-gl-indoor';

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

// Create the indoor logic behind the map.indoor property
addIndoorTo(map);

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

// Add the specific control
map.addControl(new IndoorControl());

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.

Provide geojson maps from a server

Have a look at the side project indoor-maps-server and the file debug/with-map-server.html

Developing

npm install & npm run dev

Then, visit http://localhost:3000/example to load the samples