mapgl:objects.gtlf.gltf2plugin | MapGL | 2GIS Documentation
MapGL JS API

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

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 mapgl namespace:

    const plugin = new mapgl.GltfPlugin(map);
    
  • Installing via npm

    npm install @2gis/mapgl-gltf
    

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 the color option 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 is 14.
    • 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 the image value in LabelGroupOptions is set as default. 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 without http:// or https:// 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 the position option is currently available. Possible values are described at ControlPosition.
  • groundCoveringColor: map background color when an underground floor is displayed. Default value is #F8F8EBCC
  • zIndex: order of rendering plugin objects (models, labels) relative to other objects on the map.

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.


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).

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');

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']);

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:

  1. Get object identifiers:

    1. Set up logging of object identifiers on click:

      map.on('click', (e) => {
          console.log(e);
      });
      
    2. Open the browser DevTools and click the objects that must be hidden.

      ID is located in the target field 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"
          }
      }
      
  2. Pass an array of object identifiers to the linkedIds field of model options:

    plugin.addModel({
        modelId: 'ea234f1',
        coordinates: [82.8865, 54.9809],
        modelUrl: 'http://example.com/models/model1.glb',
        linkedIds: ['141373143533390'],
    });
    

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, elevation and interactive) 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');
<!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>

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 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 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.

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',
    },
};

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, elevation and interactive) 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.

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.

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' });

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();

To remove the interactive realty scene, use the removeRealtyScene method:

plugin.removeRealtyScene();

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>

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.

  • Removed the following options from the PluginOptions interface:

    • dracoScriptsUrl because model loading is now done by the map engine
    • ambientLight because light is set up in map styles now. You can configure them in the Style editor.
  • Replaced the hoverHighlight option with hoverOptions 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 with labelGroupDefaults, which contain default settings for all label groups without division into primary and secondary. 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 the image option in the labelGroupDefaults.

// 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 the ModelTarget interface:

    • Made the modelId option mandatory. Now it accepts only the string type.
    • Removed the floorId option.
  • Renamed the PoiTarget interface to LabelTarget:

    • Replaced the type option value with label.
    • Changed the data option to accept the LabelOptions value.
    • Renamed the modelId option to buildingId. Now it accepts only the string type.
    • Changed the floorId option to accept only the string type.
  • Replaced the GltfPluginPoiEvent interface with

  • Removed the addModelsPartially method. Partial adding of models is available in the addModels 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 the removeModel and removeModels methods. To hide a model on the map, use the hideModel and hideModels 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 with addLabelGroup:
// 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 with removeLabelGroup.
  • Removed the preserveCache argument from the removeRealtyScene method. To hide and then show the realty scene, use the hideRealtyScene and showRealtyScene respectively:
// Example in version 1
plugin.removeRealtyScene(true);
plugin.addRealtyScene([ ... ]);

// Same example in version 2
plugin.hideRealtyScene();
plugin.showRealtyScene();
  • Changes in the ModelOptions interface:
    • The modelId option accepts only the string type now.
    • The interactive option contains the false value by default.
// 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 the string type now.
    • Renamed the poiGroups option to labelGroups. Now it accepts the LabelGroupOptions array.
  • Renamed the PoiGroupOptions interface to LabelGroupOptions:
    • The id option accepts only the string type now.
    • Removed the type option. Use the image 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.
  • Renamed the PoiOptions interface to LabelOptions:
    • Renamed the label option to text.
// 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 with buildingId. Now it accepts only the string type.
    • The floorId option now accepts only the string type.
// 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',
});