I want to restrict the OpenLayers 3 heatmap-earthquakes examle to show only Europe.

I have:

var raster = new ol.layer.Tile({
  source: new ol.source.Stamen({
    layer: 'toner-background'

var map = new ol.Map({

  layers: [raster, vectorLayer],
  target: 'map',
    view: new ol.View({
        projection: 'EPSG:3857',
        center: [0, 0],
        maxZoom: 9,
        minZoom: 0,
        zoom: 4

Let`s say that the points:

var point1 = new ol.geom.Point(ol.proj.transform([-20.000000, 28.000000], 'EPSG:4326', 'EPSG:3857'));
var point2 = new ol.geom.Point(ol.proj.transform([50.000000, 73.000000], 'EPSG:4326', 'EPSG:3857'));

are the bounds of Europe, how can I restrict the map view only between the two point?


A similar question was asked here on StackOverflow some time ago.

So, although a patch (and a pull request) exists, what you want is not yet supported by OpenLayers 3.

For now you may want to use the extent option of ol.View. As the docs say, with this option, you can constrain the center of the view in a way that it cannot be outside of the given extent.

And you can also use the minZoom or maxResolution options (of ol.View again) to prevent the user from zooming out. The zoom-constrained example pointed to by @Mapperz in his/her comment demonstrates the use of these options.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.