CODEWITHSUNDEEP
geojsonopenlayers-3
Saurbaum
Saurbaum

Reputation: 442

GeoJSON data not displayed on a vector layer

I'm trying to display a vector layer to show a set of geojson features.

When I try and add the layer though I get an error in the ol.js library "k.xd is not a function"

var geoData = {"type":"FeatureCollection",
    "features":
    [
    {"type":"Feature","properties":{"Name":"","Description":""},"geometry":{"type":"Point","coordinates":[0.0,0.0]}},
    {"type":"Feature","properties":{"Name":"1","Description":""},"geometry":{"type":"Point","coordinates":[11.50728,3.87471,0.0]}},
    ]
};

// vector layer
var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(geoData)
    }),
    style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.2)'
          })
        })
    });

I've hacked together an example here http://jsfiddle.net/dxt95yt6/1/ that shows it not working but I can't figure out where this differs from the original tutorials.

Upvotes: 0

Views: 1761

Answers (2)

user1702401
user1702401

Reputation: 1658

Given style object is not correct for points and therefore features just don't show up. Try:

style: new ol.style.Style({
    image: new ol.style.Circle({
        radius: 8,
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
        }),
        fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.2)'
        })
    })
})

Please note, in original code, there's another problem, too. Coordinates have to be transformed to EPSG:3857:

features: (new ol.format.GeoJSON()).readFeatures(
    geoData,
    {featureProjection: ol.proj.get('EPSG:3857')}
)

http://jsfiddle.net/zqx6644q/8/

Upvotes: 1

foedchr
foedchr

Reputation: 123

Its always helpful to validate your geojson before using it. I can recommend geojsonlint which has alos an api to make sure your using a correct geojson.

Upvotes: 0

Related Questions