glTF plugin version 2
You can add glTF models to the map using:
- Style editor and data source: for more details, see the 3D models instruction.
- glTF plugin version 2. It loads and renders models entirely using the MapGL engine. This allows you to apply various effects to the models that you set in the map style: fog, light, shadows, and others. Using the plugin is most convenient in cases where 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
Unlike its first version, the plugin does not use the Three.js library now. To switch from the first version of the plugin to the second one, check the Key changes section.
Adding the plugin
Using script tag
To use the plugin, add the following line to the page code:
<script src="https://unpkg.com/@2gis/mapgl-gltf@^2/dist/bundle.js"></script>
The main plugin class is available in the mapgl
namespace:
const plugin = new mapgl.GltfPlugin(map);
Using npm package
If you use npm, you can include the library using the @2gis/mapgl-gltf package:
npm install @2gis/mapgl-gltf
Plugin initialization
To initialize the plugin, pass an existing map entity to the plugin constructor:
const plugin = new GltfPlugin(map);
Default values are applied to PluginOptions. To customize the plugin, pass additional options as the second argument:
const plugin = new GltfPlugin(map, {
hoverOptions: {
color: '#ff000088',
},
labelGroupDefaults: {
fontSize: 16,
},
modelsBaseUrl: 'https://example.com/s3_storage/gltf_models',
modelsLoadStrategy: 'dontWaitAll',
floorsControl: {
position: 'centerLeft',
},
groundCoveringColor: '#000000CC',
zIndex: 5,
});
Where:
hoverOptions
: options for models in the hover state. Only thecolor
option is available. The default value is#FFFFFF
. Color is applied by multiplying all the components.labelGroupDefaults
: default values for label groups, unless custom options are specified in LabelGroupOptions:fontSize
: font size for labels. Default value is14
.fontColor
: font color for labels. Default value is#000000
.image
: options for the label text background. Applied to the group if theimage
value in LabelGroupOptions is set asdefault
. Default value:{ url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHJ4PSI0IiBmaWxsPSIjZWFlYWVhIi8+PHJlY3QgeD0iMSIgeT0iMSIgd2lkdGg9IjI2IiBoZWlnaHQ9IjI2IiByeD0iMyIgZmlsbD0id2hpdGUiLz48L3N2Zz4=', size: [38, 38], stretchX: [[4, 24]], stretchY: [[4, 24]], padding: [5, 10, 5, 10], }
modelsBaseUrl
: URL to define the relative path of the model. If the model URL is set withouthttp://
orhttps://
and the domain name, models are loaded relatively to this parameter. The default value is''
, so all models are loaded relatively to the web application host.modelsLoadStrategy
: strategy of loading and displaying models. Possible values:waitAll
: all models are loaded and then displayed on the map simultaneously (default value).dontWaitAll
: each model is displayed as soon as it is loaded.
floorsControl
: options for the UI element with floor buttons in the interactive realty scene. Only theposition
option is currently available. The default value iscenterLeft
. See the list of possible values in the ControlPosition.groundCoveringColor
: map background color when an underground floor is displayed. The default value is#F8F8EBCC
zIndex
: order of rendering plugin objects (models, labels) relative to other Objects on the map.
Plugin events
To subscribe to plugin events that occur during interaction with objects (models, labels):
plugin.on('click', (event) => {
console.log(event);
});
See the list of events that you can subscribe to at GltfPluginEventTable. Depending of which object provokes an event, a GltfPluginModelEvent or a GltfPluginLabelEvent is passed to the handler function.
Working with models and labels
The process of adding a model to the map involves loading the model and displaying it. The way of displaying models on the map depends on the modelsLoadStrategy
option: see the Plugin initialization section.
Note
Instead of manually selecting the model positioning settings (coordinates, rotation, and scale), use the tool for positioning models on the map. You can position the model and copy settings values: see the instruction on placing models on the map.
Working with one model
To add a model to the map, use the addModel
method and pass ModelOptions as the first argument (do not set the second argument):
plugin.addModel({
modelId: 'ea234f1',
coordinates: [82.8865, 54.9809],
modelUrl: 'http://example.com/models/model1.glb',
rotateZ: -15,
scale: 2,
interactive: true,
});
To load the model to the cache without displaying it right away, pass the second argument with the true
value.
To display the model, use the showModel
method and pass the model identifier:
plugin.showModel('ea234f1');
To hide the model on the map, use the hideModel
method and pass the model identifier:
plugin.hideModel('ea234f1');
To remove the model from the map and the cache, use the removeModel
method:
plugin.removeModel('ea234f1');
Working with multiple models
To add multiple models to the map, use the addModels
method and pass the ModelOptions array as the first argument (do not set the second argument):
const models = [
{
modelId: '347da1',
coordinates: [82.88651, 54.98092],
modelUrl: 'http://example.com/models/model1.glb',
rotateZ: 10,
interactive: true,
},
{
modelId: 'f932d2',
coordinates: [82.88659, 54.98101],
modelUrl: 'http://example.com/models/model2.glb',
scale: 2,
},
];
plugin.addModels(models);
To load models to the cache and display only some of them, pass an array of models identifiers as the second argument:
plugin.addModels(models, ['347da1']);
To only load models to the cache without displaying them, pass an empty array as the second argument:
plugin.addModels(models, []);
To display models later, use the showModels
or showModel
methods:
plugin.showModels(['347da1', 'f932d2']);
plugin.showModel('ea234f1');
To hide multiple models from the map, use the hideModels
method and pass an array of models identifiers:
plugin.hideModels(['347da1', 'f932d2']);
To remove models from the map and the cache, use the removeModels
method:
plugin.removeModels(['347da1', 'f932d2']);
Replacing a map object with a model
You might need to display a model in place of an object on the map (for example, a building). To hide an object on the map that overlays the model:
-
Get object identifiers:
-
Set up logging of object identifiers on click:
map.on('click', (e) => { console.log(e); });
-
Open the browser Developer Tools (press
F12
) and click the objects to be hidden. Copy the identifier from thetarget.id
field of the event, for example:{ "originalEvent": { "isTrusted": true }, "lngLat": [82.89980568100268, 54.97787890875184], "point": [420, 231], "target": { "id": "141373143533390" }, "targetData": { "type": "default", "id": "141373143533390" } }
-
-
Pass an array of object identifiers to the
linkedIds
field of ModelOptions:plugin.addModel({ modelId: 'ea234f1', coordinates: [82.8865, 54.9809], modelUrl: 'http://example.com/models/model1.glb', linkedIds: ['141373143533390'], });
Working with model labels
You can display additional text information on the map using labels or label groups. The labels can be linked to a model or not. Labels can contain any information, such as building characteristics, apartment area, location information on a map, and links.
To add labels to the map, use the addLabelGroup
method and pass LabelGroupOptions as an argument:
const labelGroup = {
id: '722ea9',
image: 'default',
minZoom: 17,
elevation: 30,
interactive: true,
labels: [
{
coordinates: [82.886554, 54.980988],
text: '10 sqft',
userData: {},
},
{
coordinates: [82.8865, 54.9809],
text: '20 sqft',
elevation: 33,
interactive: false,
},
],
};
plugin.addLabelGroup(labelGroup);
Note
Certain options (for example,
elevation
andinteractive
) can be set in the LabelOptions of a particular label in a group. In this case, the label value is prioritized over the group value.
To link the label group to a model (for example, a building), pass the model options BuildingState as the second argument:
plugin.addLabelGroup(labelGroup, {
buildingId: 'ea234f1',
});
To link labels to a building floor, specify the floorId
:
plugin.addLabelGroup(labelGroup, {
buildingId: 'ea234f1',
floorId: '123456',
});
Options are added to the target
field of the plugin event label GltfPluginLabelEvent.
To remove the label group from the map, use the removeLabelGroup
method and pass the group identifier as an argument:
plugin.removeLabelGroup('722ea9');
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@^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: 'dontWaitAll',
modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/standpointtowers/',
});
plugin
.addModels([
{
modelId: 'standpointtowers',
coordinates: [
55.27087225578725,
25.196689173834102
],
modelUrl: 'standpointtowers_center.glb',
rotateZ: -116.76399405643865,
linkedIds: ['13933647002592567'],
interactive: true,
},
{
modelId: 'standpointtowers2',
coordinates: [
55.27087225578725,
25.196689173834102
],
modelUrl: 'standpointtowers2.glb',
rotateZ: -116.76399405643865,
linkedIds: ['13933647002601472'],
interactive: true,
},
{
modelId: 'standpointtowers3',
coordinates: [
55.27087225578725,
25.196689173834102
],
modelUrl: 'standpointtowers3.glb',
rotateZ: -116.76399405643865,
linkedIds: ['13933647002601471'],
interactive: true,
},
{
modelId: 'standpointtowers6',
coordinates: [
55.270675867795944,
25.19714112613724
],
modelUrl: 'standpointtowers6.glb',
rotateZ: -122.50752437711678,
linkedIds: ['13933647002603034'],
interactive: true,
},
]);
</script>
</body>
</html>
Working with an interactive scene
Interactive realty scene allows you to present a building with floor plans and labels that users can interact with (for example, switch floors and see information about separate premises on the floor).
The strategy of displaying models on the map is defined by the modelsLoadStrategy
option (see the Plugin initialization section):
- With the
waitAll
strategy, all models from the scene configuration (including floor plan models) are loaded simultaneously. This increases the amount of loaded data and the time of displaying the scene on the map. However, switching floor plans happens without delays. All models from the realty scene appear on the map synchronously. - With the
dontWaitAll
strategy, only the main models (including a floor plan if the initial scene state is defined) are loaded. This enables reducing the amount of loaded data and displaying the scene as soon as possible. Models are displayed asynchronously as each model is loaded. During floor plan switching, the target floor is shown with a delay unless it has been loaded before.
Note
To set up an interactive scene using the tool for positioning models, see the Configuring an interactive scene instruction.
Configuring the main building model
At the top hierarchy is a building facade: the main model and its BuildingOptions that contain ModelOptions and additional fields:
mapOptions
: map options that are applied when the facade becomes active.popupOptions
: options of a popup displayed when you hover over the facade.
const facade = {
modelId: '03a234cb',
coordinates: [47.245286302641034, 56.134743473834099],
modelUrl: 'http://example.com/models/model1.glb',
interactive: true,
rotateZ: 15,
scale: 1.2,
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: 'Dealine: Q4, 2024. <br />15 mins of foot from the Moskovskaya metro station',
},
};
Configuring floor plans
To add floor plans inside the main model (facade), use the floors
option. All floor plan configurations reuse transformations of the parent building models. This means that you do not need to redefine the rotation, scaling, and shift for floor plan models that belong to the same building.
BuildingFloorOptions also contains the following fields:
mapOptions
: map options that are applied when the floor plan becomes active.text
: text in the realty scene control.labelGroups
: LabelGroupOptions of the floor plan label group that you can use to display additional information about premises on the floor (for example, define separate groups for apartments on sale and for the sold ones).
Note
Certain options (for example,
elevation
andinteractive
) can be set in the LabelOptions of a particular label in a group. In this case, the label value is prioritized over the group value.
const buildingOptions = {
...facade,
floors: [
{
id: '235034',
text: '1-10',
modelUrl: 'http://example.com/models/model1_floor1.glb',
mapOptions: {
center: [47.24524342863023, 56.13449524271827],
pitch: 40,
zoom: 20,
rotation: -57.5,
},
labelGroups: [
{
id: '1111',
elevation: 5,
image: 'default',
minZoom: 19.5,
fontSize: 12,
fontColor: '#3a3a3a',
interactive: true,
labels: [
{
coordinates: [47.245048150280994, 56.134470449142164],
text: '3 Beds\n78.4 sqft',
userData: {
url: 'https://docs.urbi.ae',
},
},
{
coordinates: [47.24520807647288, 56.13443854463778],
text: '2 Beds\n67 sqft',
userData: {
url: 'https://docs.urbi.ae',
},
},
],
},
],
},
],
};
Note
Floors must be ordered from the first to the last one in the array.
Displaying underground floors
To display underground floors, set the isUnderground
option to true
in the BuildingFloorOptions.
When this type of floor plan is displayed, background cover appears and overlaps other objects on the map. Other objects of the interactive scene are hidden and do not overlap the displayed underground floor plan. By default, the background cover color is #F8F8EBCC
. To change it, set the custom color in the groundCoveringColor
field of the PluginOptions. To change the color on the fly, use the setOptions
method (it can be useful when you change the map style).
Adding an interactive scene
To add an interactive scene, use the addRealtyScene
method. The method automatically configures all required event handlers to ensure proper scene operation:
plugin.addRealtyScene([buildingOptions]);
You can pass the BuildingState as the second argument to define which facade or floor becomes active when the realty scene is added to the map:
plugin.addRealtyScene([buildingOptions], { modelId: '03a234cb', floorId: '235034' });
Hiding and showing the interactive scene
To hide the interactive scene on the map, use the hideRealtyScene
method (loaded models are saved in the cache):
plugin.hideRealtyScene();
To show the scene again, use the showRealtyScene
method:
plugin.showRealtyScene();
Removing the interactive scene
To remove the interactive scene, use the removeRealtyScene
method:
plugin.removeRealtyScene();
Example of adding an interactive scene on the map
Once models are displayed on the map, click one of 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@^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',
},
});
const realtyScene = [
{
modelId: 'standpointtowers',
coordinates: [
55.27087225578725,
25.196689173834102
],
rotateZ: -116.76399405643865,
modelUrl: 'standpointtowers_center.glb',
linkedIds: ['13933647002592567'],
interactive: true,
mapOptions: {
center: [55.271321201282895, 25.196442258306178],
pitch: 50.4,
zoom: 18.52,
rotation: -115.7,
},
},
{
modelId: 'standpointtowers2',
coordinates: [
55.27087225578725,
25.196689173834102
],
rotateZ: -116.76399405643865,
modelUrl: 'standpointtowers2.glb',
linkedIds: ['13933647002601472'],
interactive: true,
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,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 10,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '3',
text: '3',
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,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '4',
text: '4',
modelUrl: 'standpointtowers4-4.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 14.8,
zoom: 20.7,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 16,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '5',
text: '5',
modelUrl: 'standpointtowers4-5.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 9.3,
zoom: 20.65,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 19,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '6',
text: '6',
modelUrl: 'standpointtowers4-6.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 8.5,
zoom: 20.60,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 22,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '7',
text: '7',
modelUrl: 'standpointtowers4-7.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 8.2,
zoom: 20.56,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 24,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '8',
text: '8',
modelUrl: 'standpointtowers4-8.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 8,
zoom: 20.51,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 26,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '9',
text: '9',
modelUrl: 'standpointtowers4-9.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 8,
zoom: 20.4,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 29,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '10',
text: '10',
modelUrl: 'standpointtowers4-10.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 8,
zoom: 20.3,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 31,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '11',
text: '11',
modelUrl: 'standpointtowers4-11.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 8,
zoom: 20.2,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 34,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '12',
text: '12',
modelUrl: 'standpointtowers4-12.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 7.5,
zoom: 20.1,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 36,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '13',
text: '13',
modelUrl: 'standpointtowers4-13.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 7.0,
zoom: 20.1,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 39,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '14',
text: '14',
modelUrl: 'standpointtowers4-14.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 6.5,
zoom: 20.1,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 42,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '15',
text: '15',
modelUrl: 'standpointtowers4-15.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 6,
zoom: 20.1,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 45,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '16',
text: '16',
modelUrl: 'standpointtowers4-16.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 5.5,
zoom: 20.1,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 48,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
{
id: '17',
text: '17',
modelUrl: 'standpointtowers4-17.glb',
mapOptions: {
center: [55.27101659214413, 25.19692572574951],
pitch: 5.0,
zoom: 20.0,
rotation: 137.02588223579758,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 50,
fontSize: 9,
fontColor: '#3a3a3a',
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/',
},
},
],
},
],
},
],
},
{
modelId: 'standpointtowers3',
coordinates: [
55.27087225578725,
25.196689173834102
],
rotateZ: -116.76399405643865,
modelUrl: 'standpointtowers3.glb',
linkedIds: ['13933647002601471'],
interactive: true,
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_without_transforms.glb',
mapOptions: {
center: [55.27084419010903, 25.19649935503182],
pitch: 9.2,
zoom: 19.97,
rotation: -12.398906380706755,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 45,
fontSize: 9,
fontColor: '#3a3a3a',
labels: [
{
coordinates: [55.27068175220883, 25.19649320038519],
text: '2 Beds\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27077348188615, 25.19647327785033],
text: '2 Beds\n450 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27085214880376, 25.196467153234963],
text: '2 Beds\n400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27099580986241, 25.196472879809335],
text: '2 Beds\n450 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710647854107, 25.19641925181169],
text: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.270947692821274, 25.19636548566021],
text: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27051955532713, 25.196424192744416],
text: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.270597030613025, 25.196393584814047],
text: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27083715085102, 25.19635404369795],
text: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.270736638337546, 25.196362134415565],
text: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27067601641181, 25.19638678843009],
text: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27102002769878, 25.196363368779487],
text: '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,
},
labelGroups: [
{
id: '1111',
image: 'default',
minZoom: 18.9,
elevation: 61,
fontSize: 9,
fontColor: '#3a3a3a',
labels: [
{
coordinates: [55.27068175220883, 25.19649320038519],
text: '2 Beds\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27077348188615, 25.19647327785033],
text: '2 Beds\n450 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27085214880376, 25.196467153234963],
text: '2 Beds\n400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27099580986241, 25.196472879809335],
text: '2 Beds\n450 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.2710647854107, 25.19641925181169],
text: '1 Bed\n360 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.270947692821274, 25.19636548566021],
text: '1 Bed\n330 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27051955532713, 25.196424192744416],
text: '1 Bed\n690 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.270597030613025, 25.196393584814047],
text: '1 Bed\n600 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27083715085102, 25.19635404369795],
text: '4 Beds\n1800 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.270736638337546, 25.196362134415565],
text: '2 Beds\n1500 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27067601641181, 25.19638678843009],
text: '2 Beds\n1215 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
{
coordinates: [55.27102002769878, 25.196363368779487],
text: '3 Beds\n2400 sqft',
userData: {
url: 'https://dev.urbi.ae/',
},
},
],
},
],
},
],
},
{
modelId: 'standpointtowers6',
coordinates: [
55.270675867795944,
25.19714112613724
],
rotateZ: -122.50752437711678,
modelUrl: 'standpointtowers6.glb',
linkedIds: ['13933647002603034', '70030076452542637'],
interactive: true,
mapOptions: {
center: [55.270872255787253, 25.196689173834102],
pitch: 40,
zoom: 19,
rotation: -41.4,
},
},
];
plugin.addRealtyScene(realtyScene);
</script>
</body>
</html>
Key changes in version 2
As the second version of the plugin does not use the ThreeJS library, you need to define rotation and shift parameters and scaling ratio again. For information about model axis directions, see configuring model position.
Changes in plugin options
-
Removed the following options from the PluginOptions interface:
dracoScriptsUrl
because model loading is now done by the map engineambientLight
because light is set up in map styles now. You can configure them in the Style editor.
-
Replaced the
hoverHighlight
option withhoverOptions
where you can set up the hover state of the model. The color is applied by multiplying each component, so you cannot highlight the model with white color. -
Replaced the
poiConfig
option withlabelGroupDefaults
, which contain default settings for all label groups without division intoprimary
andsecondary
. In version 1, these types are used to separate labels with and without the background. In version 2, the text background is defined in the label group options. To set a custom background cover, use theimage
option in thelabelGroupDefaults
.
// Example of plugin options in version 1
{
dracoScriptsUrl: 'https://unpkg.com/@2gis/mapgl-gltf@^1/dist/libs/draco/',
poiConfig: {
primary: {
fontSize: 14,
fontColor: '#000000',
},
secondary: {
fontSize: 14,
fontColor: '#000000',
},
},
ambientLight: {
color: '#ffffff',
intencity: 3,
},
hoverHighlight: {
color: '#ff000088',
intencity: 0.0,
},
}
// Same plugin options in version 2
{
labelGroupDefaults: {
fontSize: 14,
fontColor: '#000000',
},
hoverOptions: {
color: '#ff000088',
},
}
Changes in plugin events
-
Changes in the
ModelTarget
interface:- Made the
modelId
option mandatory. Now it accepts only thestring
type. - Removed the
floorId
option.
- Made the
-
Renamed the
PoiTarget
interface to LabelTarget:- Replaced the
type
option value withlabel
. - Changed the
data
option to accept the LabelOptions value. - Renamed the
modelId
option tobuildingId
. Now it accepts only thestring
type. - Changed the
floorId
option to accept only thestring
type.
- Replaced the
-
Replaced the
GltfPluginPoiEvent
interface with
Changes in plugin methods
- Removed the
addModelsPartially
method. Partial adding of models is available in theaddModels
method:
// Example in version 1
plugin.addModelsPartially(
[
{
modelId: '347da1',
coordinates: [82.88651, 54.98092],
modelUrl: 'http://example.com/models/model1.glb',
},
{
modelId: 'f932d2',
coordinates: [82.88659, 54.98101],
modelUrl: 'http://example.com/models/model2.glb',
},
],
['347da1'],
);
// Same example in version 2
plugin.addModels(
[
{
modelId: '347da1',
coordinates: [82.88651, 54.98092],
modelUrl: 'http://example.com/models/model1.glb',
interactive: true,
},
{
modelId: 'f932d2',
coordinates: [82.88659, 54.98101],
modelUrl: 'http://example.com/models/model2.glb',
interactive: true,
},
],
['347da1'],
);
- Removed the second
preserveCache
argument from theremoveModel
andremoveModels
methods. To hide a model on the map, use thehideModel
andhideModels
methods:
// Example in version 1
plugin.removeModel('ea234f1', true);
// or
plugin.removeModels(['ea234f1', 'abc354', ..., 'def123'], true);
// Same example in version 2
plugin.hideModel('ea234f1');
// or
plugin.hideModels(['ea234f1', 'abc354', ..., 'def123']);
- Replaced the
addPoiGroup
method withaddLabelGroup
:
// Example in version 1
plugin.addPoiGroup({
id: '722ea9',
type: 'primary',
elevation: 30,
data: [
{
coordinates: [82.886554, 54.980988],
label: '10 sqft',
},
],
});
plugin.addPoiGroup({
id: '456qwe',
type: 'secondary',
elevation: 33,
data: [
{
coordinates: [82.886, 54.98],
label: '20 sqft',
},
],
});
// Same example in version 2
plugin.addPoiGroup({
id: '722ea9',
image: 'default',
elevation: 30,
labels: [
{
coordinates: [82.886554, 54.980988],
text: '10 sqft',
},
],
});
plugin.addPoiGroup({
id: '456qwe',
elevation: 33,
labels: [
{
coordinates: [82.886, 54.98],
text: '20 sqft',
},
],
});
- Replaced the
removePoiGroup
method withremoveLabelGroup
. - Removed the
preserveCache
argument from theremoveRealtyScene
method. To hide and then show the realty scene, use thehideRealtyScene
andshowRealtyScene
respectively:
// Example in version 1
plugin.removeRealtyScene(true);
plugin.addRealtyScene([ ... ]);
// Same example in version 2
plugin.hideRealtyScene();
plugin.showRealtyScene();
Changes in other interfaces
- Changes in the ModelOptions interface:
- The
modelId
option accepts only thestring
type now. - The
interactive
option contains thefalse
value by default.
- The
// Example in version 1
plugin.addModel({
modelId: 1234,
coordinates: [82.8865, 54.9809],
modelUrl: 'http://example.com/models/model1.glb',
});
// Same example in version 2
plugin.addModel({
modelId: '1234',
coordinates: [82.8865, 54.9809],
modelUrl: 'http://example.com/models/model1.glb',
interactive: true,
});
- Changes in the BuildingFloorOptions interface:
- The
id
option accepts only thestring
type now. - Renamed the
poiGroups
option tolabelGroups
. Now it accepts the LabelGroupOptions array.
- The
- Renamed the
PoiGroupOptions
interface to LabelGroupOptions:- The
id
option accepts only thestring
type now. - Removed the
type
option. Use theimage
option instead and pass settings of the text background cover in a label group as an argument. - Renamed the
data
option tolabels
. Now it accepts the LabelOptions array.
- The
- Renamed the
PoiOptions
interface to LabelOptions:- Renamed the
label
option totext
.
- Renamed the
// Example in version 1
plugin.addRealtyScene([{
...,
floors: [{
id: 235034,
text: '1-10',
modelUrl: 'http://example.com/models/model1_floor1.glb',
poiGroups: [
{
id: 1111,
type: 'primary',
elevation: 5,
data: [{
coordinates: [47.245048150280994, 56.134470449142164],
label: '3 Beds\n78.4 sqft',
}],
},
{
id: 2222,
type: 'secondary',
elevation: 5,
data: [{
coordinates: [47.2451, 56.1344],
label: '2 Beds\n60 sqft',
}],
},
],
}],
}]);
// Same example in version 2
plugin.addRealtyScene([{
...,
floors: [{
id: '235034',
text: '1-10',
modelUrl: 'http://example.com/models/model1_floor1.glb',
labelGroups: [
{
id: '1111',
image: 'default',
elevation: 5,
interactive: true,
labels: [{
coordinates: [47.245048150280994, 56.134470449142164],
text: '3 Beds\n78.4 sqft',
}],
},
{
id: '2222',
elevation: 5,
interactive: true,
labels: [{
coordinates: [47.2451, 56.1344],
text: '2 Beds\n60 sqft',
}],
},
],
}],
}]);
- Changes in the BuildingState interface:
- Replaced the
modelId
option withbuildingId
. Now it accepts only thestring
type. - The
floorId
option now accepts only thestring
type.
- Replaced the
// Example in version 1
plugin.addPoiGroup({ ... }, {
modelId: 1111,
floorId: 2222,
});
// or
plugin.addRealtyScene([ ... ], {
modelId: 'abc123',
floorId: 'def456',
});
// Same example in version 2
plugin.addLabelGroup({ ... }, {
buildingId: '1111',
floorId: '2222',
});
// or
plugin.addRealtyScene([ ... ], {
buildingId: 'abc123',
floorId: 'def456',
});