CODEWITHSUNDEEP
openlayers-3
Darko Martic
Darko Martic

Reputation: 219

How to set zoom and center automatically based on GeoJSON features

I load some features from .json file, and would like to automatically set view wuth zoom to see all loaded features. I user OpenLayers version 3. Here's what I have:

var gjsonFile = new ol.layer.Vector({
    source: new ol.source.GeoJSON({
        url: 'map.json',
        projection: 'EPSG:3857'
    })
    })
});

var map = new ol.Map({
    view: new ol.View({
        center: ol.proj.transform([-77.0087,38.8691], 'EPSG:4326', 'EPSG:3857'),
        zoom: 12
    }),
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
        }),
        gjsonFile
    ],
    target: 'map1'
});

Upvotes: 1

Views: 4143

Answers (1)

ahocevar
ahocevar

Reputation: 5648

Vector sources have a #getExtent() method that gives you the extent of all features currently loaded in the source. To set the map's view to that extent as soon as the file is loaded, add the following code:

var source = gjsonFile.getSource();
var onChangeKey = source.on('change', function() {
  if (source.getState() == 'ready') {
    source.unByKey(onChangeKey);
    map.getView().fitExtent(source.getExtent(), map.getSize());
  }
});

Upvotes: 1

Related Questions