1

Please take a look at code: https://plnkr.co/edit/wF8VZnnLtRLHPkfrKGu5?p=preview (OpenLayers v.3.8.2)

I would like to retrieve GeoJSON property "zoom". I guess it would be something like this but dont know where to put it in a code:

var zoom = function(feature){ var zoomGeojson = feature.get("zoom"); console.log(zoomGeojson); }

And then I would like to compare zoom level of the map to the GeoJSON property "zoom". If they would match, I would like to visualize only that geojson data. (for example: mapzoomlevel = 5, if mapzoomlevel = geojsonpropertyzoom visualize only data from geojson that contains property "zoom"=5)

Edit

Based on @Hicham Zouarhi answer.

I ran into two problems.

1.Code below throws me an error:

var tmpLayer= new ol.layer.Vector(); map.addLayer(tmpLayer); source.forEachFeature(function(feature){ var mapzoom = map.getView().getZoom(); var geojsonzoom = feature.get("zoom"); console.log('MapZoom ' + mapzoom); console.log('GeoJSONZoom ' + geojsonzoom); if(geojsonzoom == mapzoom){ console.log('GeoJSON zoom property and map zoom are equal!'); tmpLayer.getSource().addFeatures(feature); // error: Uncaught TypeError: Cannot read property 'addFeatures' of null(…) } else { console.log('Not equal!'); } });
  1. Without that error it runs smoothly in a console, however it does not run in my code at all. I guess I am missing something or the order is not right.

I have reorganized code by breaking it into a smaller pieces: https://plnkr.co/edit/DeaVFGBK11jKCT3yHAVd

Improve this question

1 Answer 1

Reset to default
2

Here is what I propose ( I still think there may be a cleaner way to do it, so if you find any please share ):

  1. loop through all the features of you GeoJSON data
  2. get the features that do have the zoom value equal to yourMap.getView().getZoom()
  3. add the features to a temporary vector layer and display it while setting the original one visibility to false.

the code to do this should look like this :

var tmpLayer= new ol.layer.Vector({ source: new ol.source.Vector()}); yourMap.addLayer(tmpLayer); //----- this goes before // this loop goes inside moveend event tmplLayergetSource()clear(); // we clear the source to avoid duplicates yourSource.forEachFeature(function(feature){ if(feature.get("zoom")==yourMap.getView().getZoom()){ tmpLayer.getSource().addFeature(feature); } }); if(tmpLayer.getSource().getFeatures().length>0){ tmpLayer.setVisible(true); yourVectorLayer.setVisible(false); }

the loop through the vector source features should be inside the map.on('moveend',...); this way it will listen to any change on the zoom level of the map

Improve this answer
6
  • Hi! I appriciate you answer! Thought I would be doing something like that, but as I am a beginner in OL3, as well in a JS, I ran into some problems. Please take a look at EDIT part I ve provided in the main question. Commented Sep 1, 2016 at 20:10
  • @vayacondios2015 I've edited the answer, added a source to the temporary layer Commented Sep 1, 2016 at 20:15
  • Thanks! Wouldnt thought that would be it in a million of years. It doesnt throw me an error now if I run code over a console and it creates vector file (which I still need to check). However, it does not write any kind of outcome to console and it doesnt create new vector layer if I write code in a script. Where do I need to place code in a script? Commented Sep 1, 2016 at 21:10
  • @vayacondios2015 the code should go inside map.on('moveend', ...); I tried it in your plunker and it worked. sorry for the delay of the reply Commented Sep 2, 2016 at 8:11
  • 1
    thank you for helping me out! I really appriciate it! it wasnt working in the beginning because I had to change tmpLayer.getSource().length>0 to tmpLayer.getSource().getFeatures().length>0, but as far I can see, its working properly now! I have edited your code above and accepted it as agood answer! thanks again! Commented Sep 2, 2016 at 20:20

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.