Mappedin Mapbox Overlay
Using Mappedin JS with your own map requires a Pro license. Try a demo map for free or refer to the Pricing page for more information.
The Mappedin Mapbox Overlay package @mappedin/mapbox-overlay makes it possible to embed a Mappedin indoor map inside an existing Mapbox GL JS application. The overlay adds a MapView to a Mapbox Map as a control, allowing the host Mapbox map to provide outdoor context, custom basemaps, terrain, sky, and 3D buildings while Mappedin renders the indoor portion.
In most cases, it is recommended to use the Mappedin JS package directly. The Mappedin Mapbox Overlay is recommended for the following use cases:
- Adding Mappedin to an existing Mapbox GL JS application.
- Displaying multiple Mappedin maps separated by long distances (5+ km) on the same Mapbox map.
- Combining Mappedin indoor data with Mapbox basemap features such as 3D building extrusions, atmospheric sky, or custom styles.
Installation
The version of the @mappedin/mapbox-overlay package must match the version of the @mappedin/mappedin-js package.
Mappedin Mapbox Overlay is provided as a separate package that works in conjunction with Mappedin JS. To install the @mappedin/mapbox-overlay package from npm, run the following command:
With NPM:
npm install @mappedin/mapbox-overlay mapbox-gl
With Yarn:
yarn add @mappedin/mapbox-overlay mapbox-gl
Mapbox Access Token
Mapbox GL JS requires a public access token to load basemap tiles. Sign in to the Mapbox account dashboard and create a token, then assign it to mapboxgl.accessToken before constructing the map. The examples below include a demo token that may be replaced with a token from a Mapbox account.
Getting Started
The example below creates a Mapbox map centered on the indoor map's location, adds a MappedinMapboxOverlay using the Mapbox addControl method, and listens for the overlay's loaded event to access the MapView and MapData instances. Clicking a space focuses the camera on it.
3D Buildings and Indoor Navigation
The Mapbox basemap is a fully styleable 3D scene. The example below adds an atmospheric sky layer and the standard Mapbox 3D building extrusions, places the Mappedin indoor map inside that scene, and draws an indoor Navigation path between a space on the ground floor and a space on an upper floor. Multi-floor view is enabled with a floorGap so the floors of the building remain visible at the same time.
The 3D buildings layer is inserted below the first symbol label layer so basemap labels remain readable, and the indoor MapView hides the building footprint at the venue location automatically.
Dynamic Focus
The @mappedin/dynamic-focus package automatically adjusts the camera, floor selection, and facade heights as the host map is panned and zoomed. The example below loads the multi-floor airport demo on a below-ground parking floor, enables Dynamic Focus, then focuses the camera on the terminal floor stack so the camera lifts up through the building as the scene loads.
A pair of <select> dropdowns above the map provide a building (floor stack) and level (floor) selector that stays in sync with the FloorStack and Floor currently displayed by the MapView. Clicking a space focuses the camera on it. When the floor changes, the camera reframes around the floor's stack so the building's full footprint stays visible.