Create multiple vector layers with one GeoJSON in OpenLayers

Question

I am a beginner to OpenLayers,and what i'm trying to do is to create multiple vector layers with one GeoJSON in OpenLayers 3. Here is a small part of the GeoJSON file.

{"type": "FeatureCollection",
   "features": [
  {
    "type": "Feature",
    "geometry": {
           "type": "Point",
           "coordinates":  [ 7.07,44.91 ]
        },
    "properties": {
        "Type":"Animals",
        "JS_Date":1470433175,
        }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 5.97,44.78 ]
    },
    "properties": {
    "Type":"Contaminations",
    "JS_Date":1470433145,
    }
  },
……]
}

I read an old topic about that, but i didn't manage to adapt his solution to mine.

What I’m trying to do, is to create two different layers depending on the GeoJSON properties. therefor I want a layer with all features which have as properties type “Animals” and another layer with all features which have as properties type “Contaminations”.

Currently the code I have to display features in one layer is this one:

var GeoJsonDATA=new ol.layer.Vector({           
    source: new ol.source.Vector({
        url: '../Data/Observations.geojson',
        format: new ol.format.GeoJSON()
            }),
    name: ‘UserData’,
});

Answer 1

If you are OK to use QGIS, you can follow these steps :

• Open your file in QGIS;
• Select the entries where Type is "Animals" in the properties;
• Right-click on the layer in the Legend and choose "Save As";
• Save as GeoJSON and check the box that says "Save only selected features".

You don't need to change the CRS.

Repeat the steps with the entries where "Type" = "Contaminations" and you will have your two different GeoJSON files.

Answer 2

If your starting point is a vector layer associated with the entire geojson dataset, the problem is that it will only load the dataset when it gets rendered on a map. This means you will only be able to extract features from it if you do that inside a "change" event of the vector source. This approach could still be useful depending on what exactly you want to do with the different feature types, because in some cases it may not even be necessary to create separate layers for them.

However, assuming that you really want different layers for the different feature types, you can load the geojson manually, iterate through the features and add them to separate layers:

// Here we use a jquery shortcut to fetch the geojson data,
// but you could use any other ajax code to do the same thing
$.getJSON('data.json').done(function(data){

    // Now parse the features with openlayers 
    var fs = (new ol.format.GeoJSON()).readFeatures(data, {
      dataProjection: 'EPSG:4326',
      featureProjection: 'EPSG:3857'
    });

    // Create separate sources to store the features
    var aSrc = new ol.source.Vector();
    var cSrc = new ol.source.Vector();

    // Loop over the features
    fs.forEach(function(f) {

      var props = f.getProperties();

      if (props.Type === 'Animals') {

        aSrc.addFeature(f);

      } else if (props.Type === 'Contaminations') {

        cSrc.addFeature(f);
      }
    });

    // Your separate layers
    var aLayer = new ol.layer.Vector({
      source: aSrc
    });

    var cLayer = new ol.layer.Vector({
      source: cSrc
    });

    // Display map
    var map = new ol.Map({
      layers: [ 
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }), aLayer, cLayer ],
      target: 'map',
      controls: ol.control.defaults({
        attributionOptions: {
          collapsible: false
        }
      }),
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });
});