Shared Samples

[#1]

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
      • Example source: http://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv  

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.