Hexagon Geospatial
MENU

Shared Samples

M.App Portfolio provides a modern, cloud-based platform for creating and delivering diverse geospatial web applications.
Through the M.App Studio, our partners can design, build, and deploy their own Hexagon Smart M.Apps.
Showing results for 
Search instead for 
Do you mean 

Exercise: Application with two synchronized map viewers - tutorial

by Technical Evangelist ‎07-26-2016 02:45 AM - edited ‎10-11-2016 09:49 AM (682 Views)

Introduction

This is a tutorial that shows how to create an application which contains two panels with two independent map compositions synchronized with each other. Both maps will zoom and change their position at the same time. 

API methods used:

 - $GP.crs.transform

 - $GP.m_app.messages

 - $GP.events

Link to repository containing code snippets for following exercise: BitBucket repository

 

Description

  1. Create an application with 2 MapViewer panels

    1. Click create new MApp
    2. Drag & drop one of Two Panel layouts
    3. Drag & drop Map application to both panels
    4. Open first map wizard and create new map with HereMap layer
    5. Open second map wizard and create new map with custom WMS layer
  2. Customization to be applied to the both map viewers.

Go to customization panel and choose "JS" icon. Code needs to be pasted in both map viewers.

onLocalMapMoved = function(event, data) {
    if (data.context == localToken) // check if map-moved wasn't initiated by this map-viewer
        return;

    $GP.crs.transform(
        {
            sourceCrsId: data.crs.base,
            sourceCrsFixedAxes: data.crs.fixedAxes,
            targetCrsId: "EPSG:3857",
            points: [{
                x: data.coordinates[0],
                y: data.coordinates[1]
            }]
        },
        function(result) {
            $GP.m_app.messages.send("otherMap.moved", {
                position: result.points[0],
                height: data.height,
                context: localToken
            });
        }
    );
};

$GP.events.mapMoved.register(onLocalMapMoved);

 This function is a mapMoved event handler which sends a custom message with the current map position. It also doesn't react on events emitted by itself. 

onOtherMapMoved = function(eventData) {
    if (eventData.context == localToken) // check if map-moved wasn't initiated by this map-viewer
        return;

    $GP.crs.transform({
            sourceCrsId: "EPSG:3857",
            points: [eventData.position],
        },
        function(result) {
            $GP.map.transform({
                x: result.points[0].x,
                y: result.points[0].y,
                height: eventData.height,
                animationTime: 10,
                token: localToken
            });
        });
};

$GP.m_app.messages.subscribe("otherMap.moved", onOtherMapMoved);

 Custom message handler that receives position change events form the other map viewer and moves its own map instance and doesn't react on events emitted by itself.

var localToken = location.href; // unique simple value for this instance of map viewer

 Set localToken variable to be uniqe for each mapviewer. Good unique value is application location URL.

NOTE: you can add even more map panels with the same script and they are all going to be synchronized.      

 

Final App.

2mapsApp1.png

 

2mapsApp2.png