glTF plugin version 2
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. The second version of the plugin loads and renders models using the MapGL engine functionality only. This allows you to apply various effects like fog, light, and shadows to your models and configure these effects in the map style.
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 section with key changes.
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
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@^2/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
Initialization and additional options
To initialize the plugin, pass an existing map entity to the plugin constructor:
const plugin = new GltfPlugin(map);
In this case, default values are applied to plugin options. 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. Currently only thecoloroption is available, the default value is#FFFFFF. Color is applied by multiplying each component.labelGroupDefaults: default values for label groups, unless custom options are specified in LabelGroupOptions:fontSize: font size for the label group. Default value is14.fontColor: font color for the label group. Default value is#000000.image: options for the label text background. The background is applied to the group if theimagevalue 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: if the model URL is set withouthttp://orhttps://and the domain name, models are loaded relatively to this parameter. Default value is'', so all models will be loaded relatively to the web application host.modelsLoadStrategy: strategy of loading and displaying models. Possible values:waitAll: all models are loaded and then displayed simultaneously (default value).dontWaitAll: each model is displayed as soon as it is loaded.
floorsControl: options for the controls of the interactive realty scene. Only thepositionoption is currently available. Possible values are described at ControlPosition.groundCoveringColor: map background color when an underground floor is displayed. Default value is#F8F8EBCCzIndex: order of rendering plugin objects (models, labels) relative to other objects on the map.
Plugin events
You can subscribe to plugin events that occur during interaction with objects (models, labels). For example:
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 model or a label event 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 plugin initialization).
Working with one model
To add a model to the map, use the addModel method and pass model options as the first argument. Do not set the second argument now.
plugin.addModel({
modelId: 'ea234f1',
coordinates: [82.8865, 54.9809],
modelUrl: 'http://example.com/models/model1.glb',
rotateZ: -15,
scale: 2,
interactive: true,
});
You can also load the model to the cache without displaying it right away. To do it, pass the second argument with the true value. To display the model later, use the showModel method.
To hide the model on the map, use the hideModel method and pass the model identifier as an argument:
plugin.hideModel('ea234f1');
To show the model again, use the showModel method and pass the model identifier as an argument:
plugin.showModel('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 model options array as the first argument. Do not set the second argument now.
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);
You can also load models to the cache and display only some of them on the map. To do it, collect the identifiers of models to display and pass this array as the second argument:
plugin.addModels(models, ['347da1']);
To only load models without displaying them, pass an empty array as the second argument:
plugin.addModels(models, []);
To display hidden models later, use the showModel or showModels method.
To hide multiple models from the map, use the hideModels method and pass an array of model identifiers as an argument:
plugin.hideModels(['347da1', 'f932d2']);
To display the models again, use the showModels method and pass an array of model identifiers as an argument:
plugin.showModels(['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 avoid objects overlap and achieve better visual effects, you need to hide necessary objects on the map:
-
Get object identifiers:
-
Set up logging of object identifiers on click:
map.on('click', (e) => { console.log(e); }); -
Open the browser DevTools and click the objects 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 an array of object identifiers to the
linkedIdsfield of model options: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.
To add labels to the map, use the addLabelGroup method and pass LabelGroupOptions as an argument.
Note
Certain options (for example,
elevationandinteractive) can be set in the options of a particular label in a group. In this case, the label value is prioritized over the group value.
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);
To link the label group to a model (for example, a building), pass the model options as the second argument:
plugin.addLabelGroup(labelGroup, {
buildingId: 'ea234f1',
});
You can also link labels to a building floor:
plugin.addLabelGroup(labelGroup, {
buildingId: 'ea234f1',
floorId: '123456',
});
Options are added to the target field of the plugin event label.
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 a model 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 realty scene
Interactive realty scene allows you to present a building with floor plans and label, which users can interact with (for example, switch floors and see information about separate premises on the floor). The scene configuration is a hierarchy of objects to be added to the map.
Note that the strategy of loading and displaying models on the map is defined by the modelsLoadStrategy option (see plugin initialization):
- With the
waitAllstrategy, 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
dontWaitAllstrategy, only 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.
Configuring the main building model
At the top hierarchy is a building facade: the main model and its options that contain model options 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. Add 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 one and the same building.
Floor plan options 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: options 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,
elevationandinteractive) can be set in the options 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 in the floor plan options to true.
When this type of floor plan is displayed:
- Background cover appears and overlaps other objects on the map.
- Other objects of the interactive realty scene are hidden.
- Map objects (for example, other buildings) 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 plugin options or use the setOptions plugin method. Using the method allows you to change the color on the fly, which can be useful during map style changes.
Adding an interactive realty scene
To add an interactive realty 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 scene state 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 realty scene
To hide the interactive realty scene on the map, use the hideRealtyScene method. This enables hiding the scene but keeping loaded models in cache.
plugin.hideRealtyScene();
To show the scene again, use the showRealtyScene method:
plugin.showRealtyScene();
Removing the interactive realty scene
To remove the interactive realty scene, use the removeRealtyScene method:
plugin.removeRealtyScene();
Example of adding a realty 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 from version 1
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:
dracoScriptsUrlbecause model loading is now done by the map engineambientLightbecause light is set up in map styles now. You can configure them in the Style Editor.
-
Replaced the
hoverHighlightoption withhoverOptionswhere 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
poiConfigoption withlabelGroupDefaults, which contain default settings for all label groups without division intoprimaryandsecondary. 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 theimageoption 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
ModelTargetinterface:- Made the
modelIdoption mandatory. Now it accepts only thestringtype. - Removed the
floorIdoption.
- Made the
-
Renamed the
PoiTargetinterface to LabelTarget:- Replaced the
typeoption value withlabel. - Changed the
dataoption to accept the LabelOptions value. - Renamed the
modelIdoption tobuildingId. Now it accepts only thestringtype. - Changed the
floorIdoption to accept only thestringtype.
- Replaced the
-
Replaced the
GltfPluginPoiEventinterface with
Changes in plugin methods
- Removed the
addModelsPartiallymethod. Partial adding of models is available in theaddModelsmethod:
// 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
preserveCacheargument from theremoveModelandremoveModelsmethods. To hide a model on the map, use thehideModelandhideModelsmethods:
// 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
addPoiGroupmethod 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
removePoiGroupmethod withremoveLabelGroup. - Removed the
preserveCacheargument from theremoveRealtyScenemethod. To hide and then show the realty scene, use thehideRealtySceneandshowRealtyScenerespectively:
// 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
modelIdoption accepts only thestringtype now. - The
interactiveoption contains thefalsevalue 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
idoption accepts only thestringtype now. - Renamed the
poiGroupsoption tolabelGroups. Now it accepts the LabelGroupOptions array.
- The
- Renamed the
PoiGroupOptionsinterface to LabelGroupOptions:- The
idoption accepts only thestringtype now. - Removed the
typeoption. Use theimageoption instead and pass settings of the text background cover in a label group as an argument. - Renamed the
dataoption tolabels. Now it accepts the LabelOptions array.
- The
- Renamed the
PoiOptionsinterface to LabelOptions:- Renamed the
labeloption 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
modelIdoption withbuildingId. Now it accepts only thestringtype. - The
floorIdoption now accepts only thestringtype.
- 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',
});