Skip to main content
replaced http://gis.stackexchange.com/ with https://gis.stackexchange.com/
Source Link

Create the vector layer:

var vector = new ol.layer.Vector({
   source: new ol.source.KML({
       projection: 'EPSG:3857',
       url: 'http://path/to/your/data.kml'
   })
});

Add it to the OpenLayer 3 map:

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }), vector
    ],
    view: view
});

And then wait until the layer is ready to access its second feature's coordinates and use them to center the view (borrowed from Using layer loadstart & loadend events in OpenLayers 3?Using layer loadstart & loadend events in OpenLayers 3?):

var listenerKey = vector.getSource().on('change', function(e) {
    if (vector.getSource().getState() == 'ready') {
        view.setCenter(vector.getSource().getFeatures()[1].getGeometry().getCoordinates());
        view.setZoom(5);
        vector.getSource().unByKey(listenerKey); // Disconnect
    }
});

I've created this JSFiddle for reference.

Create the vector layer:

var vector = new ol.layer.Vector({
   source: new ol.source.KML({
       projection: 'EPSG:3857',
       url: 'http://path/to/your/data.kml'
   })
});

Add it to the OpenLayer 3 map:

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }), vector
    ],
    view: view
});

And then wait until the layer is ready to access its second feature's coordinates and use them to center the view (borrowed from Using layer loadstart & loadend events in OpenLayers 3?):

var listenerKey = vector.getSource().on('change', function(e) {
    if (vector.getSource().getState() == 'ready') {
        view.setCenter(vector.getSource().getFeatures()[1].getGeometry().getCoordinates());
        view.setZoom(5);
        vector.getSource().unByKey(listenerKey); // Disconnect
    }
});

I've created this JSFiddle for reference.

Create the vector layer:

var vector = new ol.layer.Vector({
   source: new ol.source.KML({
       projection: 'EPSG:3857',
       url: 'http://path/to/your/data.kml'
   })
});

Add it to the OpenLayer 3 map:

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }), vector
    ],
    view: view
});

And then wait until the layer is ready to access its second feature's coordinates and use them to center the view (borrowed from Using layer loadstart & loadend events in OpenLayers 3?):

var listenerKey = vector.getSource().on('change', function(e) {
    if (vector.getSource().getState() == 'ready') {
        view.setCenter(vector.getSource().getFeatures()[1].getGeometry().getCoordinates());
        view.setZoom(5);
        vector.getSource().unByKey(listenerKey); // Disconnect
    }
});

I've created this JSFiddle for reference.

added 146 characters in body
Source Link
Germán Carrillo
  • 37k
  • 5
  • 125
  • 180

Create the vector layer:

var vector = new ol.layer.Vector({
   source: new ol.source.KML({
       projection: 'EPSG:3857',
       url: 'http://path/to/your/data.kml'
   })
});

Add it to the OpenLayer 3 map:

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }), vector
    ],
    view: view
});

And then wait until the layer is ready to access its second feature's coordinates and use them to center the view (borrowed from Using layer loadstart & loadend events in OpenLayers 3?):

var listenerKey = vector.getSource().on('change', function(e) {
    if (vector.getSource().getState() == 'ready') {
        view.setCenter(vector.getSource().getFeatures()[1].getGeometry().getCoordinates());
        view.setZoom(5);
        vector.getSource().unByKey(listenerKey); // Disconnect
    }
});

I've created this JSFiddle for reference.

Create the vector layer:

var vector = new ol.layer.Vector({
   source: new ol.source.KML({
       projection: 'EPSG:3857',
       url: 'http://path/to/your/data.kml'
   })
});

Add it to the OpenLayer 3 map:

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }), vector
    ],
    view: view
});

And then wait until the layer is ready to access its second feature's coordinates to center the view:

var listenerKey = vector.getSource().on('change', function(e) {
    if (vector.getSource().getState() == 'ready') {
        view.setCenter(vector.getSource().getFeatures()[1].getGeometry().getCoordinates());
        view.setZoom(5);
        vector.getSource().unByKey(listenerKey); // Disconnect
    }
});

I've created this JSFiddle for reference.

Create the vector layer:

var vector = new ol.layer.Vector({
   source: new ol.source.KML({
       projection: 'EPSG:3857',
       url: 'http://path/to/your/data.kml'
   })
});

Add it to the OpenLayer 3 map:

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }), vector
    ],
    view: view
});

And then wait until the layer is ready to access its second feature's coordinates and use them to center the view (borrowed from Using layer loadstart & loadend events in OpenLayers 3?):

var listenerKey = vector.getSource().on('change', function(e) {
    if (vector.getSource().getState() == 'ready') {
        view.setCenter(vector.getSource().getFeatures()[1].getGeometry().getCoordinates());
        view.setZoom(5);
        vector.getSource().unByKey(listenerKey); // Disconnect
    }
});

I've created this JSFiddle for reference.

Source Link
Germán Carrillo
  • 37k
  • 5
  • 125
  • 180

Create the vector layer:

var vector = new ol.layer.Vector({
   source: new ol.source.KML({
       projection: 'EPSG:3857',
       url: 'http://path/to/your/data.kml'
   })
});

Add it to the OpenLayer 3 map:

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }), vector
    ],
    view: view
});

And then wait until the layer is ready to access its second feature's coordinates to center the view:

var listenerKey = vector.getSource().on('change', function(e) {
    if (vector.getSource().getState() == 'ready') {
        view.setCenter(vector.getSource().getFeatures()[1].getGeometry().getCoordinates());
        view.setZoom(5);
        vector.getSource().unByKey(listenerKey); // Disconnect
    }
});

I've created this JSFiddle for reference.