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>