Map iframe-based integration

This demo-document describes the iframe-based integration of the map.
It is a technical document dedicated to technical audience.

• All geometrical creation and manipulations are done in the map core engine
• The pinch/zoom/rotate is available by default
• Many options for the map style and manipulation is included in the map data but can be customized as needed.
  This includes path color or style, min and max allowed values of map tilt or zoom,...etc
• We describe here the map engine integration only
• All Site data presentation and manipulation (list of POIs, Offers, Events,...etc) is supposed to be managed by hosting App: In the Native code for mobile Apps, or the website code in case of website integration
• Starting from version 072, it is possible to add a basic search field inside the integration iframe.
• Feel free to check the page source code for more info

The iFrane connector:

<div id="container" style="background-color: #555555;">

<script>
    window.amapi = new AMapIntegrator(
        "container", // div element id to integrate the iframe
        {
            // baseUrl: cdn media cache base url: we provide this url
            baseUrl: "https://cdn-server-host",

            // api_key: we provide the api key
            apiKey: "aaaaaabbbbbccccc",

            // site code: we provide the site code
            siteCode: "XXXX",

            // lang: Code of one of the languages available in the project.
            // Default value: "EN"
            lang: "EN",

            // baseui: show (true) or hide (false) levels and zoom buttons.
            // On touch-enabled devices, the zoom-in and zoom-out buttons are hidden
            // Default value: true
            baseui: true,

            // useMobileModels: on some projects we can have different mobile 3D models for mobile than for kiosks.
            // Lighter/simpler models for example. Set this option to true to use the mobile models
            // Default value : true
            useMobileModels: true,

            // lazyld: Depending on the project, some 3D models may take time to load (size, textures,...),
            // set this option to true to enable lazy loading. When enabled the 3D models for a zone (floor) are loaded
            // when the zone is first shown/selected. In any case, the map 3D models are loaded once per session.
            // For small projects, it is better to set this option to false to avoid the small loading halt on zone's first show/select.
            // Default value : false
            lazyld: false,

            // noCacheDisabled: value = true disables the hint to avoid browser caching of site payloads (data, geometry).
            // Default value : false
            noCacheDisabled: false,

            // searchFeature: value = true show a search autocomplete field to search for POIs by name or cell-id.
            // Type some text and hit enter. (max search results is set to 20)
            // Default value : false
            searchFeature: true,

            // searchCellId: value = false disable search cell-id (just by name).
            // Default value : true
            searchCellId: true,

            // hover: value = true enable the MouseHOver events.
            // When enabled and the user move the mouse (without pushing any button) over a POI, that POI is hightlighted and pin-point shown.
            // There's also a public API to do the same via javascript: setHoverEnabled (see below)
            // Default value : false
            hover: false,

            // zonesDropdown: value = true use a Drop-down menu for the map zones (levels) instead of showing the full list.
            // Default value : false
            zonesDropdown: false,

            // hideZonesMenu: if value = true the map zones (levels) menu is not generated.
            // Default value : false
            hideZonesMenu: false,

            // mapSelect: if value = false the selection by clicking on the map is disabled.
            // Default value : true
            mapSelect: true,

            // callback when User clicks directly on a POI on the map
            onClickOnPoi: function (data) {
                console.log("Integrator: POI= ", data);
            },

            // callback when all data is loaded
            onMapLoaded: function () {
                console.log("Integrator: Map loaded");
            },

            // callback when User resets the map using the zoom-reset button
            onReset: function () {
                console.log("IntegratorL: Reset");
            }
        });
</script>

The APIs:

Using the integrator object created above (amapi), the hosting app can manipulate the map using the following APIs.

All communications are based on the POI geoId (geometrical ID) or cellId (example: mall leasing area Id). Each POI is connected to a physical surface via these ids.
The geometrical IDs are automatically generated by the geometry itself, whilst the cell-ids are business ids and can be manually filled/attached to areas on our CMS

The hosting App is supposed to load the Site data (information and urls are provided)

Hosting app to Map APIs:

The below APIs allow the hosting app to control and interact with the map loaded in the iframe element.
Click on the links below to test the APIs.

Map to hosting app APIs:

As shown the code sinppet above, the Integrator constructor defines 3 callbacks from the Map (loaded in the iframe element) toward the hosting app.

This allows the hosting app to react to some of the user's interactions on the map.

• onMapLoaded

  Called when the map finishes loading inside the iframe element (no arguments).

• onClickOnPoi(data)

  Called when the user selects/clicks directly on some POI surface on the map.

  The data argument sent from the map is a Javascript object with the POI cell-id, geoId and type:

  {geoId: "_25568_27586_0", cellId: "G-500", type: "T"}

• onReset

  Called when the user clicks on the reset button (no arguments).