Floors
Some buildings have floor plans. They are displayed starting from style zoom 17 and closer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="Example of a building with floors" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
function initMap() {
const map = new mapgl.Map('container', {
center: [55.278765, 25.197039],
zoom: 18,
rotation: -3,
pitch: 45,
key: 'Your API access key',
});
}
</script>
<script src="https://mapgl.2gis.com/api/js/v1?callback=initMap" async defer></script>
</body>
</html>
Events
To catch floor plan appearing or disappearing on the map, you can subscribe to floorplanshow or floorplanhide map events accordingly. See FloorPlanShowEvent and FloorPlanHideEvent for more information about these events.
map.on('floorplanshow', (e) => {
alert(`Floor plan ${e.floorPlanId} shows.`);
});
map.on('floorplanhide', (e) => {
alert(`Floor plan ${e.floorPlanId} hides.`);
});
Also you can catch floor level changing within the floor plan by subscribing to floorlevelchange map event (see FloorLevelChangeEvent). This event is emitted when using the setFloorPlanLevel method of the map instance.
map.on('floorlevelchange', (e) => {
// do something
});
Try to zoom in until the floor plan is displayed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="Example of floor events" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
function initMap() {
const map = new mapgl.Map('container', {
center: [55.278765, 25.197039],
zoom: 16,
rotation: -3,
pitch: 45,
key: 'Your API access key',
});
map.on('floorplanshow', (e) => {
alert(`Floor plan ${e.floorPlanId} shows.`);
});
map.on('floorplanhide', (e) => {
alert(`Floor plan ${e.floorPlanId} hides.`);
});
}
</script>
<script src="https://mapgl.2gis.com/api/js/v1?callback=initMap" async defer></script>
</body>
</html>
Change a floor plan level
You can change a floor level by using the setFloorPlanLevel method of the map instance.
This method takes two arguments: floorPlanId and floorLevelIndex.
You can obtain these data from the floorplanshow event.
Аn example of the setFloorPlanLevel method use is the FloorControl.
In the example below the last level of the floor plan is displayed:
map.on('floorplanshow', (e) => {
const length = e.floorLevels.length;
const { floorLevelIndex } = e.floorLevels[length - 1];
map.setFloorPlanLevel(e.floorPlanId, floorLevelIndex);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="Example of floor level change" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
function initMap() {
const map = new mapgl.Map('container', {
center: [55.278765, 25.197039],
zoom: 18,
rotation: -3,
pitch: 45,
key: 'Your API access key',
});
map.on('floorplanshow', (e) => {
const length = e.floorLevels.length;
const { floorLevelIndex } = e.floorLevels[length - 1];
map.setFloorPlanLevel(e.floorPlanId, floorLevelIndex);
});
}
</script>
<script src="https://mapgl.2gis.com/api/js/v1?callback=initMap" async defer></script>
</body>
</html>