4

I have a series of tile sources equating to different map providers at specific resolutions and I would like to set an extent so that when the relevant layer is selected, the map pans and zooms to the extent of the tiles.

Following this example I've set the extent for each source. I'm also able to get the extent of the selected layer using this code in my layerswitcher control:

curExtent = map.getView().calculateExtent(map.getSize());
            if (extent != null) {
                extent = layers[s].getExtent();
            }
            else {
                extent = map.getView().calculateExtent(map.getSize());
            }
            layerZoom = layers[s].getProperties().minZoom;
            map.getView().fit(extent, map.getSize());
            layers[s].setVisible(true);

I'm able to get the resolution/zoom at this point but I'm not sure how to set the view to the minResolution/zoom property of each source. Can anyone please help?

Further to this I'm now able to get the map to pan and zoom but the layer tiles don't appear. I thought it was a projection issue but I'm in the right location and zoom. Do I need to delay loading of the tiles maybe?

Here is the amended code:

var curExtent = map.getView().calculateExtent(map.getSize());
if (title == selectedValue) {
            if (extent != []) {
                extent = layers[s].getExtent();
            }
            else {
                extent = curExtent;
            }
            console.log(extent);
            layerZoom = layers[s].getProperties().minZoom;
            var sourceCentre = ol.extent.getCenter(extent);
            console.log(sourceCentre);
            console.log(layerZoom);
            console.log(curExtent);              
            console.log(extent);               
            map.getView().setCenter(sourceCentre);
            map.getView().setZoom(layerZoom);
            layers[s].setVisible(true);
        }
        else {
            layers[s].setVisible(false);
        }

I've set up a simple fiddle which now seems to work although I'm struggling to get the extent of the other standard map layers and the functionality seems to break after the initial successful action.

10
  • I don't have any experience with this issue, so to your question gets more attention I'm offering a bounty. Nov 11, 2015 at 17:15
  • Thanks @JonatasWalker, I've posted some amended code which works although the tiles don't load, the location and zoom are correct. I'm about to set up a fiddle which I'll post soon.
    – dvmac01
    Nov 12, 2015 at 9:39
  • Hey @JonatasWalker, I've now posted a fiddle which almost works but I can't get the extent of the current map which seems to break it.
    – dvmac01
    Nov 12, 2015 at 10:22
  • Where, in your code, are you trying to get the extent? Get from what? ol.layer.Tile? Nov 12, 2015 at 11:56
  • Hi @JonatasWalker, in the line which says var curExtent = map.getView().calculateExtent(map.getSize());
    – dvmac01
    Nov 12, 2015 at 12:03

2 Answers 2

2
+50

So the solution I found to this was to add a check for another value on the layer. In this case, the value of 'sub'. This allowed me to perform a check as to whether the layer source had a defined extent. If the extent was found, I looked up the minZoom value, got the centre coordinate of the extent, then set the view to this.

The functionality seemed to break if I checked for the extent property on a non-defined source so the check for the 'sub' property negated this. It's been a long road from locating a quadkey function, working out how to apply this to a custom xyz url, finding out how to transform the projection of the extent then looking up the zoom and setting a new view; not to mention creating a select menu from the layers, but the effort was definitely worth it.

I'm sure my code looks a little ropey to most people and I'll have the opportunity to refine it later but thanks to anyone who helped along the way. @AlvinLindstam, @JonatasWalker and @Pavlos have all helped me to better understand how all of this fits together. For the benefit of anyone looking to do something similar, I'll post the code below and here is a link to the fiddle.

var sub = layers[s].get('sub'); // where layers[s] is the result of a layer search
var extent;
    if (title == selectedValue) {   
        if (sub == undefined) {
           layers[s].setVisible(true);
        }
        if (sub == 'premium') {
                var duration = 2000;
                var start = +new Date();
                var view = map.getView();
                var pan = ol.animation.pan({
                    duration: duration,
                    //easing: eval(ol.easing.inAndOut),
                    source: (view.getCenter()),
                    start: start
                });
                var bounce = ol.animation.bounce({
                    duration: duration,
                    resolution: 4 * view.getResolution(),
                    start: start
                });

                // Add animation to the render pipeline
                map.beforeRender(pan, bounce);

                extent = layers[s].getExtent();
                console.log(extent);
                layerZoom = layers[s].getProperties().minZoom;
                var sourceCentre = ol.extent.getCenter(extent);
                view.setCenter(sourceCentre);
                view.setZoom(layerZoom);
                layers[s].setVisible(true);
            }
1
  • I'm glad you overcame this one. Nov 13, 2015 at 13:51
1

You can check this question it will help you solve the GetExtent problem, and check this question will help you in both layer extent and coordinates projection conversion problems.

1
  • Thanks @Ahmed GIS but my layer is not a vector type it is a tile xyz and when using getSource().getExtent it returns .. is not a function. Also I am able to do coord proj transforms but I don't even know what format the example ([-180, 0, 0, 85]) is using.
    – dvmac01
    Nov 6, 2015 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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