4

I posted this question to change maxZoom in runtime using openlayers3 and that works perfect:

map.setView(new ol.View({
  zoom: 10,
  maxZoom: 17,
  minZoom: 10,
}));

However, im trying to integrate this solution using the angular-openlayers-directive and the map is disappearing. Here a Plunker demo failing. I tried creating new directive and also didn't work. 

olData.getMap().then(function(map){
  map.setView(new ol.View({
    zoom: 11,
    maxZoom: 11,
    minZoom: 0,
  }));
});

Any suggestions on how to integrate this and if you could make it work in the Plunker demo would be great.

Community
  • 1
  • 1
kalifa17
  • 137
  • 7
  • Maybe you find here what you need [tombatossals/angular-openlayers-directive/examples](http://tombatossals.github.io/angular-openlayers-directive/examples/023-center-constrain-zoom-example.html) – DomeTune Feb 20 '17 at 11:42

2 Answers2

1

See the documentation of ol.View object

http://openlayers.org/en/v3.2.1/apidoc/ol.View.html

If center option is not given while creating ol.View object it is taken as undefined. If its undefined then layer sources will not be fetched..In $scope.changeZoom() method center was undefined since it was not provided while creating. Because of this map object was not loaded correctly.

Fix

olData.getMap().then(function(map){
   map.setView(new ol.View({
      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
      zoom: 11,
      maxZoom: 11,
      minZoom: 0,
   }));
});

I have given some random coordinates as center. See the working plunk code here

Sumanth Shastry
  • 1,139
  • 1
  • 19
  • 28
0

I'm not entirely sure why they aren't the same (I didn't investigate the ordinary ol3 solution you stated) but after stepping through the ol-debug.js code it seems it's drawing a blank frame because the new view doesn't have a center.

You can set the center using the existing view's center:

$scope.changeZoom = function () {
    olData.getMap().then(function (map) {
        newView = new ol.View({
            zoom: 5,
            maxZoom: 20,
            minZoom: 0,
        });
        newView.setCenter(map.getView().getCenter());
        map.setView(newView);
    });
};

And here's a working plunker*.

*I haven't used plunker before this so if it doesn't work let me know and I'll try again!

John Leonard
  • 909
  • 11
  • 18