1

I'm trying to add a new GeoJSON layer to OpenLayers 3 that I have to fetch via AJAX. I want the user to click on a list of layers, have it add an empty vector layer, and then make an AJAX call and load the features into the layer. This is the function that's called when the user clicks on the layer:

function () {

    var styles = {
      'Point': [new ol.style.Style({
        image: new ol.style.Circle({
          radius: 10,
          fill: null,
          stroke: new ol.style.Stroke({
            color: 'magenta'
          }),
          cursor: "pointer"
        })
      })],
      'LineString': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'green',
          width: 1
        })
      })],
      'MultiLineString': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'green',
          width: 1
        })
      })],
      'MultiPoint': [new ol.style.Style({
        image: new ol.style.Circle({
          radius: 10,
          fill: null,
          stroke: new ol.style.Stroke({
            color: 'magenta'
          })
        })
      })],
      'MultiPolygon': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'yellow',
          width: 1
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 0, 0.1)'
        })
      })],
      'Polygon': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'blue',
          lineDash: [4],
          width: 3
        }),
        fill: new ol.style.Fill({
          color: 'rgba(0, 0, 255, 0.1)'
        })
      })],
      'GeometryCollection': [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'magenta',
          width: 2
        }),
        fill: new ol.style.Fill({
          color: 'magenta'
        }),
        image: new ol.style.Circle({
          radius: 10,
          fill: null,
          stroke: new ol.style.Stroke({
            color: 'magenta'
          })
        })
      })],
      'Circle': [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)'
        })
      })]
    };

    var styleFunction = function(feature, resolution) {
      return styles[feature.getGeometry().getType()];
    };

    var layer = new ol.layer.Vector({
        source : new ol.source.GeoJSON({
            defaultProjection: "EPSG:4326",
            projection: "EPSG:3857"
        })
    });

    $.getJSON(global_config.services.getLayers + "?lname=fences", function (layerJSON) {

        if(layerJSON.features.length > 0)
        {
            var features = new ol.format.GeoJSON({
                dataProjection: "EPSG:4326",
                featureProjection: "EPSG:3857"
            }).readFeatures(layerJSON);


            layer.getSource().addFeatures(features);

            layer.setStyle(styleFunction);
        }
    });

    return layer;

}

The GeoJSON is in EPSG:4326 and the map is in EPSG:3857. The features are loading just fine into the layer, but they're not displaying and I can't figure out why. I'm thinking it has to do with the projection - though I have the proper projections set on all the features as well as the GeoJSON source layer. I've also tried having the default projection on the GeoJSON source layer set to EPSG:3857, because the features should be read in in that projection:

        var layer = new ol.layer.Vector({
            source : new ol.source.GeoJSON({
                defaultProjection: "EPSG:3857"
            })
        });

But still nothing is appearing.

  • ol.source.GeoJSON is not supported in ol 3.5.0, so make sure you are not using the last version – geogeek May 10 '15 at 22:18
1

Not sure why, changing the ajax function to re-create the source instead of adding features to the source worked:

        $.getJSON(global_config.services.getLayers + "?lname=fences", function (layerJSON) {

            if(layerJSON.features.length > 0)
            {
                var layerSource = new ol.source.GeoJSON({
                        style: styleFunction,
                        defaultProjection: 'EPSG:4326',
                        projection: "EPSG:3857",
                        object: layerJSON
                });

                layer.setSource(layerSource);
            }
        });

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.