CODEWITHSUNDEEP
openlayers
dementor
dementor

Reputation: 85

Synchronize different maps with different center and rotation

My use case is that I have two maps side by side and then a user can move both independently to different regions on both and rotate also if necessary. Then, they press a button which will start synchronize on both maps from that point.

I saw how synchronize can work with the same view object but in my case from what I understand I need different view objects as the center and rotation will change.

How do I share a single view between two maps but have different center and rotation?

Upvotes: 2

Views: 1220

Answers (2)

Viglino Jean-Marc
Viglino Jean-Marc

Reputation: 1421

ol-ext has a Synchronize interaction that do the job for you. You just have to add it on the maps when the button is clicked.

See example http://viglino.github.io/ol-ext/examples/misc/map.interaction.synchronize.html

Upvotes: 1

Mike
Mike

Reputation: 17962

Synchronising changes to the views without synchronising the views can be done by listening for changes, but you need to prevent a change to one map which updates the other causing a further update to the original and an endless loop. Fortunately the animate method has a completion callback option so using that allows further updates to be disabled until the first is complete. http://mikenunn.16mb.com/demo/sync-changes.html

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
  <style>
    html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .map1 {
        width: 50%;
        height: 40%;
    }
    .map2 {
        width: 50%;
        height: 40%;
    }
  </style>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  <title>OpenLayers example</title>
</head>

<body>
  <div id="map1" class="map1"></div>
  <input type="submit" onclick="setSync()" value="Sync">
  <input type="submit" onclick="unsetSync()" value="Unsync">
  <div id="map2" class="map2"></div>
  <script type="text/javascript">

      var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

      var map1 = new ol.Map({
        target: 'map1',
        layers: [layer],
        view: new ol.View({
          center: [0, 0],
          zoom: 1
        })
      });

      var map2 = new ol.Map({
        target: 'map2',
        layers: [layer],
        view: new ol.View({
          center: [0, 0],
          zoom: 1
        })
      });

      var sync = false;
      var dx, dy, dz, dr;

      map1.getView().on(['change:center','change:resolution','change:rotation'], function() {
        if (sync) {
          var center = map1.getView().getCenter();
          var zoom = map1.getView().getZoom();
          var rotation = map1.getView().getRotation();
          sync = false;
          map2.getView().animate({
            center: [center[0] + dx, center[1] + dy],
            zoom: zoom + dz,
            rotation: rotation + dr,
            duration: 0
          }, function() { sync = true; });
        }
      });

      map2.getView().on(['change:center','change:resolution','change:rotation'], function() {
        if (sync) {
          var center = map2.getView().getCenter();
          var zoom = map2.getView().getZoom();
          var rotation = map2.getView().getRotation();
          sync = false;
          map1.getView().animate({
            center: [center[0] - dx, center[1] - dy],
            zoom: zoom - dz,
            rotation: rotation - dr,
            duration: 0
          }, function() { sync = true; });
        }
      });

      function setSync() {
        sync = true;
        var center1 = map1.getView().getCenter();
        var center2 = map2.getView().getCenter();
        dx = center2[0] - center1[0];
        dy = center2[1] - center1[1];
        var zoom1 = map1.getView().getZoom();
        var zoom2 = map2.getView().getZoom();
        dz = zoom2 - zoom1;
        var rotation1 = map1.getView().getRotation();
        var rotation2 = map2.getView().getRotation();
        dr = rotation2 - rotation1;
      }

      function unsetSync() {
        sync = false;
      }

  </script>
</body>

</html>

Upvotes: 2

Related Questions