Make boundary for ol static image

Question

I'm using ol v5.3.0 for view static image. I want to bound the image for the size of the ol div. When the image minimize more than the div size the will not minimize anymore. I tried to use the projection attribute of the static image with the extent of the original image size But it does not help. there is any option to do it?

Do you mean you want the static image to have a minimium size (a bit like an overlay) even if other layers on the map continue to zoom out? But the static image can also be zoomed when greater than the minimum size when zooming in? — Mike, Dec 24 '18 at 15:09
yes, but I have only one layer- the static image. I want when it zooms out and come to the div size it will stop. The minimum size will be the picture. — Ezri Y, Dec 24 '18 at 15:26

Mike · Accepted Answer · 2018-12-25T12:16:10.280

Based on this example https://openlayers.org/en/v4.6.5/examples/static-image.html

Instead of opening immediately at zoom 2, if first you fit the extent to the map size and get the zoom level (which will be fractional) which that produces and set it as the minimum zoom the map cannot be zoomed out beyond the size of the image (although it is possible to pan outside the extent).

  var extent = [0, 0, 1024, 968];
  var projection = new ol.proj.Projection({
    code: 'xkcd-image',
    units: 'pixels',
    extent: extent
  });

  var map = new ol.Map({
    layers: [
      new ol.layer.Image({
        source: new ol.source.ImageStatic({
          attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
          url: 'https://imgs.xkcd.com/comics/online_communities.png',
          projection: projection,
          imageExtent: extent
        })
      })
    ],
    target: 'map',
    view: new ol.View({
      projection: projection
    })
  });

  var view = map.getView();
  view.fit(extent, { constrainResolution: false });
  view.setMinZoom(view.getZoom());

  // set opening zoom level (zoom set by code must not be less than the minZoom)
  view.setZoom(Math.max(2, view.getMinZoom());

  var center = ol.extent.getCenter(extent);
  view.on(['change:center','change:resolution'], function() {
  // map.on('moveend', function() {        // alternative
      var viewCenter = view.getCenter();
      if ((viewCenter[0] != center[0] || viewCenter[1] != center[1]) && view.getZoom() == view.getMinZoom()) {
          view.setCenter(center);
      }
  });

works like a charm thanks! In addition, is there any option that when the image in the "block zoom size" if the user move the image to the right or left it will go back to his boundaries? — Ezri Y, Dec 24 '18 at 16:35
I've added a listener for changes which will reposition the image if necessary. — Mike, Dec 24 '18 at 17:00
You may find `view.on(['change:center','change:resolution'],` causes a heavy load and some internal errors. Using `map.on('moveend',` is less intensive as it snaps back after a change instead of always trying to keep the position fixed. — Mike, Dec 24 '18 at 17:24
moves better. `view.setZoom(2)` ( or any other init zoom) in some use case can make false in the `view.getZoom() == view.getMinZoom()` expresstion. perfer to let the `view.fit(extent, { constrainResolution: false });` do his magic. — Ezri Y, Dec 24 '18 at 17:49
Yes, setting a view value in the code can override constraints. — Mike, Dec 24 '18 at 22:58

Make boundary for ol static image

1 Answers1