0

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'
    })
});
  • Well the coordinates of your polygon appear to be in decimal degrees, and EPSG:3857 uses metres as its unit, so it appears your are missing a reprojection. – nmtoken Sep 8 '16 at 7:39
  • It was my understanding (from the geoJSON data provider) that geoJSON only supported 4326, so I did so more reading, and I found out my problem! You are correct, and I provided the options to convert it to 3857, but I put the projection options in the wrong spot! (the ol.format.GeoJSON constructor vs the readFeatures method. I'll detail in my answer below. – Jared Holmberg Sep 8 '16 at 11:40
1

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'
        })
      }),

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.