Showing results for 
Search instead for 
Do you mean 

Exercise: Application with two synchronized map viewers - tutorial

by Technical Evangelist on ‎07-26-2016 02:45 AM - edited on ‎10-31-2019 02:36 AM by Community Manager (1,412 Views)


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

 - $

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



  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

            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


 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

            sourceCrsId: "EPSG:3857",
            points: [eventData.position],
        function(result) {
                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.