> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)
# Add an indoor map with custom data
This example renders a custom indoor map for a three-floor building using inline GeoJSON data. The map includes color-coded room fills, extruded walls, door segments, room labels, and POI icons — all filtered to the active floor. Switching floors is handled by [`IndoorControl`](https://docs.mapbox.com/mapbox-gl-js/api/markers/), which reads the floor hierarchy from the indoor metadata source and presents a floor-selector UI automatically.
The example uses five GeoJSON sources passed into an inline style import:
- **`indoor-metadata`** — Defines the venue structure and its floor hierarchy. Each floor feature declares its `id`, `z_index`, whether it is the default floor, and which other floors it conflicts with (overlaps vertically). This source is what registers the style as an indoor venue.
- **`indoor-structure`** — The building footprint, used by a `clip` layer to cut a hole in Standard's 3D buildings so the interior is visible.
- **`indoor-floorplan`** — Room polygons, each tagged with a `floor_id` and a `name`.
- **`indoor-doors`** — Door line segments, rendered as short extruded walls.
- **`indoor-pois`** — Point features for restrooms, entrances, and other amenities.
Every layer that should respond to floor switching includes `filter: ['is-active-floor', ['get', 'floor_id']]`. The [`is-active-floor`](https://docs.mapbox.com/style-spec/reference/expressions/#is-active-floor) expression evaluates to `true` only when the feature's `floor_id` matches the floor selected by the `IndoorControl`.
To learn more about structuring your own indoor data, see the [indoor mapping guide](https://docs.mapbox.com/mapbox-gl-js/guides/indoor/).
> **Note (warning): Experimental feature**
>
> Indoor mapping is an experimental feature. APIs may change in future releases.
> Example code:
**JavaScript**
```html
Add an indoor map with custom data
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
// Building footprint — used to clip Standard's 3D buildings
const indoor_structure = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: { id: 'bldg1', name: 'Sample building' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.55985988590268, 62.13618464364573],
[22.559978568708463, 62.13632169114271],
[22.560180697786418, 62.13628253386055],
[22.56006236954941, 62.13614634084285],
[22.55985988590268, 62.13618464364573]
]
]
}
}
]
};
// Room polygons across three floors
const indoor_floorplan = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: { id: 'fp1', floor_id: 'fl1', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.559899139024996, 62.136229970770174],
[22.559988889051905, 62.13621349733241],
[22.559949256355438, 62.13616773789713],
[22.55985988590268, 62.13618464364573],
[22.559899139024996, 62.136229970770174]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp2', floor_id: 'fl1', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.559988889051905, 62.13621349733241],
[22.559899139024996, 62.136229970770174],
[22.559931380754403, 62.136267201512695],
[22.5599603062643, 62.1362618315251],
[22.56001244875283, 62.13625215132975],
[22.560021014400863, 62.13625058549413],
[22.560008078611762, 62.13623565334288],
[22.559988889051905, 62.13621349733241]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp3', floor_id: 'fl1', name: 'Entrance' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.559931380754403, 62.136267201512695],
[22.55995343528031, 62.13629266868025],
[22.55998228527195, 62.1362872112963],
[22.5599603062643, 62.1362618315251],
[22.559931380754403, 62.136267201512695]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp4', floor_id: 'fl1', name: 'Escalator' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.5599603062643, 62.1362618315251],
[22.55998228527195, 62.1362872112963],
[22.560026644756583, 62.13627882007049],
[22.56003428645981, 62.13627737453366],
[22.56001244875283, 62.13625215132975],
[22.5599603062643, 62.1362618315251]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp5', floor_id: 'fl1', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.55995343528031, 62.13629266868025],
[22.559978568708463, 62.13632169114271],
[22.560051509732777, 62.13630753255521],
[22.560026644756583, 62.13627882007049],
[22.55998228527195, 62.1362872112963],
[22.55995343528031, 62.13629266868025]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp6', floor_id: 'fl1', name: 'Restroom' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560026644756583, 62.13627882007049],
[22.560051509732777, 62.13630753255521],
[22.560069721193965, 62.13630403271195],
[22.560059709548774, 62.136292056330916],
[22.56004568245588, 62.13627527648248],
[22.56003428645981, 62.13627737453366],
[22.560026644756583, 62.13627882007049]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp7', floor_id: 'fl1', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.559949256355438, 62.13616773789713],
[22.559988889051905, 62.13621349733241],
[22.560008078611762, 62.13623565334288],
[22.56004943997653, 62.136227471770184],
[22.560060303814485, 62.13622534176475],
[22.56006612760063, 62.136231922479105],
[22.560077383128327, 62.13622968826485],
[22.56011001975968, 62.136223209915784],
[22.560126340708255, 62.13621997021811],
[22.56006236954941, 62.13614634084285],
[22.559949256355438, 62.13616773789713]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp8', floor_id: 'fl1', name: 'Hallway' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560008078611762, 62.13623565334288],
[22.560021014400863, 62.13625058549413],
[22.56006283608379, 62.1362429403177],
[22.560055048156645, 62.136233947562864],
[22.56004943997653, 62.136227471770184],
[22.560008078611762, 62.13623565334288]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp9', floor_id: 'fl1', name: 'Restroom' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560055048156645, 62.136233947562864],
[22.56006283608379, 62.1362429403177],
[22.560073363941296, 62.13625481731482],
[22.560096333060713, 62.13625041528782],
[22.560077383128327, 62.13622968826485],
[22.56006612760063, 62.136231922479105],
[22.56006612760063, 62.136231922479105],
[22.560055048156645, 62.136233947562864]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp10', floor_id: 'fl1', name: 'Entrance' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560069721193965, 62.13630403271195],
[22.560100567325133, 62.13629805707145],
[22.560090115949542, 62.13628626044384],
[22.560059709548774, 62.136292056330916],
[22.560069721193965, 62.13630403271195]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp11', floor_id: 'fl1', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560073363941296, 62.13625481731482],
[22.56009962817753, 62.136284447279344],
[22.56011006138738, 62.136296217842094],
[22.560180697786418, 62.13628253386055],
[22.560144730387048, 62.13624113994907],
[22.560128285913823, 62.1362442915316],
[22.560096333060713, 62.13625041528782],
[22.560073363941296, 62.13625481731482]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp12', floor_id: 'fl1', name: 'Hallway' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560077383128327, 62.13622968826485],
[22.560096333060713, 62.13625041528782],
[22.560128285913823, 62.1362442915316],
[22.56011001975968, 62.136223209915784],
[22.560077383128327, 62.13622968826485]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp13', floor_id: 'fl1', name: 'Entrance' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.56011001975968, 62.136223209915784],
[22.560128285913823, 62.1362442915316],
[22.560144730387048, 62.13624113994907],
[22.560126340708255, 62.13621997021811],
[22.56011001975968, 62.136223209915784]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp14', floor_id: 'fl1', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560090115949542, 62.13628626044384],
[22.560100567325133, 62.13629805707145],
[22.56011006138738, 62.136296217842094],
[22.56009962817753, 62.136284447279344],
[22.560090115949542, 62.13628626044384]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp15', floor_id: 'fl1', name: 'Hallway' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.56006283608379, 62.1362429403177],
[22.560021014400863, 62.13625058549413],
[22.56001244875283, 62.13625215132975],
[22.56003428645981, 62.13627737453366],
[22.56004568245588, 62.13627527648248],
[22.560059709548774, 62.136292056330916],
[22.560090115949542, 62.13628626044384],
[22.56009962817753, 62.136284447279344],
[22.560073363941296, 62.13625481731482],
[22.56006283608379, 62.1362429403177]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp16', floor_id: 'fl1', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.56004943997653, 62.136227471770184],
[22.560055048156645, 62.136233947562864],
[22.56006612760063, 62.136231922479105],
[22.560060303814485, 62.13622534176475],
[22.56004943997653, 62.136227471770184]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp17', floor_id: 'fl2', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.559904974502913, 62.13617611078146],
[22.559917431168138, 62.13619025964799],
[22.559872256885207, 62.136198931461095],
[22.559908118075512, 62.136240809286534],
[22.55999350410225, 62.136224859297045],
[22.559945018862688, 62.136168488859894],
[22.559904974502913, 62.13617611078146]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp18', floor_id: 'fl2', name: 'Laundry Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.55999945763912, 62.13625461998401],
[22.559992622153093, 62.13624686605793],
[22.56000975933428, 62.136243752171396],
[22.55999350410225, 62.136224859297045],
[22.559908118075512, 62.136240809286534],
[22.559931225825007, 62.13626710583608],
[22.559952532548017, 62.13626319852421],
[22.55999945763912, 62.13625461998401]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp19', floor_id: 'fl2', name: 'Restroom' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.55985988590268, 62.13618464364573],
[22.559872256885207, 62.136198931461095],
[22.559917431168138, 62.13619025964799],
[22.559904974502913, 62.13617611078146],
[22.55985988590268, 62.13618464364573]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp20', floor_id: 'fl2', name: 'Staircase' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.56000975933428, 62.136243752171396],
[22.559992622153093, 62.13624686605793],
[22.55999945763912, 62.13625461998401],
[22.560016427984184, 62.13625151757521],
[22.56000975933428, 62.136243752171396]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp21', floor_id: 'fl2', name: 'Common Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.559945018862688, 62.136168488859894],
[22.55999350410225, 62.136224859297045],
[22.56000975933428, 62.136243752171396],
[22.56005106327541, 62.136235989526156],
[22.56007993927899, 62.13623056258106],
[22.560127738686873, 62.13622157917646],
[22.56006236954941, 62.13614634084285],
[22.559945018862688, 62.136168488859894]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp22', floor_id: 'fl2', name: 'Technical Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.559931225825007, 62.13626710583608],
[22.559953826296603, 62.136293124749],
[22.559975924008118, 62.13628891286784],
[22.5599641883153, 62.13627601078331],
[22.559952532548017, 62.13626319852421],
[22.559931225825007, 62.13626710583608]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp23', floor_id: 'fl2', name: 'Staircase' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.5599641883153, 62.13627601078331],
[22.560015724972114, 62.13626641631028],
[22.56002943298432, 62.13626386431798],
[22.56001831814611, 62.136251172028],
[22.560016427984184, 62.13625151757521],
[22.55999945763912, 62.13625461998401],
[22.559952532548017, 62.13626319852421],
[22.5599641883153, 62.13627601078331]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp24', floor_id: 'fl2', name: 'Escalator' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560026683999606, 62.136279221583976],
[22.560015724972114, 62.13626641631028],
[22.5599641883153, 62.13627601078331],
[22.559975924008118, 62.13628891286784],
[22.559993215148943, 62.1362856171311],
[22.56001384636289, 62.13628167474833],
[22.560026683999606, 62.136279221583976]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp25', floor_id: 'fl2', name: 'Hallway' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.56001384636289, 62.13628167474833],
[22.56003822866789, 62.13631013133526],
[22.560065707585384, 62.136304807229756],
[22.5600451677822, 62.136281832237046],
[22.56004055527798, 62.136276565115956],
[22.560026683999606, 62.136279221583976],
[22.56001384636289, 62.13628167474833]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp26', floor_id: 'fl2', name: 'Staircase' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.559998325677164, 62.13630666949246],
[22.560004797206137, 62.13629943563597],
[22.559993215148943, 62.1362856171311],
[22.559975924008118, 62.13628891286784],
[22.559953826296603, 62.136293124749],
[22.5599698701455, 62.136311497586824],
[22.559998325677164, 62.13630666949246]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp27', floor_id: 'fl2', name: 'Bathroom' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560004797206137, 62.13629943563597],
[22.559998325677164, 62.13630666949246],
[22.5599698701455, 62.136311497586824],
[22.559978568708463, 62.13632169114271],
[22.56003822866789, 62.13631013133526],
[22.56001384636289, 62.13628167474833],
[22.559993215148943, 62.1362856171311],
[22.560004797206137, 62.13629943563597]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp28', floor_id: 'fl2', name: 'Kitchen' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560133907922474, 62.13626801348248],
[22.56011648270671, 62.1362475882872],
[22.560097616374918, 62.1362511265357],
[22.560068935277933, 62.13625650547392],
[22.560084554625522, 62.136274435456855],
[22.560084554625522, 62.136274435456855],
[22.56008659229186, 62.136276774383994],
[22.560133907922474, 62.13626801348248]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp29', floor_id: 'fl2', name: 'Storage Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.56007993927899, 62.13623056258106],
[22.560097616374918, 62.1362511265357],
[22.56011648270671, 62.1362475882872],
[22.560145589792583, 62.13624212914148],
[22.560127738686873, 62.13622157917646],
[22.56007993927899, 62.13623056258106]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp30', floor_id: 'fl2', name: 'Cellar' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.56016334171456, 62.13626256355816],
[22.560133907922474, 62.13626801348248],
[22.56008659229186, 62.136276774383994],
[22.560104467163185, 62.1362972919757],
[22.56018069038151, 62.13628253058775],
[22.56016334171456, 62.13626256355816]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp31', floor_id: 'fl2', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.5600451677822, 62.136281832237046],
[22.560084554625522, 62.136274435456855],
[22.560068935277933, 62.13625650547392],
[22.56005106327541, 62.136235989526156],
[22.56000975933428, 62.136243752171396],
[22.560016427984184, 62.13625151757521],
[22.56001831814611, 62.136251172028],
[22.56002943298432, 62.13626386431798],
[22.56004055527798, 62.136276565115956],
[22.5600451677822, 62.136281832237046]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp32', floor_id: 'fl2', name: 'Dressing Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560084554625522, 62.136274435456855],
[22.5600451677822, 62.136281832237046],
[22.560065707585384, 62.136304807229756],
[22.560104467163185, 62.1362972919757],
[22.56008659229186, 62.136276774383994],
[22.560084554625522, 62.136274435456855]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp33', floor_id: 'fl2', name: 'Restroom' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560097616374918, 62.1362511265357],
[22.56007993927899, 62.13623056258106],
[22.56005106327541, 62.136235989526156],
[22.560068935277933, 62.13625650547392],
[22.560097616374918, 62.1362511265357]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp34', floor_id: 'fl2', name: 'Storage Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.56011648270671, 62.1362475882872],
[22.560133907922474, 62.13626801348248],
[22.56016334171456, 62.13626256355816],
[22.560145589792583, 62.13624212914148],
[22.56011648270671, 62.1362475882872]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp35', floor_id: 'fl2', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560015724972114, 62.13626641631028],
[22.560026683999606, 62.136279221583976],
[22.56004055527798, 62.136276565115956],
[22.56002943298432, 62.13626386431798],
[22.560015724972114, 62.13626641631028]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp36', floor_id: 'fl3', name: 'Bedroom' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.559899222242404, 62.13623006686451],
[22.559920734589088, 62.13622605407512],
[22.559979902555202, 62.13621501706112],
[22.559971306722442, 62.136205145581386],
[22.55994001388955, 62.136169486247276],
[22.55985988590268, 62.13618464364573],
[22.559899222242404, 62.13623006686451]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp37', floor_id: 'fl3', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.559920734589088, 62.13622605407512],
[22.559925232085295, 62.13623138808432],
[22.55991747648256, 62.136237108537074],
[22.559906943956296, 62.13623898342328],
[22.559926946386067, 62.13626208098282],
[22.56000765135455, 62.136246873369956],
[22.559979902555202, 62.13621501706112],
[22.559920734589088, 62.13622605407512]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp38', floor_id: 'fl3', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.55990694316285, 62.13623898250707],
[22.55991747648256, 62.136237108537074],
[22.559925232085295, 62.13623138808432],
[22.559920734589088, 62.13622605407512],
[22.559899222242404, 62.13623006686451],
[22.55990694316285, 62.13623898250707]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp39', floor_id: 'fl3', name: 'Living Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.559940013889786, 62.13616948624729],
[22.559971306722442, 62.136205145581386],
[22.560009111512425, 62.13619788521598],
[22.560093241117425, 62.136181727779906],
[22.56006236954941, 62.13614634084285],
[22.559940013889786, 62.13616948624729]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp40', floor_id: 'fl3', name: 'Living Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560145759222333, 62.13624232045876],
[22.56009470821745, 62.13625185116255],
[22.560061940164527, 62.13625796882016],
[22.560072407682956, 62.136269876314934],
[22.56008899386418, 62.13628874418387],
[22.56009767338066, 62.13629861769842],
[22.560180697786418, 62.13628253386055],
[22.560145759222333, 62.13624232045876]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp41', floor_id: 'fl3', name: 'Bedroom' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560043320193234, 62.136236793027216],
[22.56012791023322, 62.136221159295225],
[22.560093241117425, 62.136181727779906],
[22.560009111512425, 62.13619788521598],
[22.560043320193234, 62.136236793027216]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp42', floor_id: 'fl3', name: 'Bathroom' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560054923410817, 62.1362499901281],
[22.560087886584668, 62.13624382248053],
[22.56009470821745, 62.13625185116255],
[22.560145759222333, 62.13624232045876],
[22.56012791023322, 62.136221159295225],
[22.560043320193234, 62.136236793027216],
[22.56005106770977, 62.136245604786886],
[22.560054923410817, 62.1362499901281]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp43', floor_id: 'fl3', name: 'Utility Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.559971306722442, 62.136205145581386],
[22.559979902555202, 62.13621501706112],
[22.56000765135455, 62.136246873369956],
[22.56001292658494, 62.136252929932134],
[22.56005106770977, 62.136245604786886],
[22.560043320193234, 62.136236793027216],
[22.560009111512425, 62.13619788521598],
[22.559971306722442, 62.136205145581386]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp44', floor_id: 'fl3', name: 'Escalator' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.56005106770977, 62.136245604786886],
[22.56001292658494, 62.136252929932134],
[22.559997487652957, 62.13625589503608],
[22.5599323685467, 62.136268401397935],
[22.559953474179384, 62.13629271359841],
[22.560008569515578, 62.136282136785795],
[22.560072407682956, 62.136269876314934],
[22.560061940164527, 62.13625796882016],
[22.560054923410817, 62.1362499901281],
[22.56005106770977, 62.136245604786886]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp45', floor_id: 'fl3', name: 'Utility Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.56002482408108, 62.13630074789613],
[22.560044299081422, 62.13629710486817],
[22.560072192725126, 62.136291887035945],
[22.56008899386418, 62.13628874418387],
[22.560072407682956, 62.136269876314934],
[22.560008569515578, 62.136282136785795],
[22.56002482408108, 62.13630074789613]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp46', floor_id: 'fl3', name: 'Kitchen' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560033774911975, 62.13631099637334],
[22.56002482408108, 62.13630074789613],
[22.560008569515578, 62.136282136785795],
[22.559953474179384, 62.13629271359841],
[22.559978568708463, 62.13632169114271],
[22.560033774911975, 62.13631099637334]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp47', floor_id: 'fl3', name: 'Bathroom' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.56008056589964, 62.136301931830715],
[22.560072192725126, 62.136291887035945],
[22.560044299081422, 62.13629710486817],
[22.560053174957183, 62.13630723811709],
[22.56008056589964, 62.136301931830715]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp48', floor_id: 'fl3', name: 'Restroom' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560053174957183, 62.13630723811709],
[22.560044299081422, 62.13629710486817],
[22.56002482408108, 62.13630074789613],
[22.560033775899782, 62.13631099618198],
[22.560053174957183, 62.13630723811709]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp49', floor_id: 'fl3', name: 'Utility Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.560072192725126, 62.136291887035945],
[22.56008056589964, 62.136301931830715],
[22.56009767338066, 62.13629861769842],
[22.56008899386418, 62.13628874418387],
[22.560072192725126, 62.136291887035945]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp50', floor_id: 'fl3', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.559954434424153, 62.136256905687915],
[22.559926946415946, 62.136262081017335],
[22.559930640247735, 62.13626611944013],
[22.559957989568467, 62.13626106097985],
[22.559954434424153, 62.136256905687915]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp51', floor_id: 'fl3', name: 'Room' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.56000765135455, 62.136246873369956],
[22.559976552349642, 62.13625273356787],
[22.559980074211442, 62.13625684740946],
[22.5599877971597, 62.13625525744526],
[22.559988943043468, 62.13625650140457],
[22.559996599027567, 62.13625491245543],
[22.559997487652957, 62.13625589503608],
[22.56001292658494, 62.136252929932134],
[22.56000765135455, 62.136246873369956]
]
]
}
},
{
type: 'Feature',
properties: { id: 'fp52', floor_id: 'fl3', name: 'Restroom' },
geometry: {
type: 'Polygon',
coordinates: [
[
[22.56009470821745, 62.13625185116255],
[22.560087886584668, 62.13624382248053],
[22.560054923410817, 62.1362499901281],
[22.560061940164527, 62.13625796882016],
[22.56009470821745, 62.13625185116255]
]
]
}
}
]
};
// Door line segments (rendered as thin extruded walls)
const indoor_door = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: { id: 'dr1', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.559937538000455, 62.13627431151201],
[22.559947320941905, 62.136285608232235]
]
}
},
{
type: 'Feature',
properties: { id: 'dr2', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560074417608583, 62.1363031229031],
[22.56009756037189, 62.13629863959097]
]
}
},
{
type: 'Feature',
properties: { id: 'dr3', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560130257312057, 62.136224478135794],
[22.5601400247283, 62.13623572019637]
]
}
},
{
type: 'Feature',
properties: { id: 'dr4', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.55997001292529, 62.136191706346686],
[22.559976878147364, 62.13619963389171]
]
}
},
{
type: 'Feature',
properties: { id: 'dr5', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.559997902889958, 62.13622391198546],
[22.560004768112027, 62.13623183952205]
]
}
},
{
type: 'Feature',
properties: { id: 'dr6', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.56005052128393, 62.13622872036117],
[22.560053310350586, 62.136231940909965]
]
}
},
{
type: 'Feature',
properties: { id: 'dr7', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.56001841556449, 62.136233608620174],
[22.560035590399128, 62.13623021131553]
]
}
},
{
type: 'Feature',
properties: { id: 'dr8', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560057000498432, 62.13623620194104],
[22.560061677549683, 62.13624160255327]
]
}
},
{
type: 'Feature',
properties: { id: 'dr9', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560031426714893, 62.13624868208029],
[22.560048840013483, 62.1362454988574]
]
}
},
{
type: 'Feature',
properties: { id: 'dr10', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.56007524465743, 62.13625693904329],
[22.56008241275044, 62.13626502572057]
]
}
},
{
type: 'Feature',
properties: { id: 'dr11', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.55996222595121, 62.13626404806181],
[22.559969005358006, 62.136271876493836]
]
}
},
{
type: 'Feature',
properties: { id: 'dr12', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.55997290995306, 62.1362763852734],
[22.559979989713323, 62.13628456053133]
]
}
},
{
type: 'Feature',
properties: { id: 'dr13', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560103852139147, 62.136289212678655],
[22.560108579818014, 62.13629454636202]
]
}
},
{
type: 'Feature',
properties: { id: 'dr14', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560063689762565, 62.13629129765047],
[22.56008764070571, 62.13628673228921]
]
}
},
{
type: 'Feature',
properties: { id: 'dr15', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560110138431586, 62.13624776949214],
[22.560128285913823, 62.1362442915316]
]
}
},
{
type: 'Feature',
properties: { id: 'dr16', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.5601139852856, 62.13622778667078],
[22.56012364381311, 62.13623893391926]
]
}
},
{
type: 'Feature',
properties: { id: 'dr17', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.56003301654082, 62.13628617780211],
[22.56004018211636, 62.13629445215138]
]
}
},
{
type: 'Feature',
properties: { id: 'dr18', floor_id: 'fl1', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560051862169658, 62.13628266893918],
[22.560058605464874, 62.13629073557573]
]
}
},
{
type: 'Feature',
properties: { id: 'dr19', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.559887097703783, 62.13617949390519],
[22.55989988710314, 62.13617707355469]
]
}
},
{
type: 'Feature',
properties: { id: 'dr20', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.5599365594633, 62.1362732462175],
[22.559946350340592, 62.136284518017426]
]
}
},
{
type: 'Feature',
properties: { id: 'dr21', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560019903004797, 62.13624184577442],
[22.5600371225971, 62.13623860953156]
]
}
},
{
type: 'Feature',
properties: { id: 'dr22', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560009836741166, 62.13624384230958],
[22.56001632156131, 62.13625139364961]
]
}
},
{
type: 'Feature',
properties: { id: 'dr23', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560017652547998, 62.13626866862154],
[22.560023294333885, 62.13627526086839]
]
}
},
{
type: 'Feature',
properties: { id: 'dr24', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560030892998274, 62.136301569878434],
[22.560036633948137, 62.13630827013873]
]
}
},
{
type: 'Feature',
properties: { id: 'dr25', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560048809965007, 62.13628114824156],
[22.560064625716876, 62.13627817807121]
]
}
},
{
type: 'Feature',
properties: { id: 'dr26', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560087725750172, 62.136278075419504],
[22.560094309796625, 62.13628563288928]
]
}
},
{
type: 'Feature',
properties: { id: 'dr27', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.56007044981169, 62.13625824405945],
[22.56007689002739, 62.136265637003355]
]
}
},
{
type: 'Feature',
properties: { id: 'dr28', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560061210738066, 62.136247638184095],
[22.56006761944989, 62.136254994985606]
]
}
},
{
type: 'Feature',
properties: { id: 'dr29', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.56008611819696, 62.136237750583966],
[22.5600918706617, 62.13624444248763]
]
}
},
{
type: 'Feature',
properties: { id: 'dr30', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560118882856887, 62.13625040165587],
[22.5601244287533, 62.13625690235156]
]
}
},
{
type: 'Feature',
properties: { id: 'dr31', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.5599553631904, 62.136266310025036],
[22.559962306627035, 62.13627394239324]
]
}
},
{
type: 'Feature',
properties: { id: 'dr32', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.55996640168927, 62.13627844414139],
[22.55997287663998, 62.136285562627194]
]
}
},
{
type: 'Feature',
properties: { id: 'dr33', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560004717892223, 62.13629952429285],
[22.559998325677164, 62.13630666949246]
]
}
},
{
type: 'Feature',
properties: { id: 'dr34', floor_id: 'fl2', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.559894774925247, 62.1361946088198],
[22.559912545806544, 62.13619119745918]
]
}
},
{
type: 'Feature',
properties: { id: 'dr35', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.55996097681037, 62.136193374274306],
[22.559967822181726, 62.13620117506617]
]
}
},
{
type: 'Feature',
properties: { id: 'dr36', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.559972453758938, 62.136206462841685],
[22.55997914039385, 62.136214141792884]
]
}
},
{
type: 'Feature',
properties: { id: 'dr37', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.559991040895657, 62.136227804155816],
[22.559997512719296, 62.136235233969494]
]
}
},
{
type: 'Feature',
properties: { id: 'dr38', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.559925232085295, 62.13623138808432],
[22.55991747648256, 62.136237108537074]
]
}
},
{
type: 'Feature',
properties: { id: 'dr39', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.559997487652957, 62.13625589503608],
[22.560009260538703, 62.13625363400988]
]
}
},
{
type: 'Feature',
properties: { id: 'dr40', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.56002406081155, 62.13625079156257],
[22.560039395625974, 62.136247846454296]
]
}
},
{
type: 'Feature',
properties: { id: 'dr41', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560019872587127, 62.13621012450839],
[22.560026230631404, 62.13621735593649]
]
}
},
{
type: 'Feature',
properties: { id: 'dr42', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.56004507998237, 62.136238794551275],
[22.560050276038385, 62.136244704367115]
]
}
},
{
type: 'Feature',
properties: { id: 'dr43', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.56004485520832, 62.136275167919706],
[22.56006072827244, 62.13627211941028]
]
}
},
{
type: 'Feature',
properties: { id: 'dr44', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560075208000804, 62.13627306186097],
[22.560081509643286, 62.13628023039321]
]
}
},
{
type: 'Feature',
properties: { id: 'dr45', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.56009046205977, 62.13629041435207],
[22.560095381182865, 62.13629601017466]
]
}
},
{
type: 'Feature',
properties: { id: 'dr46', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.56005208518906, 62.13629564838579],
[22.56006476969518, 62.13629327560057]
]
}
},
{
type: 'Feature',
properties: { id: 'dr47', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560017700471082, 62.1362925915188],
[22.56002386016946, 62.136299644239415]
]
}
},
{
type: 'Feature',
properties: { id: 'dr48', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560028989698537, 62.13629996866856],
[22.56004100637895, 62.13629772080753]
]
}
},
{
type: 'Feature',
properties: { id: 'dr49', floor_id: 'fl3', type: 'door' },
geometry: {
type: 'LineString',
coordinates: [
[22.560072865948317, 62.1362466329501],
[22.560085964516635, 62.136244182113366]
]
}
}
]
};
// POI points (restrooms, entrance)
const indoor_pois = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: { floor_id: 'fl1', type: 'restroom' },
geometry: {
type: 'Point',
coordinates: [22.56004829840031, 62.13629131579679]
}
},
{
type: 'Feature',
properties: { floor_id: 'fl1', type: 'restroom' },
geometry: {
type: 'Point',
coordinates: [22.560075568351934, 62.136242288925104]
}
},
{
type: 'Feature',
properties: { floor_id: 'fl2', type: 'restroom' },
geometry: {
type: 'Point',
coordinates: [22.55988861337595, 62.13618749634324]
}
},
{
type: 'Feature',
properties: { floor_id: 'fl2', type: 'restroom' },
geometry: {
type: 'Point',
coordinates: [22.560074379229246, 62.1362435337161]
}
},
{
type: 'Feature',
properties: { floor_id: 'fl3', type: 'restroom' },
geometry: {
type: 'Point',
coordinates: [22.560039001669278, 62.1363040260494]
}
},
{
type: 'Feature',
properties: { floor_id: 'fl3', type: 'restroom' },
geometry: {
type: 'Point',
coordinates: [22.560074864977903, 62.13625090323934]
}
},
{
type: 'Feature',
properties: { floor_id: 'fl1', type: 'entrance' },
geometry: { type: 'Point', coordinates: [22.560136, 62.136231] }
}
]
};
// Indoor metadata: defines the venue and its floor hierarchy.
const indoor_metadata = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
id: 'bldg1',
type: 'structure',
name: 'Sample building',
center_lon: 22.56002,
center_lat: 62.136234
},
geometry: {
type: 'Polygon',
coordinates: [
[
[22.55985988590268, 62.13618464364573],
[22.559978568708463, 62.13632169114271],
[22.560180697786418, 62.13628253386055],
[22.56006236954941, 62.13614634084285],
[22.55985988590268, 62.13618464364573]
]
]
}
},
{
type: 'Feature',
properties: {
id: 'fl1',
name: '1',
description: 'Floor 1',
type: 'floor',
z_index: 0,
is_default: true,
structure_ids: 'bldg1',
conflicted_floor_ids: 'fl2;fl3'
},
geometry: {
type: 'Polygon',
coordinates: [
[
[22.55985988590268, 62.13618464364573],
[22.559978568708463, 62.13632169114271],
[22.560180697786418, 62.13628253386055],
[22.56006236954941, 62.13614634084285],
[22.55985988590268, 62.13618464364573]
]
]
}
},
{
type: 'Feature',
properties: {
id: 'fl2',
name: '2',
description: 'Floor 2',
type: 'floor',
z_index: 1,
is_default: false,
structure_ids: 'bldg1',
conflicted_floor_ids: 'fl1;fl3'
},
geometry: {
type: 'Polygon',
coordinates: [
[
[22.55985988590268, 62.13618464364573],
[22.559978568708463, 62.13632169114271],
[22.560180697786418, 62.13628253386055],
[22.56006236954941, 62.13614634084285],
[22.55985988590268, 62.13618464364573]
]
]
}
},
{
type: 'Feature',
properties: {
id: 'fl3',
name: '3',
description: 'Floor 3',
type: 'floor',
z_index: 2,
is_default: false,
structure_ids: 'bldg1',
conflicted_floor_ids: 'fl1;fl2'
},
geometry: {
type: 'Polygon',
coordinates: [
[
[22.55985988590268, 62.13618464364573],
[22.559978568708463, 62.13632169114271],
[22.560180697786418, 62.13628253386055],
[22.56006236954941, 62.13614634084285],
[22.55985988590268, 62.13618464364573]
]
]
}
}
]
};
const activeFloor = ['is-active-floor', ['get', 'floor_id']];
const style = {
version: 8,
imports: [
{ id: 'standard', url: 'mapbox://styles/mapbox/standard' },
{
id: 'indoor',
url: '',
data: {
version: 8,
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
sprite: 'mapbox://sprites/mapbox/streets-v12',
indoor: { venue: { sourceId: 'indoor-metadata', sourceLayers: [] } },
sources: {
'indoor-metadata': { type: 'geojson', data: indoor_metadata },
'indoor-structure': { type: 'geojson', data: indoor_structure },
'indoor-floorplan': { type: 'geojson', data: indoor_floorplan },
'indoor-doors': { type: 'geojson', data: indoor_door },
'indoor-pois': { type: 'geojson', data: indoor_pois }
},
layers: [
{
id: 'indoor-clip',
type: 'clip',
source: 'indoor-structure',
minzoom: 15,
filter: ['is-active-floor'],
layout: { 'clip-layer-types': ['model', 'symbol'] }
},
{
id: 'indoor-structure-metadata',
type: 'fill',
source: 'indoor-metadata',
minzoom: 15,
paint: { 'fill-opacity': 0, 'fill-color': '#000000' }
},
{
id: 'indoor-rooms',
type: 'fill',
source: 'indoor-floorplan',
minzoom: 16,
slot: 'middle',
filter: activeFloor,
paint: {
'fill-color': [
'match',
['get', 'name'],
'Living Room',
'hsl(220, 70%, 88%)',
'Bedroom',
'hsl(260, 55%, 90%)',
'Kitchen',
'hsl(30, 75%, 85%)',
'Bathroom',
'hsl(190, 60%, 85%)',
'Hallway',
'hsl(0, 0%, 94%)',
'hsl(220, 25%, 90%)'
],
'fill-opacity': 1
}
},
{
id: 'indoor-room-walls',
type: 'fill-extrusion',
source: 'indoor-floorplan',
minzoom: 16,
slot: 'middle',
filter: activeFloor,
paint: {
'fill-extrusion-height': 3,
'fill-extrusion-line-width': 0.2,
'fill-extrusion-color': 'hsl(0, 0%, 100%)',
'fill-extrusion-cast-shadows': false
}
},
{
id: 'indoor-doors',
type: 'fill-extrusion',
source: 'indoor-doors',
minzoom: 16,
slot: 'middle',
filter: activeFloor,
paint: {
'fill-extrusion-height': 2.2,
'fill-extrusion-line-width': 0.3,
'fill-extrusion-color': 'hsl(28, 88%, 70%)',
'fill-extrusion-cast-shadows': false
}
},
{
id: 'indoor-labels',
type: 'symbol',
source: 'indoor-floorplan',
minzoom: 16,
filter: activeFloor,
layout: {
'text-field': ['to-string', ['get', 'name']],
'text-font': ['DIN Pro Medium', 'Arial Unicode MS Regular'],
'text-size': 13,
'text-anchor': 'top',
'symbol-z-elevate': false
},
paint: {
'text-color': 'hsl(210, 20%, 43%)',
'text-halo-color': '#ffffff',
'text-halo-width': 1.3
}
},
{
id: 'indoor-pois',
type: 'symbol',
source: 'indoor-pois',
minzoom: 16,
filter: activeFloor,
layout: {
'icon-image': [
'match',
['get', 'type'],
'restroom',
'toilet',
'entrance',
'entrance',
''
],
'icon-size': 1,
'icon-allow-overlap': true,
'symbol-z-elevate': false
},
paint: { 'symbol-z-offset': 3.4 }
}
]
}
}
],
sources: {},
layers: []
};
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: mapContainerRef.current,
style: style,
center: [22.56002, 62.136234],
zoom: 19.5,
pitch: 50,
bearing: -15
});
mapRef.current.addControl(new mapboxgl.IndoorControl());
return () => {
mapRef.current.remove();
};
}, []);
return ;
};
export default MapboxExample;
```