Search code examples
javascriptopenlayers

OpenLayers 4 Overview map click event

How can I enable the click event to move the overview map in OpenLayers 4?

Here the code from the example, the same as I use

var map = new ol.Map({
  controls: ol.control.defaults().extend([
    new ol.control.OverviewMap()
  ]),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [500000, 6000000],
    zoom: 7
  })
});

Sorry if I don't put my code but I use the same code, and neither on the example, you are able to click on a part of the overview map and move the box and the main map, It seems that you can do it just with a drag option.

What I want to achieve is the possibility to click on a part of the overview map and move the box to the mouse location and in this way center also the master map without needs to go to the box in the overview map with the mouse and drag it to move booth views

Solution

  • The example you're referring to is apparently: Overview Map Control

    Looking at the source code for overviewmap.js you can see it creates the following:

    var box = document.createElement('DIV');
box.className = 'ol-overviewmap-box';

    So you if you use JQuery you could center the overview horizontally with something like:

    $(".ol-overviewmap-box").css('left', '50%');

    or manipulate it's position when clicking the overview.