inside my webgis application with Ol3 I've to zoom to a single feature.

My problem is that I've a panel at the bottom of my screen over the Map div. So the zoomed features often finished half hidden by this panel. The result is like this:red zoomed feature, hidden by the bottom panel

Obviusly I want to see the whole feature when I zoom. I tried this dirty workaround:

map.getView().fit(feature.getGeometry(), map.getSize());
var geom_centre = map.getView().getCenter(); 
var lon = geom_centre[1] - 50;
var north_centre = [geom_centre[0],lon];
map.getView().setZoom(map.getView().getZoom() - 1);

Essentially I made the "classical" zoom and then I move to north the centre of the view and go back of one zoom level. It doesn't work well because the features have different dimensions and I move them to north of arbitrary length (50) and the smallest features are pushed outside view to north.

How can I zoom to a feature and move it to north without push it outside the view?

  • 1
    Did you try using padding option to fit() method? Adding a padding bottom with the height of your bottom panel should do the trick. – geraldo Jan 8 '19 at 21:24

You need to pass padding array to your map.getView().fit()

var panel = document.getElementById('yourPanelID'); //your panel element
var paddingTop = panel.offsetHeight;
var paddingRight = 0;
var paddingBottom = 0;
var paddingLeft = 0;
var yourFeature;

map.getView().fit(yourFeature.getGeometry(), { padding: [paddingTop, paddingRight, paddingBottom, paddingLeft] });

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.