1

Is it possible to set the style to hidden of certain parts of a layer of the map? The API documentation does not seems to have any property for it?

I tried to add the following:

var locatusObject = new ol.layer.Vector ({
  source: locatusSource,
  maxResolution: 14,
  style: styleFunction
});
function styleFunction(feature,resolution) {
style = [new ol.style.Style({
                stroke: changeStrokeStyle(),
                fill: changeFillStyle(),
                //opacity:0,
                //visible:none
                //visibility:hidden
            })];

return style;
}

None seem to work?

EDIT

Oke, it seems to work when I set the variable "style=null"! But when I click a certain category, my map does not get reloaded?

I use the following code to click and reload my map:

$('#legend ul > li > ul > li').click(function(){
      if($(this).attr('data-hidden')==='false'){console.log('in conditie'); $(this).attr('data-hidden', 'true');$(this).addClass('enabled');} 
      else {$(this).attr('data-hidden', 'false');$(this).removeClass('enabled');}

      $('li').each(function(){
        hiddenArray[$(this).attr('data-name')] = $(this).attr('data-hidden');

      })
      map.renderSync();
    });

The map.renderSync() doesnt seem to do anything to my map?

  • There are a few similar and/or related questions on gis stack exchange here and also here. Hopefully they can shed some light on your situation. – GeoSharp Oct 7 '15 at 13:02
  • Thanks for your suggestion, but because I am using the version 3,9 these examples do not help in my case :( – PIDZB Oct 7 '15 at 13:42
  • But when this should be happen? – Jonatas Walker Oct 7 '15 at 14:10
  • I have a sidebar where you can click on some categories: e.g. clothing shops. – PIDZB Oct 7 '15 at 14:12
  • When you click on a category, a part of a layer has to become visible. Because I can set a different styling per category, I hoped I could also hide a part of the layer based on the category in my sidebar. – PIDZB Oct 7 '15 at 14:13
1

Based on comments the logic would be:

Read the features from GeoJSON and add the features to different ol.layer.Vector based on a property called here category:

// Read from GeoJSON and add to different layer
var features = new ol.format.GeoJSON().readFeatures(geojsonObject, {
    featureProjection: 'EPSG:3857'
});

features.forEach(function(feature) {
    var category = feature.get('category');
    var layer = thisLayerExists(category);
    if(layer) {
        //just add feature
        layer.getSource().addFeature(feature);
    } else {
        //add layer to map
        layer = new ol.layer.Vector({
            name: category,
            source: new ol.source.Vector({
                features: [feature]
            }),
            style: point_style
        });
        map.addLayer(layer);
    }
});

And if you want to show only a layer that match to a given category:

function showCategory(category){
    var layers = map.getLayers();
    layers.forEach(function(layer){
        //discard layers other than ol.layer.Vector
        if(layer instanceof ol.layer.Vector){
            if(layer.get('name') == category){
                layer.setVisible(true);
            } else {
                layer.setVisible(false);
            }        
        }
    });
}

See missing variables and functions on demo fiddle.

  • Is it correct that you can only use the following code for points and not for polygons? "var features = new ol.format.GeoJSON().readFeatures(geojsonObject, { featureProjection: 'EPSG:3857' });" I am getting errors when I try to use it for polygon data? – PIDZB Oct 10 '15 at 12:41
  • You can use for polygons. Maybe the error is because of style (ol.style.Circle). Try to remove the style from layer. – Jonatas Walker Oct 10 '15 at 13:25

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.