Search code examples
javascriptopenlayers

VectorLayer not showing with OpenLayers

I'm basically trying to reproduce the center example in my own JsFiddle

const geoJSON = {};

const features = new ol.format.GeoJSON().readFeatures(geoJSON);
const vectorSource = new ol.source.Vector({
  features: features,
});
const style = new ol.style.Style({});
const vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: style,
});

let olView = new ol.View({
  center: ol.proj.fromLonLat([6.6339863, 46.5193823]),
  zoom: 4,
});

let olLayers = [
  new ol.layer.Tile({
    source: new ol.source.OSM(),
  }),
  vectorLayer
];

new ol.Map({
  layers: olLayers,
  view: olView,
  target: 'app',
});

I must be missing somethig obvious, as the vector layer isn't showing in my fiddle.

Solution

  • If you pan down you will see the vector for Switzerland is in the wrong place

    enter image description here

    If using readFeatures you need to specify the feature projection so the geojson Lon/Lat coordinates are transformed to view projection

    const features = new ol.format.GeoJSON().readFeatures(geoJSON, {featureProjection: olView.getProjection()});

    https://jsfiddle.net/apowe4gj/