CODEWITHSUNDEEP
openlayersopenlayers-5
user1939338
user1939338

Reputation: 117

show mousepointer in multiple maps (syncing mousepointer)

When I have my mousepointer in one map I need the mousepointer also visible in another map at the same time (and of course showing at the same position)........so syncing mousepointer between maps.

How can I achieve that?

Upvotes: 0

Views: 157

Answers (1)

Mike
Mike

Reputation: 17962

You can only have one real mouse pointer on a windows display, but you could display a shared feature on each map which follows the real pointer on either map. You could even style it with an icon to make it look like a pointer if you wanted to. 

var white = [255, 255, 255, 1];
var blue = [0, 153, 255, 1];
var width = 3;
style = new ol.style.Style({
    image: new ol.style.Circle({
      radius: width * 2,
      fill: new ol.style.Fill({
        color: blue
      }),
      stroke: new ol.style.Stroke({
        color: white,
        width: width / 2
      })
    }),
    zIndex: Infinity
  });

  var pointer = new ol.Feature(new ol.geom.Point([0,0]));
  pointer.setStyle(style);

  var map1 = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [pointer]
        })
      })
    ],
    target: 'map1',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });

  var map2 = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [pointer]
        })
      }),
 
    ],
    target: 'map2',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });

  map1.on('pointermove', function(evt) {
    pointer.getGeometry().setCoordinates(evt.coordinate);
  });
  map2.on('pointermove', function(evt) {
    pointer.getGeometry().setCoordinates(evt.coordinate);
  });
  .wrapper {
      display: flex;
      height: 90%;
  }
  @media (min-width: 800px) {
    .half {
      padding: 0 10px;
      width: 50%;
      float: left;
    }
  }
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  <div class="wrapper">
<div class="half">
  <div id="map1" class="map"></div>
</div>
<div class="half">
  <div id="map2" class="map"></div>
</div>
  </div>

Upvotes: 1

Related Questions