Configuring an interactive scene for the glTF plugin v2
You can configure an interactive real estate scene for the glTF plugin v2 using the tool for model placement on the map. Using the tool, you can place and position models on the map. A configuration file of the interactive scene is generated automatically.
To configure an interactive scene:
You can also specify optional settings of a scene: popup, camera angle, and others.
1. Place models on the map
-
Make sure models meet requirements.
-
Open the tool for model placement on the map.
-
Open the map area to add models:
-
Click Add model and select a model from the list of files:
Note
If you need to add one model to the map in multiple copies (for example, for a typical building), add the model from the same file the required number of times.
-
Click on the added model. The model is highlighted in green, and a pane with its positioning settings is opened:
-
To hide an object on the map that overlays the model, click on it or add the building ID to the Building IDs field:
-
Position the added model on the map:
- Specify the exact coordinates of the model in the Coordinates block, in the Longitude and Latitude fields. You can also move the model manually: use the arrow keys or hold down and drag the model using the mouse.
- Specify the model rotation values for each axis in the Rotation block, in the X, Y, Z fields. You can also rotate the model around the Z axis: hold down the
Rkey, wait until the cursor changes to the
icon, hold down and rotate the model using the mouse. - Specify the model scale value in the Scale block, in the X, Y, Z field. You can also change the scale of the model manually: hold down the
Skey, wait until the cursor changes to the
icon, hold the model using the mouse and move it away from the model (to zoom in) or toward the center (to zoom out).
-
If you need to place multiple models on the scene, add them and repeat the steps above for each added model:
If you need to remove a model from the scene, click the
icon next to the model name and confirm the deleting. -
To view the resulting scene, clear the selection of the last edited model. To do this, close the model parameters pane or press the
Esckey. Check the display of the model by rotating and zooming the map:
-
Click Get scene config and download the
mapgl-gltf-config.jsonconfiguration file. The file contains a preliminary configuration of the interactive scene and an array of settings for each model.
Configuration file example:
mapgl-gltf-config.json
[
{
modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
coordinates: [55.27088522875024, 25.196681784153185],
modelUrl: 'standpointtowers2.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: -116.60999999999991,
scale: 1,
linkedIds: ['13933647002601472'],
floors: [],
},
{
modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
coordinates: [55.27088606843354, 25.19668331126981],
modelUrl: 'standpointtowers3.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: 243.91000000000005,
scale: 1,
linkedIds: ['13933647002601471'],
floors: [],
},
{
modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
coordinates: [55.27067156776716, 25.197123844470752],
modelUrl: 'standpointtowers6.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: 59.63999999999995,
scale: 1,
linkedIds: ['70030076452542637', '13933647002603034'],
floors: [],
},
{
modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
coordinates: [55.270887739054025, 25.19668130155175],
modelUrl: 'standpointtowers_center.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: -116.40999999999987,
scale: 1,
linkedIds: ['13933647002592567'],
floors: [],
},
];
2. Configure floor plans
-
Open the downloaded configuration file
mapgl-gltf-config.json. -
Fill in the
floorsarray for each model. For each building, floors are filled from the bottom to the top (from the floor with a negative number or a parking lot to the highest floor).For example, to add a floor to the building with
modelId = standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a(the first building in the configuration file), add an object to thefloorsarray with the basic floor parameters:{ modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a', coordinates: [55.27088522875024, 25.196681784153185], modelUrl: 'standpointtowers2.glb', interactive: true, rotateX: 0, rotateY: 0, rotateZ: -116.60999999999991, scale: 1, linkedIds: ['13933647002601472'], floors: [{ id: '2', text: '2', modelUrl: 'standpointtowers4-2.glb', }], }Specify parameters:
id- unique floor ID in the building.text- floor name in the UI element with floor buttons. For example, for a parking lot, you can specify the namePor-1.modelUrl- path to the file with floor model. If the path is not absolute, the resulting URL is built based on themodelsBaseUrlparameter from the PluginOptions.
-
To display the underground floor, add the
isUndergroundproperty with thetruevalue:{ ... floors: [{ id: '2', text: '2', modelUrl: 'standpointtowers4-2.glb', isUnderground: true, }], } -
Add other floors to the building:
{ ... floors: [ { id: '2', text: '2', modelUrl: 'standpointtowers4-2.glb', isUnderground: true, }, { id: '3', text: '3-17', modelUrl: 'standpointtowers4-3.glb', }, ], } -
If necessary, add floors to other buildings and repeat the steps above for each building.
Example of a configuration file with floor plan settings:
mapgl-gltf-config.json
[
{
modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
coordinates: [55.27088522875024, 25.196681784153185],
modelUrl: 'standpointtowers2.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: -116.60999999999991,
scale: 1,
linkedIds: ['13933647002601472'],
floors: [
{
id: '2',
text: '2',
modelUrl: 'standpointtowers4-2.glb',
isUnderground: true,
},
{
id: '3',
text: '3-17',
modelUrl: 'standpointtowers4-3.glb',
},
],
},
{
modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
coordinates: [55.27088606843354, 25.19668331126981],
modelUrl: 'standpointtowers3.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: 243.91000000000005,
scale: 1,
linkedIds: ['13933647002601471'],
floors: [
{
id: '112',
text: '1-12',
modelUrl: 'standpointtowers5-2_without_transforms.glb',
},
{
id: '1320',
text: '13-20',
modelUrl: 'standpointtowers5-1.glb',
},
],
},
{
modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
coordinates: [55.27067156776716, 25.197123844470752],
modelUrl: 'standpointtowers6.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: 59.63999999999995,
scale: 1,
linkedIds: ['70030076452542637', '13933647002603034'],
floors: [],
},
{
modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
coordinates: [55.270887739054025, 25.19668130155175],
modelUrl: 'standpointtowers_center.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: -116.40999999999987,
scale: 1,
linkedIds: ['13933647002592567'],
floors: [],
},
];
3. Add an interactive scene to the map
-
Add an interactive real estate scene to the map with the configuration file data using the
addRealtyScene()method:plugin.addRealtyScene([ { modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a', coordinates: [55.27088522875024, 25.196681784153185], modelUrl: 'standpointtowers2.glb', interactive: true, rotateX: 0, rotateY: 0, rotateZ: -116.60999999999991, scale: 1, linkedIds: ['13933647002601472'], floors: [ { id: '2', text: '2', modelUrl: 'standpointtowers4-2.glb', isUnderground: true, }, { id: '3', text: '3-17', modelUrl: 'standpointtowers4-3.glb', }, ], }, { modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619', coordinates: [55.27088606843354, 25.19668331126981], modelUrl: 'standpointtowers3.glb', interactive: true, rotateX: 0, rotateY: 0, rotateZ: 243.91000000000005, scale: 1, linkedIds: ['13933647002601471'], floors: [ { id: '112', text: '1-12', modelUrl: 'standpointtowers5-2_without_transforms.glb', }, { id: '1320', text: '13-20', modelUrl: 'standpointtowers5-1.glb', }, ], }, { modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0', coordinates: [55.27067156776716, 25.197123844470752], modelUrl: 'standpointtowers6.glb', interactive: true, rotateX: 0, rotateY: 0, rotateZ: 59.63999999999995, scale: 1, linkedIds: ['70030076452542637', '13933647002603034'], floors: [], }, { modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6', coordinates: [55.270887739054025, 25.19668130155175], modelUrl: 'standpointtowers_center.glb', interactive: true, rotateX: 0, rotateY: 0, rotateZ: -116.40999999999987, scale: 1, linkedIds: ['13933647002592567'], floors: [], }, ]);
Example of an interactive scene:
<!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="glTF plugin example" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script src="https://unpkg.com/@2gis/mapgl-gltf@^2/dist/bundle.js"></script>
<div id="container"></div>
<script>
const map = new mapgl.Map('container', {
center: [55.270872255787253, 25.196689173834102],
zoom: 17.9,
key: 'Your API access key',
pitch: 45,
rotation: 330,
enableTrackResize: true,
maxZoom: 20.7,
});
const plugin = new mapgl.GltfPlugin(map, {
modelsLoadStrategy: 'waitAll',
modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/standpointtowers/',
labelGroupDefaults: {
fontSize: 14,
},
hoverOptions: {
color: '#FFF3F3',
},
});
plugin.addRealtyScene([
{
modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
coordinates: [55.27088522875024, 25.196681784153185],
modelUrl: 'standpointtowers2.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: -116.60999999999991,
scale: 1,
linkedIds: ['13933647002601472'],
floors: [
{
id: '2',
text: '2',
modelUrl: 'standpointtowers4-2.glb',
isUnderground: true,
},
{
id: '3',
text: '3-17',
modelUrl: 'standpointtowers4-3.glb',
},
],
},
{
modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
coordinates: [55.27088606843354, 25.19668331126981],
modelUrl: 'standpointtowers3.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: 243.91000000000005,
scale: 1,
linkedIds: ['13933647002601471'],
floors: [
{
id: '112',
text: '1-12',
modelUrl: 'standpointtowers5-2_without_transforms.glb',
},
{
id: '1320',
text: '13-20',
modelUrl: 'standpointtowers5-1.glb',
},
],
},
{
modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
coordinates: [55.27067156776716, 25.197123844470752],
modelUrl: 'standpointtowers6.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: 59.63999999999995,
scale: 1,
linkedIds: ['70030076452542637', '13933647002603034'],
floors: [],
},
{
modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
coordinates: [55.270887739054025, 25.19668130155175],
modelUrl: 'standpointtowers_center.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: -116.40999999999987,
scale: 1,
linkedIds: ['13933647002592567'],
floors: [],
},
]);
</script>
</body>
</html>Optional settings
Building interactivity
You can add placeholder buildings, adjacent territories, city infrastructure objects, and environmental objects to the scene. For example, the scene in the example includes a building under construction with no floors. To make a building on the map non-interactive (e.g., unable to view floors), change the interactive property to false:
{
modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
coordinates: [55.270887739054025, 25.19668130155175],
modelUrl: 'standpointtowers_center.glb',
interactive: false,
rotateX: 0,
rotateY: 0,
rotateZ: -116.40999999999987,
scale: 1,
linkedIds: ['13933647002592567'],
floors: [],
}
Building popup
To display additional information about a building when you hover over it, add the popupOptions property to the building options.
Example file:
mapgl-gltf-config.json
[
{
modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
coordinates: [55.27088522875024, 25.196681784153185],
modelUrl: 'standpointtowers2.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: -116.60999999999991,
scale: 1,
linkedIds: ['13933647002601472'],
popupOptions: {
coordinates: [55.271024122768324, 25.19693053802895],
title: 'Apartments Tower B',
description:
'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
},
floors: [
{
id: '2',
text: '2',
modelUrl: 'standpointtowers4-2.glb',
isUnderground: true,
},
{
id: '3',
text: '3-17',
modelUrl: 'standpointtowers4-3.glb',
},
],
},
{
modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
coordinates: [55.27088606843354, 25.19668331126981],
modelUrl: 'standpointtowers3.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: 243.91000000000005,
scale: 1,
linkedIds: ['13933647002601471'],
popupOptions: {
coordinates: [55.270872255787253, 25.196689173834102],
title: 'Apartments Tower A',
description:
'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
},
floors: [
{
id: '112',
text: '1-12',
modelUrl: 'standpointtowers5-2_without_transforms.glb',
},
{
id: '1320',
text: '13-20',
modelUrl: 'standpointtowers5-1.glb',
},
],
},
{
modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
coordinates: [55.27067156776716, 25.197123844470752],
modelUrl: 'standpointtowers6.glb',
interactive: false,
rotateX: 0,
rotateY: 0,
rotateZ: 59.63999999999995,
scale: 1,
linkedIds: ['70030076452542637', '13933647002603034'],
floors: [],
},
{
modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
coordinates: [55.270887739054025, 25.19668130155175],
modelUrl: 'standpointtowers_center.glb',
interactive: false,
rotateX: 0,
rotateY: 0,
rotateZ: -116.40999999999987,
scale: 1,
linkedIds: ['13933647002592567'],
floors: [],
},
];
Important
If the interactivity option is disabled for a building, the popup does not appear when you hover over the building.
Camera angle for buildings and floors
To change the camera angle when a building or floor plan is activated, add the mapOptions property with map parameters to options of each building and options of each floor plan.
-
To get the map options, open the browser Developer Tools (press
F12), find the appropriate camera angle for the building or floor, and run the code on the console:console.log(`mapOptions: { center: [${map.getCenter()}], pitch: ${map.getPitch()}, zoom: ${map.getZoom()}, rotation: ${map.getRotation()}, }`);Example of adding map options for the first building and its floors:
{ modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a', coordinates: [55.27088522875024, 25.196681784153185], modelUrl: 'standpointtowers2.glb', interactive: true, rotateX: 0, rotateY: 0, rotateZ: -116.60999999999991, scale: 1, linkedIds: ['13933647002601472'], popupOptions: { coordinates: [55.271024122768324, 25.19693053802895], title: 'Apartments Tower B', description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ', }, mapOptions: { center: [55.27104661856671, 25.19654143333551], pitch: 45, zoom: 19, rotation: -173, }, floors: [ { id: '2', text: '2', modelUrl: 'standpointtowers4-2.glb', isUnderground: true, mapOptions: { center: [55.27101659214413, 25.19692572574951], pitch: 17.8, zoom: 20.8, rotation: 137.02588223579758, }, }, { id: '3', text: '3-17', modelUrl: 'standpointtowers4-3.glb', mapOptions: { center: [55.27101659214413, 25.19692572574951], pitch: 17.8, zoom: 20.75, rotation: 137.02588223579758, }, }, ], } -
Repeat the steps above for each building.
File example:
mapgl-gltf-config.json[ { modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a', coordinates: [55.27088522875024, 25.196681784153185], modelUrl: 'standpointtowers2.glb', interactive: true, rotateX: 0, rotateY: 0, rotateZ: -116.60999999999991, scale: 1, linkedIds: ['13933647002601472'], popupOptions: { coordinates: [55.271024122768324, 25.19693053802895], title: 'Apartments Tower B', description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ', }, mapOptions: { center: [55.27104661856671, 25.19654143333551], pitch: 45, zoom: 19, rotation: -173, }, floors: [ { id: '2', text: '2', modelUrl: 'standpointtowers4-2.glb', isUnderground: true, mapOptions: { center: [55.27101659214413, 25.19692572574951], pitch: 17.8, zoom: 20.8, rotation: 137.02588223579758, }, }, { id: '3', text: '3-17', modelUrl: 'standpointtowers4-3.glb', mapOptions: { center: [55.27101659214413, 25.19692572574951], pitch: 17.8, zoom: 20.75, rotation: 137.02588223579758, }, }, ], }, { modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619', coordinates: [55.27088606843354, 25.19668331126981], modelUrl: 'standpointtowers3.glb', interactive: true, rotateX: 0, rotateY: 0, rotateZ: 243.91000000000005, scale: 1, linkedIds: ['13933647002601471'], popupOptions: { coordinates: [55.270872255787253, 25.196689173834102], title: 'Apartments Tower A', description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ', }, mapOptions: { center: [55.27125168787015, 25.196926809413966], pitch: 52, zoom: 18.7, rotation: -35.4, }, floors: [ { id: '112', text: '1-12', modelUrl: 'standpointtowers5-2_without_transforms.glb', mapOptions: { center: [55.27084419010903, 25.19649935503182], pitch: 9.2, zoom: 19.97, rotation: -12.398906380706755, }, }, { id: '1320', text: '13-20', modelUrl: 'standpointtowers5-1.glb', mapOptions: { center: [55.27084419010903, 25.19649935503182], pitch: 9.2, zoom: 19.8, rotation: -12.398906380706755, }, }, ], }, { modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0', coordinates: [55.27067156776716, 25.197123844470752], modelUrl: 'standpointtowers6.glb', interactive: false, rotateX: 0, rotateY: 0, rotateZ: 59.63999999999995, scale: 1, linkedIds: ['70030076452542637', '13933647002603034'], floors: [], }, { modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6', coordinates: [55.270887739054025, 25.19668130155175], modelUrl: 'standpointtowers_center.glb', interactive: false, rotateX: 0, rotateY: 0, rotateZ: -116.40999999999987, scale: 1, linkedIds: ['13933647002592567'], floors: [], }, ];
Floor labels
You can place labels on the floor plan, e.g., with information about rooms. To do this, configure label groups for each floor and specify the coordinates and height of the labels.
-
To get the coordinates, open the browser Developer Tools (press
F12), and run the code on the console:map.on('click', ({ lngLat }) => { console.log(lngLat); }); plugin.on('click', ({ lngLat }) => { console.log(lngLat); });Now, when you click on the map or any model, the console displays the coordinates of the click.
-
To make the floor where you want to add labels active, click on the building and select the floor. For example, for the first building and the floor, named
11, determine the places where the labels will be placed and click on them to get the coordinates.
Important
When you click on a map or building, the coordinates of the flat map are returned. When you place labels for top floors, distortions of the perspective projection occur (the object appears larger when viewed from above).
-
To add labels to the floor options, fill in the array of groups in the
labelGroupsoption of a floor plan. For more information on group options, see LabelGroupOptions. To raise labels to the floor height, set theelevationproperty for the group or for each label:{ modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a', coordinates: [55.27088522875024, 25.196681784153185], modelUrl: 'standpointtowers2.glb', ..., floors: [ ..., { id: '3', text: '3-17', modelUrl: 'standpointtowers4-3.glb', mapOptions: { center: [55.27101659214413, 25.19692572574951], pitch: 17.8, zoom: 20.75, rotation: 137.02588223579758, }, labelGroups: [ { id: '1111', image: 'default', minZoom: 18.9, elevation: 13, interactive: true, labels: [ { coordinates: [55.27095943017267, 25.197085861856678], text: '1 Bed\n323 sqft', }, { coordinates: [55.271011424317585, 25.19704189077632], text: '1 Bed\n360 sqft', }, { coordinates: [55.27086972852069, 25.196999662434976], text: '1 Bed\n330 sqft', }, { coordinates: [55.2711596091742, 25.196857840495], text: '1 Bed\n690 sqft', }, { coordinates: [55.2710044354644, 25.19689784165797], text: '1 Bed\n600 sqft', }, { coordinates: [55.27109216906766, 25.196807837435273], text: '4 Beds\n1800 sqft', }, { coordinates: [55.27114979328282, 25.196936631205745], text: '2 Beds\n1500 sqft', }, { coordinates: [55.27094029099825, 25.19695530862026], text: '2 Beds\n1215 sqft', }, { coordinates: [55.271084685746885, 25.196991799213222], text: '3 Beds\n2400 sqft', }, ], }, ], }, ], } -
To enable following a link to another website when clicking on the label, add the
urlproperty to theuserDatalabel field:{ modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a', coordinates: [55.27088522875024, 25.196681784153185], modelUrl: 'standpointtowers2.glb', ..., floors: [ ..., { id: '3', text: '3-17', modelUrl: 'standpointtowers4-3.glb', ..., labelGroups: [ { ..., labels: [ { coordinates: [55.27095943017267, 25.197085861856678], text: '1 Bed\n323 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.271011424317585, 25.19704189077632], text: '1 Bed\n360 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.27086972852069, 25.196999662434976], text: '1 Bed\n330 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.2711596091742, 25.196857840495], text: '1 Bed\n690 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.2710044354644, 25.19689784165797], text: '1 Bed\n600 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.27109216906766, 25.196807837435273], text: '4 Beds\n1800 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.27114979328282, 25.196936631205745], text: '2 Beds\n1500 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.27094029099825, 25.19695530862026], text: '2 Beds\n1215 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.271084685746885, 25.196991799213222], text: '3 Beds\n2400 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, ], }, ], }, ], } -
By default, the label background is white. To customize it, specify the custom settings in the
imagefield of the group. The label background image must be in.svgformat:{ modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a', coordinates: [55.27088522875024, 25.196681784153185], modelUrl: 'standpointtowers2.glb', ..., floors: [ ..., { id: '3', text: '3-17', modelUrl: 'standpointtowers4-3.glb', ..., labelGroups: [ { id: '1111', image: { url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9ImV4aXQiIGZpbGw9IiM2MDVFNTAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNSI+PC9yZWN0PjwvZz48L2c+PC9zdmc+', size: [38, 38], stretchX: [[4, 24]], stretchY: [[4, 24]], padding: [5, 10, 5, 10], }, minZoom: 18.9, elevation: 13, interactive: true, labels: [...], }, ], }, ], }Specify parameters:
url- URL of the image in the data-URL format.size- image size.stretchXandstretchY- stretch areas.padding- padding from the edges for the text inside the label.
-
To display several groups of labels on a floor (for example, if you need to separate sold rooms from the rooms on sale), add a second group to the
labelGroupsarray and move particular labels from the first group to it or set new ones:{ modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a', coordinates: [55.27088522875024, 25.196681784153185], modelUrl: 'standpointtowers2.glb', ..., floors: [ ..., { id: '3', text: '3-17', modelUrl: 'standpointtowers4-3.glb', ..., labelGroups: [ { id: '1111', image: { url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9ImV4aXQiIGZpbGw9IiM2MDVFNTAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNSI+PC9yZWN0PjwvZz48L2c+PC9zdmc+', size: [38, 38], stretchX: [[4, 24]], stretchY: [[4, 24]], padding: [5, 10, 5, 10], }, minZoom: 18.9, elevation: 13, interactive: true, labels: [ { coordinates: [55.27095943017267, 25.197085861856678], text: '1 Bed\n323 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.271011424317585, 25.19704189077632], text: '1 Bed\n360 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, ], }, { id: '2222', image: 'default', minZoom: 18.9, elevation: 13, interactive: true, labels: [ { coordinates: [55.27086972852069, 25.196999662434976], text: '1 Bed\n330 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.2711596091742, 25.196857840495], text: '1 Bed\n690 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.2710044354644, 25.19689784165797], text: '1 Bed\n600 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.27109216906766, 25.196807837435273], text: '4 Beds\n1800 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.27114979328282, 25.196936631205745], text: '2 Beds\n1500 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.27094029099825, 25.19695530862026], text: '2 Beds\n1215 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, { coordinates: [55.271084685746885, 25.196991799213222], text: '3 Beds\n2400 sqft', userData: { url: 'https://dev.urbi.ae/', }, }, ], }, ], }, ], }
Example of a configuration file with optional settings:
mapgl-gltf-config.json
[
{
modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
coordinates: [55.27088522875024, 25.196681784153185],
modelUrl: 'standpointtowers2.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: -116.60999999999991,
scale: 1,
linkedIds: ['13933647002601472'],
popupOptions: {
coordinates: [55.271024122768324, 25.19693053802895],
title: 'Apartments Tower B',
description:
'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
},
mapOptions: {
center: [55.27104661856671, 25.19654143333551],
pitch: 45,
zoom: 19,
rotation: -173,
},
floors: [
{
id: '2',
text: '2',
modelUrl: 'standpointtowers4-2.glb',
isUnderground: true,
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 17.8,
zoom: 20.8,
rotation: 137.02588223579758,
},
},
{
id: '3',
text: '3-17',
modelUrl: 'standpointtowers4-3.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 17.8,
zoom: 20.75,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: {
url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9ImV4aXQiIGZpbGw9IiM2MDVFNTAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNSI+PC9yZWN0PjwvZz48L2c+PC9zdmc+',
size: [38, 38],
stretchX: [[4, 24]],
stretchY: [[4, 24]],
padding: [5, 10, 5, 10],
},
minZoom: 18.9,
elevation: 13,
interactive: true,
labels: [
{
coordinates: [55.27095943017267, 25.197085861856678],
text: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
text: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
{
id: '2222',
image: 'default',
minZoom: 18.9,
elevation: 13,
interactive: true,
labels: [
{
coordinates: [55.27086972852069, 25.196999662434976],
text: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
text: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
text: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
text: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
text: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
text: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
text: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
],
},
{
modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
coordinates: [55.27088606843354, 25.19668331126981],
modelUrl: 'standpointtowers3.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: 243.91000000000005,
scale: 1,
linkedIds: ['13933647002601471'],
popupOptions: {
coordinates: [55.270872255787253, 25.196689173834102],
title: 'Apartments Tower A',
description:
'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
},
mapOptions: {
center: [55.27125168787015, 25.196926809413966],
pitch: 52,
zoom: 18.7,
rotation: -35.4,
},
floors: [
{
id: '112',
text: '1-12',
modelUrl: 'standpointtowers5-2_without_transforms.glb',
mapOptions: {
center: [55.27084419010903, 25.19649935503182],
pitch: 9.2,
zoom: 19.97,
rotation: -12.398906380706755,
},
},
{
id: '1320',
text: '13-20',
modelUrl: 'standpointtowers5-1.glb',
mapOptions: {
center: [55.27084419010903, 25.19649935503182],
pitch: 9.2,
zoom: 19.8,
rotation: -12.398906380706755,
},
},
],
},
{
modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
coordinates: [55.27067156776716, 25.197123844470752],
modelUrl: 'standpointtowers6.glb',
interactive: false,
rotateX: 0,
rotateY: 0,
rotateZ: 59.63999999999995,
scale: 1,
linkedIds: ['70030076452542637', '13933647002603034'],
floors: [],
},
{
modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
coordinates: [55.270887739054025, 25.19668130155175],
modelUrl: 'standpointtowers_center.glb',
interactive: false,
rotateX: 0,
rotateY: 0,
rotateZ: -116.40999999999987,
scale: 1,
linkedIds: ['13933647002592567'],
floors: [],
},
];
Example of an interactive scene with optional settings:
<!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="glTF plugin example" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script src="https://unpkg.com/@2gis/mapgl-gltf@^2/dist/bundle.js"></script>
<div id="container"></div>
<script>
const map = new mapgl.Map('container', {
center: [55.270872255787253, 25.196689173834102],
zoom: 17.9,
key: 'Your API access key',
pitch: 45,
rotation: 330,
enableTrackResize: true,
maxZoom: 20.7,
});
const plugin = new mapgl.GltfPlugin(map, {
modelsLoadStrategy: 'waitAll',
modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/standpointtowers/',
labelGroupDefaults: {
fontSize: 14,
},
hoverOptions: {
color: '#FFF3F3',
},
});
plugin.addRealtyScene([
{
modelId: 'standpointtowers2_53476f256963fa7b70f5d759b7834c70bb8e507a',
coordinates: [55.27088522875024, 25.196681784153185],
modelUrl: 'standpointtowers2.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: -116.60999999999991,
scale: 1,
linkedIds: ['13933647002601472'],
popupOptions: {
coordinates: [55.271024122768324, 25.19693053802895],
title: 'Apartments Tower B',
description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
},
mapOptions: {
center: [55.27104661856671, 25.19654143333551],
pitch: 45,
zoom: 19,
rotation: -173,
},
floors: [
{
id: '2',
text: '2',
modelUrl: 'standpointtowers4-2.glb',
isUnderground: true,
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 17.8,
zoom: 20.8,
rotation: 137.02588223579758,
},
},
{
id: '3',
text: '3-17',
modelUrl: 'standpointtowers4-3.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 17.8,
zoom: 20.75,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: {
url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9ImV4aXQiIGZpbGw9IiM2MDVFNTAiIGZpbGwtcnVsZT0ibm9uemVybyI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNSI+PC9yZWN0PjwvZz48L2c+PC9zdmc+',
size: [38, 38],
stretchX: [[4, 24]],
stretchY: [[4, 24]],
padding: [5, 10, 5, 10],
},
minZoom: 18.9,
elevation: 13,
interactive: true,
labels: [
{
coordinates: [55.27095943017267, 25.197085861856678],
text: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
text: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
{
id: '2222',
image: 'default',
minZoom: 18.9,
elevation: 13,
interactive: true,
labels: [
{
coordinates: [55.27086972852069, 25.196999662434976],
text: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
text: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
text: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
text: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
text: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
text: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
text: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
],
},
{
modelId: 'standpointtowers3_afc8e88d16e1936a9a087eb2f02193f4220ce619',
coordinates: [55.27088606843354, 25.19668331126981],
modelUrl: 'standpointtowers3.glb',
interactive: true,
rotateX: 0,
rotateY: 0,
rotateZ: 243.91000000000005,
scale: 1,
linkedIds: ['13933647002601471'],
popupOptions: {
coordinates: [55.270872255787253, 25.196689173834102],
title: 'Apartments Tower A',
description: 'Ready <br> Central A/C & Heating, Security, Concierge Service <br> Private: Garden, Gym, Pool ',
},
mapOptions: {
center: [55.27125168787015, 25.196926809413966],
pitch: 52,
zoom: 18.7,
rotation: -35.4,
},
floors: [
{
id: '112',
text: '1-12',
modelUrl: 'standpointtowers5-2_without_transforms.glb',
mapOptions: {
center: [55.27084419010903, 25.19649935503182],
pitch: 9.2,
zoom: 19.97,
rotation: -12.398906380706755,
},
},
{
id: '1320',
text: '13-20',
modelUrl: 'standpointtowers5-1.glb',
mapOptions: {
center: [55.27084419010903, 25.19649935503182],
pitch: 9.2,
zoom: 19.8,
rotation: -12.398906380706755,
},
},
],
},
{
modelId: 'standpointtowers6_d2baef1cd770b0c07f558fd8c94ba5589a2c7ab0',
coordinates: [55.27067156776716, 25.197123844470752],
modelUrl: 'standpointtowers6.glb',
interactive: false,
rotateX: 0,
rotateY: 0,
rotateZ: 59.63999999999995,
scale: 1,
linkedIds: ['70030076452542637', '13933647002603034'],
floors: [],
},
{
modelId: 'standpointtowers_center_9c624c53dc3f6ffeffcb6524ff75556f08588fb6',
coordinates: [55.270887739054025, 25.19668130155175],
modelUrl: 'standpointtowers_center.glb',
interactive: false,
rotateX: 0,
rotateY: 0,
rotateZ: -116.40999999999987,
scale: 1,
linkedIds: ['13933647002592567'],
floors: [],
},
]);
</script>
</body>
</html>