glTF plugin version 1
The glTF plugin is an alternative way to show glTF models on the map, in addition to the basic one using the Style Editor and data source.
Using the plugin is most convenient for cases when you need to show multiple models on the map without affecting the base map style.
With the plugin you can:
- load glTF models on the map
- show and hide models on the map
- show POI with information when hovering over a specific model
- display floor plans
Important
The first version of the plugin uses the Three.js library version 0.150.1. To work with models using the MapGL capabilities only, see the second version of the plugin.
Adding the plugin
Add the plugin to your code in one of the following ways:
-
Adding as an external script
To use the plugin, add it to your page:
<script src="https://unpkg.com/@2gis/mapgl-gltf@^1/dist/bundle.js"></script>The main plugin class is available in the
mapglnamespace:const plugin = new mapgl.GltfPlugin(map); -
Installing via npm
npm install @2gis/mapgl-gltf@^1
Initialization
By default, the plugin is configured to be used without additional settings. To initialize the plugin, pass an existing map entity to the plugin constructor:
const plugin = new GltfPlugin(map);
Additional options
To set additional options, pass them to the builder as the second parameter:
const plugin = new GltfPlugin(map, {
modelsLoadStrategy: 'waitAll',
dracoScriptsUrl: 'libs/draco/',
ambientLight: { color: '#ffffff', intencity: 2.5 },
});
Rendering compressed models (dracoScriptsUrl)
To render glTF models compressed using the Draco algorithm, you need to use a decoder. By default, the plugin is configured to render compressed models without applying additional settings.
If you install the plugin as an npm package, you should use the decoders delivered with the plugin to avoid requests to the unpkg server. To start using the decoders:
-
Copy the decoders to your project.
To properly configure the copying of decoder files in your project, check the documentation of the used JavaScript bundler.
-
During the plugin initialization, add the
dracoScriptsUrloption with a path to the Draco decoders directory, which will be available for your users.Example:
const plugin = new GltfPlugin(map, { dracoScriptsUrl: 'libs/draco/', });
Once the plugin package is installed, the decoders are stored at node_modules/@2gis/mapgl-gltf/dist/libs/draco.
Additional lighting settings (ambientLight)
You can specify additional lighting settings to make a model darker or lighter. The plugin uses an ambient light model that sets even lighting of a model from all sides:
const plugin = new GltfPlugin(map, {
ambientLight: { color: '#ffffff', intencity: 2.5 },
});
Parameters:
color— the ambient light color, white (#ffffff) by default.intencity— lighting intensity, the default value is1.
Model loading strategy (modelsLoadStrategy)
You can define the strategy of model loading:
waitAll— wait for all models to be loaded before displaying them on the map.dontWaitAll— render each model on the map once it is loaded.
Example:
const plugin = new GltfPlugin(map, {
modelsLoadStrategy: 'waitAll',
});
Base URL to load models (modelsBaseUrl)
If a model URL is defined without http:// or https:// and the domain name, models will be loaded relatively to the modelsBaseUrl. By default, the base URL is an empty string, so models will be loaded relatively to the web application host (for example, https://example.com/<model>).
Example:
const plugin = new GltfPlugin(map, {
modelsBaseUrl: 'https://example.com/s3_storage/gltf_models',
});
In this example, models will be loaded at https://example.com/s3_storage/gltf_models/<model>.
Adding glTF models
You can add glTF models to the map using the following methods
addModels()to add multiple models at once.addModelsPartially()to add several models from an array directly to the map and cache others to render them quicker later.addModel()to add a single model to the map.
Adding multiple models
To add multiple models to the map at once, use the addModels() method:
plugin.addModels([
{
modelId: '347da1',
coordinates: [82.886554, 54.980988],
modelUrl: 'http://example.com/models/model1.glb',
rotateX: 90,
scale: 1000,
linkedIds: ['141373143530065', '70030076379181421'],
},
{
modelId: 'f932d2',
coordinates: [82.886578, 54.981007],
modelUrl: 'http://example.com/models/model2.glb',
rotateX: 50,
scale: 100,
},
]);
The method takes an array of model options. IDs of rendered models must be unique.
Example of adding models to the map
<!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@^1/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: 'dontWaitAll',
ambientLight: { color: '#ffffff', intencity: 3 },
modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/standpointtowers/',
});
plugin
.addModels([
{
modelId: 'standpointtowers',
coordinates: [
55.27087225578725,
25.196689173834102
],
rotateX: 90,
rotateY: -116.76399405643865,
scale: 128.79829191413992,
modelUrl: 'standpointtowers_center.glb',
linkedIds: ['13933647002592567'],
mapOptions: {
center: [55.271321201282895, 25.196442258306178],
pitch: 50.4,
zoom: 18.52,
rotation: -115.7,
},
},
{
modelId: 'standpointtowers2',
coordinates: [
55.27087225578725,
25.196689173834102
],
rotateX: 90,
rotateY: -116.76399405643865,
scale: 128.79829191413992,
modelUrl: 'standpointtowers2.glb',
linkedIds: ['13933647002601472'],
mapOptions: {
center: [55.27104661856671, 25.19654143333551],
pitch: 45,
zoom: 19,
rotation: -173,
},
},
{
modelId: 'standpointtowers3',
coordinates: [
55.27087225578725,
25.196689173834102
],
rotateX: 90,
rotateY: -116.76399405643865,
scale: 128.79829191413992,
modelUrl: 'standpointtowers3.glb',
linkedIds: ['13933647002601471'],
mapOptions: {
center: [55.27125168787015, 25.196926809413966],
pitch: 52,
zoom: 18.7,
rotation: -35.4,
},
},
{
modelId: 'standpointtowers6',
coordinates: [
55.270675867795944,
25.19714112613724
],
rotateX: 90,
rotateY: -122.50752437711678,
scale: 120.95040320924127,
modelUrl: 'standpointtowers6.glb',
linkedIds: ['13933647002603034'],
mapOptions: {
center: [55.270872255787253, 25.196689173834102],
pitch: 40,
zoom: 19,
rotation: -41.4,
},
},
]);
</script>
</body>
</html>Adding glTF models in parts
Use the addModelsPartially() method to add several models from an array to the map and cache others so that later you can add the cached models to the map using the addModel() method quicker. This can be useful in cases that require switching 3D models without delay.
The models that must be loaded from the network are passed as the first parameter as an array of model options. The list of models to be rendered on the map immediately is passed as the second argument (an array of model IDs). In the example below, the model with the ID 347da1 will be loaded to the map first:
plugin.addModelsPartially(
[
{
modelId: '347da1',
coordinates: [82.88651, 54.98092],
modelUrl: 'http://example.com/models/model1.glb',
rotateX: 90,
rotateY: 14,
scale: 3000,
},
{
modelId: 'f932d2',
coordinates: [82.88659, 54.98101],
modelUrl: 'http://example.com/models/model2.glb',
rotateX: 90,
rotateY: 51,
scale: 3000,
},
],
['347da1'],
);
Adding a single glTF model
To add a single model to the map, use the addModel() method. If the model has been loaded before, the method adds it to the map from cache without sending requests to the server. The method takes a model options object as an argument:
plugin.addModel({
modelId: 'ea234f1',
coordinates: [82.8865, 54.9809],
modelUrl: 'http://example.com/models/model1.glb',
rotateX: 90,
scale: 3000,
linkedIds: ['141373143530065', '70030076379181421'],
userData: {
data: 'Some user data',
},
});
Hide overlapping buildings
When a new model is added to the map, it can overlap existing buildings, which may affect the resulting view of the model on the map. To hide overlapping buildings, use the methods of adding models (addModel(), addModels(), addModelsPartially()) and pass them the linkedIds option with a list of IDs of the building to hide.
To get IDs of the buildings to hide:
-
Enable logging of building IDs on click using the following code:
map.on('click', (e) => { console.log(e); }); -
Add a model to the map.
-
Open the browser DevTools and click the buildings that must be hidden.
ID is located in the
targetfield of a logged event (click). Event example:{ "originalEvent": { "isTrusted": true }, "lngLat": [82.89980568100268, 54.97787890875184], "point": [420, 231], "target": { "id": "141373143533390" }, "targetData": { "type": "default", "id": "141373143533390" } } -
Pass a list of building IDs in the
linkedIdsoption. Example:plugin.addModel({ modelId: 'ea234f1', coordinates: [82.8865, 54.9809], modelUrl: 'http://example.com/models/model1.glb', rotateX: 90, scale: 3000, linkedIds: ['141373143533390'], userData: { data: 'Some user data', }, });
Removing models from the map and cache
To remove the model from the map and cache, use the removeModel() method and pass it the ID of a model to remove:
plugin.removeModel('ea234f1');
To remove a model only from the map and keep it in cache, pass true as the second parameter. This can be useful in cases that require switching between 3D models without delay.
plugin.removeModel('ea234f1', true);
To remove multiple models, the removeModels() method is available, which takes an array of model identifiers as an argument:
plugin.removeModels(['ea234f1', 'abc354', ..., 'def123']);
As in the case above, to remove the model only from the map, leaving it in the cache, you need to pass true as the second argument:
plugin.removeModels(['ea234f1', 'abc354', ..., 'def123'], true);
Configuring POI
Use POI (point of interest) to display additional information about an object next to the model. POI can contain any textual information (for example, area of a stadium or an apartment, height of a skyscraper) and links.
Adding a POI group
To add a POI group to the map, use the addPoiGroup() method. It takes a POI group object with common settings for all POIs: elevation in meters, minimum scale that makes POI visible, POI type (primary with white backgroud or secondary without backgroud).
For a single POI, its text, position, optional elevation in meters, and other data that must be associated with a POI is specified as a POI options object. All POI components must be stored in an array inside the data option:
plugin.addPoiGroup({
id: '722ea9',
type: 'secondary',
minZoom: 17,
elevation: 30,
data: [
{
coordinates: [82.886554, 54.980988],
label: '10 м²',
userData: {
url: 'https://a101.ru/kvartiry/360810/',
},
},
],
});
Removing a POI group
To remove a POI group from the map, use the removePoiGroup() method and pass it the ID of the POI group to remove:
plugin.removePoiGroup('722ea9');
Adding an interactive scene
Interactive realty scene allows you to present a building with floor plans and additional information in POI that a user can interact with (for example, switch floors and learn about separate apartments on the floor).
To add an interactive realty scene, use the addRealtyScene() method. It automatically configures all necessary event handlers for proper scene operation.
As the first argument, the method takes an array of configurations of building fronts and associated floors. As the second argument, it takes a scene state, which defines which floor is selected automatically after the plugin initialization.
The scene configuration is a hierarchy of objects to be added to the map:
- The top level of the hierarchy contains building fonts (models of the building look from the outside).
- Each building font can contain floor plans (models of a building section with a floor plan) in the
floorsfield. - Each floor plan can contain several POI groups (
poiGroups). - Each POI group must contain individual POI settings in the
datafield.
To configure the change of turning, tilt, scaling, and position of the map when a floor or a font is selected, use the mapOptions set.
To add multiple floors within one building, use the floors option. All added floor configurations reuse transformation options of their parent building models. You do not need to separately define turning, scaling, and shift of floor models that belong to one building.
Note
Floors in an array must be listed from the first to the last one.
plugin.addRealtyScene(
[
{
modelId: '03a234cb',
coordinates: [47.245286302641034, 56.134743473834099],
modelUrl: 'zgktechnology1.glb',
rotateX: 90,
rotateY: -15.1240072739039,
scale: 191.637678,
linkedIds: ['70030076555821177'],
mapOptions: {
center: [47.24547737708662, 56.134591508663135],
pitch: 40,
zoom: 19,
rotation: -41.4,
},
popupOptions: {
coordinates: [47.24511721603574, 56.13451456056651],
title: 'Building 1. 11 floors',
description:
'Deadline: Q4, 2024. <br />15 mins of foot from the Moskovskaya metro station',
},
floors: [
{
id: '235034',
text: '1-10',
modelUrl: 'zgktechnology1_floor2.glb',
mapOptions: {
center: [47.24524342863023, 56.13449524271827],
pitch: 40,
zoom: 20,
rotation: -57.5,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 19.5,
elevation: 5,
fontSize: 12,
fontColor: '#3a3a3a',
data: [
{
coordinates: [47.245048150280994, 56.134470449142164],
label: '3 Beds\n78.4 sqft',
userData: {
url: 'https://maps.urbi.ae/',
},
},
{
coordinates: [47.24520807647288, 56.13443854463778],
label: '2 Beds\n67 sqft',
userData: {
url: 'https://maps.urbi.ae/',
},
},
],
},
],
},
],
},
],
{ modelId: '03a234cb', floorId: '235034' },
);
Example of adding an interactive scene to the map
When the models are loaded, you can hover over and click them to display floor plans.
<!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@^1/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',
ambientLight: { color: '#ffffff', intencity: 3 },
modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/standpointtowers/',
poiConfig: {
primary: {
fontSize: 14,
},
secondary: {
fontSize: 14,
},
},
hoverHighlight: {
intencity: 0.1,
},
});
const realtyScene = [
{
modelId: 'standpointtowers',
coordinates: [
55.27087225578725,
25.196689173834102
],
rotateX: 90,
rotateY: -116.76399405643865,
scale: 128.79829191413992,
modelUrl: 'standpointtowers_center.glb',
linkedIds: ['13933647002592567'],
mapOptions: {
center: [55.271321201282895, 25.196442258306178],
pitch: 50.4,
zoom: 18.52,
rotation: -115.7,
},
},
{
modelId: 'standpointtowers2',
coordinates: [
55.27087225578725,
25.196689173834102
],
rotateX: 90,
rotateY: -116.76399405643865,
scale: 128.79829191413992,
modelUrl: 'standpointtowers2.glb',
linkedIds: ['13933647002601472'],
mapOptions: {
center: [55.27104661856671, 25.19654143333551],
pitch: 45,
zoom: 19,
rotation: -173,
},
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',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 17.8,
zoom: 20.8,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 10,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '3',
text: '3',
modelUrl: 'standpointtowers4-3.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 17.8,
zoom: 20.75,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 13,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '4',
text: '4',
modelUrl: 'standpointtowers4-4.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 14.8,
zoom: 20.7,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 16,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '5',
text: '5',
modelUrl: 'standpointtowers4-5.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 9.3,
zoom: 20.65,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 19,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '6',
text: '6',
modelUrl: 'standpointtowers4-6.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 8.5,
zoom: 20.60,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 22,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '7',
text: '7',
modelUrl: 'standpointtowers4-7.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 8.2,
zoom: 20.56,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 25,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '8',
text: '8',
modelUrl: 'standpointtowers4-8.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 8,
zoom: 20.51,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 28,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '9',
text: '9',
modelUrl: 'standpointtowers4-9.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 8,
zoom: 20.4,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 31,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '10',
text: '10',
modelUrl: 'standpointtowers4-10.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 8,
zoom: 20.3,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 34,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '11',
text: '11',
modelUrl: 'standpointtowers4-11.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 8,
zoom: 20.2,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 37,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '12',
text: '12',
modelUrl: 'standpointtowers4-12.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 7.5,
zoom: 20.1,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 40,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '13',
text: '13',
modelUrl: 'standpointtowers4-13.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 7.0,
zoom: 20.1,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 43,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '14',
text: '14',
modelUrl: 'standpointtowers4-14.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 6.5,
zoom: 20.1,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 45,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '15',
text: '15',
modelUrl: 'standpointtowers4-15.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 6,
zoom: 20.1,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 48,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '16',
text: '16',
modelUrl: 'standpointtowers4-16.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 5.5,
zoom: 20.1,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 51,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '17',
text: '17',
modelUrl: 'standpointtowers4-17.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 5.0,
zoom: 20.0,
rotation: 137.02588223579758,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 53,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27095943017267, 25.197085861856678],
label: '1 Bed\n323 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271011424317585, 25.19704189077632],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27086972852069, 25.196999662434976],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2711596091742, 25.196857840495],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710044354644, 25.19689784165797],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27109216906766, 25.196807837435273],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27114979328282, 25.196936631205745],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27094029099825, 25.19695530862026],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.271084685746885, 25.196991799213222],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
],
},
{
modelId: 'standpointtowers3',
coordinates: [
55.27087225578725,
25.196689173834102
],
rotateX: 90,
rotateY: -116.76399405643865,
scale: 128.79829191413992,
modelUrl: 'standpointtowers3.glb',
linkedIds: ['13933647002601471'],
mapOptions: {
center: [55.27125168787015, 25.196926809413966],
pitch: 52,
zoom: 18.7,
rotation: -35.4,
},
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.glb',
mapOptions: {
center: [55.27084419010903, 25.19649935503182],
pitch: 9.2,
zoom: 19.97,
rotation: -12.398906380706755,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 50,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27068175220883, 25.19649320038519],
label: '2 Beds\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27077348188615, 25.19647327785033],
label: '2 Beds\n450 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27085214880376, 25.196467153234963],
label: '2 Beds\n400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27099580986241, 25.196472879809335],
label: '2 Beds\n450 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710647854107, 25.19641925181169],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.270947692821274, 25.19636548566021],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27051955532713, 25.196424192744416],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.270597030613025, 25.196393584814047],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27083715085102, 25.19635404369795],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.270736638337546, 25.196362134415565],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27067601641181, 25.19638678843009],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27102002769878, 25.196363368779487],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
{
id: '1320',
text: '13-20',
modelUrl: 'standpointtowers5-1.glb',
mapOptions: {
center: [55.27084419010903, 25.19649935503182],
pitch: 9.2,
zoom: 19.8,
rotation: -12.398906380706755,
},
poiGroups: [
{
id: 1111,
type: 'primary',
minZoom: 18.9,
elevation: 66,
fontSize: 9,
fontColor: '#3a3a3a',
data: [
{
coordinates: [55.27068175220883, 25.19649320038519],
label: '2 Beds\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27077348188615, 25.19647327785033],
label: '2 Beds\n450 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27085214880376, 25.196467153234963],
label: '2 Beds\n400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27099580986241, 25.196472879809335],
label: '2 Beds\n450 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710647854107, 25.19641925181169],
label: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.270947692821274, 25.19636548566021],
label: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27051955532713, 25.196424192744416],
label: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.270597030613025, 25.196393584814047],
label: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27083715085102, 25.19635404369795],
label: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.270736638337546, 25.196362134415565],
label: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27067601641181, 25.19638678843009],
label: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27102002769878, 25.196363368779487],
label: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
],
},
{
modelId: 'standpointtowers6',
coordinates: [
55.270675867795944,
25.19714112613724
],
rotateX: 90,
rotateY: -122.50752437711678,
scale: 120.95040320924127,
modelUrl: 'standpointtowers6.glb',
linkedIds: ['13933647002603034'],
mapOptions: {
center: [55.270872255787253, 25.196689173834102],
pitch: 40,
zoom: 19,
rotation: -41.4,
},
floors: [
],
},
];
plugin.addRealtyScene(realtyScene);
</script>
</body>
</html>Displaying underground floors
To display underground floors, you need to set the isUnderground option to true in the floor plan options.
When such a floor plan is displayed:
-
a substrate covering the rest of the objects on the map appears;
-
other objects of the interactive realty scene are hidden;
-
objects on the map, such as other buildings, do not overlap the displayed underground floor plan.
The default substrate color is #F8F8EBCC. To change it, you can set a custom color in the plugin options in the groundCoveringColor property or use the setOptions() plugin method. Using the method allows you to change the color on the fly, which can be useful when changing the map style.
Removing an interactive scene
To remove the interactive realty scene, use the removeRealtyScene() method. To keep models deleted from the map in cache, you need to pass true as an argument.