Floor plans
Floor plans are available for selected buildings and are shown on style zoom level 18 and above.
<!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: 19,
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
When a floor plan is displayed, it triggers the floorplanshow event (see FloorPlanShowEvent for the event object). Similarly, when a floor plan is hidden, it triggers the floorplanhide event (see FloorPlanHideEvent).
Additionally, when the floor number is changed (using FloorControl or the setFloorPlanLevel() method), the floorlevelchange event is triggered (see FloorLevelChangeEvent).
To subscribe to these events, use the on() method.
map.on('floorplanshow', (e) => {
alert(`Floor plan ${e.floorPlanId} is shown.`);
});
map.on('floorplanhide', (e) => {
alert(`Floor plan ${e.floorPlanId} is hidden.`);
});
map.on('floorlevelchange', (e) => {
alert('Floor number is changed.');
});
<!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 floor number
To change the floor number, call the setFloorPlanLevel() method and specify two parameters: the ID of the floor plan and the floor index. You can get the floor index as well as the floor plan ID, for example, by subscribing to FloorPlanShowEvent.
The example below changes the map behavior to initially show the last floor of the building by getting the index of the last floor and passing it to setFloorPlanLevel().
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: 19,
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>