[GIS] Display basic geoJSON polygon on OpenLayers map

geojsonopenlayers-2vector

For some reason my basic polygon, which I've verified on geojsonlint.com, won't display correctly on the map. Looks like a projection issue, but I can't determine what I missed. I'll paste the code below, and here is the jsFiddle:

http://jsfiddle.net/kzex47za/

    var geoJSON = {
  'type': 'Feature',
  'properties': {
    'id': 'shape'
  },
  'geometry': {
    'type': 'Polygon',
    'coordinates': [[
      [-95.0144,39.0061],
      [-95.0144,38.9842],
      [-94.9862,38.9842],
      [-94.9862,39.0061],
      [-95.0144,39.0061]
    ]]
  }
 }

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
          source: new ol.source.Vector({
            features: (new ol.format.GeoJSON({
              featureProjection: 'EPSG:3857'
            })).readFeatures(geoJSON)
          }),
          style: new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'rgba(29, 130, 29, 1)',
              width: 2
            }),
            fill: new ol.style.Fill({
              color: 'rgba(0, 255, 0, 0.45)'
            })
          })
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([0,0]),
        zoom: 1,
        projection: 'EPSG:3857'
    })
});

Best Answer

Figured it out--I was putting the projection mapping in the wrong spot. Should be in the readFeatures method, not the ol.format.GeoJSON constructor.

      source: new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(geoJSON, {
            dataProjection: 'EPSG:4326',
          featureProjection: 'EPSG:3857'
        })
      }),
Related Question