Change maxZoom option in runtime to ol.View in angular-openlayers-directive

Question

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.

Maybe you find here what you need tombatossals/angular-openlayers-directive/examples — DomeTune
– DomeTune, Commented Feb 20, 2017 at 11:42

Sumanth Shastry · Accepted Answer · 2017-02-20 17:50:29Z

1

+50

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

answered Feb 20, 2017 at 17:50

Sumanth Shastry

1,1791 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Leonard · Accepted Answer · 2017-02-20 19:54:29Z

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!

answered Feb 20, 2017 at 19:54

John Leonard

92913 silver badges24 bronze badges

Collectives™ on Stack Overflow

Change maxZoom option in runtime to ol.View in angular-openlayers-directive

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related