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, 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 itsid,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 acliplayer to cut a hole in Standard's 3D buildings so the interior is visible.indoor-floorplan— Room polygons, each tagged with afloor_idand aname.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 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.
Indoor mapping is an experimental feature. APIs may change in future releases.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add an indoor map with custom data</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.33.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.33.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// 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.
// Each floor feature declares its id, z_index, default floor, and which
// other floors it conflicts with (i.e. overlap in the same vertical space).
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]
]
]
}
}
]
};
// The `is-active-floor` expression evaluates to true for features whose
// floor_id matches the floor currently selected in IndoorControl.
const activeFloor = ['is-active-floor', ['get', 'floor_id']];
const style = {
version: 8,
imports: [
{
id: 'standard',
url: 'mapbox://styles/mapbox/standard'
},
{
// Inline style import that registers this as an indoor venue
// and defines all the sources and layers for the floor plans.
id: 'indoor',
url: '',
data: {
version: 8,
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
sprite: 'mapbox://sprites/mapbox/streets-v12',
// The `indoor` key registers this style as an indoor venue
// and points the engine to the metadata source.
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: [
// Clip Standard's 3D buildings over the footprint so the
// interior is visible when zoomed in.
{
id: 'indoor-clip',
type: 'clip',
source: 'indoor-structure',
minzoom: 15,
filter: ['is-active-floor'],
layout: { 'clip-layer-types': ['model', 'symbol'] }
},
// A zero-opacity fill that forces the indoor-metadata source
// to load; the engine only fetches a source when a visible
// layer references it.
{
id: 'indoor-structure-metadata',
type: 'fill',
source: 'indoor-metadata',
minzoom: 15,
paint: {
'fill-opacity': 0,
'fill-color': '#000000'
}
},
// Room fills, color-coded by room type
{
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%)',
/* default */
'hsl(220, 25%, 90%)'
],
'fill-opacity': 1
}
},
// Extruded walls give the floor plan a 3D appearance
{
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
}
},
// Doors rendered as short extruded line segments
{
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
}
},
// Room name labels
{
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
}
},
// POI icons (restrooms, entrance)
{
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 map = 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: 'map',
style: style,
center: [22.56002, 62.136234],
zoom: 19.5,
pitch: 50,
bearing: -15
});
// IndoorControl renders a floor-selector UI that updates automatically
// as the user navigates between floors defined in indoor_metadata.
map.addControl(new mapboxgl.IndoorControl());
</script>
</body>
</html>
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.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 <div ref={mapContainerRef} style={{ height: '100%' }}></div>;
};
export default MapboxExample;
YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.