Is it possible to filter the ol.layer.Vector with a JSON source and display only specific features?

My vector layer looks like this:

var vectorLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'http://vagrant-test.local.com/json/countries.js'
      style: function(feature) {
        return style;

I check the ol3 documentation and didn't find some filter functionality.

  • 1
    Maybe you can use a custom loader where you can filter the features in the source. See also gis.stackexchange.com/a/223412/8673 – bennos Nov 30 '17 at 9:07
  • what would be the filter condition? – Chase Choi Nov 30 '17 at 12:22
  • To show specific features base on an existing attribute/value. Eg.a date – user1919 Nov 30 '17 at 14:50
  • 1
    The quick and dirty way is to filter them within your style function. Then create a transparent style and according to your condition return transparentStyle or style (you have feature with options within your style function). That means that your features will be loaded but will not be visible. – pavlos Nov 30 '17 at 15:33

You would need to create your own filter. You can do this by getting the JSON via ajax:

var jsonResult;

  dataType: "json",
  url: url,
  data: data,
  success: function(data) {
       jsonResult = data;


Then you will need to delete the elements you do not want from jsonResult, and re-stringify it. You'll need to be somewhat familiar with the structure of the GeoJSON data you're working with, GeoJSON in general so you don't delete something OL needs to parse it, and working with JSON.

Then you can read the remaining elements into features and add them to your source:

var geojsonFormat = new ol.format.GeoJSON();
var features = geojsonFormat.readFeatures(stringifiedFilteredJSON);

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.