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.
- $GP.crs.transform
- $GP.m_app.messages
- $GP.events
Link to repository containing code snippets for following exercise: BitBucket repository
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.