O'Reilly logo

OpenLayers 3 : Beginner's Guide by Erik Hazzard, Paul Spencer, Thomas Gratier

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – configuring ZoomToExtent and manipulate controls

In order to learn better, let's try another example:

  1. Copy the HTML code from other examples.
  2. Set the center and zoom of the map at loading to different values from the usual one. You can get values reusing the view with map.getView().getZoom() and map.getView().getCenter().
  3. Create a control named zoomToExtentControl:
    var zoomToExtentControl = new ol.control.ZoomToExtent({
      extent: [-11243808.051695308, 4406397.202710291, -4561377.290892059, 6852382.107835932]
    });
  4. Reuse it with the code that follows, after your map instantiation:
    addControl(zoomToExtentControl);
  5. Find the control within the controls attached to the map:
    var controls = map.getControls(); var attributionControl; controls.forEach(function ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required