0

I want to display roads(linestring) on the map using OpenLayers.currently, I manage to assign styling based on road type but when I run the server I can see all the data displayed. I want to change the way it displays feature. for e.g.

  • CATA roads(orange color) should display above zoom level 12,
  • CATB roads(yellow color) should display above zoom level 14 but at the same time, it should also display CATA roads.
  • Other roads should display above 16 but it should also show CATA and CATB roads along with it.

In the current code I am creating a function to find the road category and assigning style to each category.

I tried to incorporate zoom level and minZoom in my code but I am not able to make it work. It doesn't change anything the way it displays.

enter image description here

code:

var styleRoadFunction = function(feature,resolution) {
      var zoom = map.getView().getResolution();
      var road_categ = feature.get("road_categ");
      //var zoom = map.getView().getZoomForResolution();
      console.log(feature);

        var color;           
        var style;
        var text;
        var minZoom;
        
        //if (zoom >=12){
        if (road_categ == 'CATA' && zoom>=11.9999 ){   
             
          style = [
            //for outer color
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#F6B25C',
              width: 10,
              lineCap: 'butt',
              lineJoin:'round',
              zIndex:1,
              //minZoom: 12,
            })
          }),
          //for inner color
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#F6B35C',
              width: 7,
              lineCap: 'butt',
              lineJoin:'round',
              zIndex:1,
              //minZoom: 11.9999,
            })
          }),         
        ]
       }               
        else if (road_categ == 'CATB' && zoom>=13.9999){
          
          style = [
              //for outer color
            new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: '#DED5B5',
                width: 9,
                lineCap: 'butt',
                lineJoin:'round',
                zIndex:1,
                //minZoom: 12.9999,
              })
            }),
            //for inner color
            new ol.style.Style({
              stroke: new ol.style.Stroke({
                color: '#F9E7A1',
                width: 7,
                lineCap: 'butt',
                lineJoin:'round',
                zIndex:1,
                //minZoom: 12.9999,
              })
            }),           
          ]
        }
        else         
          style = [
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#c4c2be',
              width: 7,
              lineCap: 'butt',
              lineJoin:'round',
              zIndex:0,              
            })
          }),
          new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#ffffff',
              width: 5,
              lineCap: 'butt',
              lineJoin:'round',
              zIndex:0,             
              
            })
          }),
                 
          return style;  
         };
  var vectorLayer6 = new ol.layer.VectorTile({
            source: new ol.source.VectorTile({
        
            format: new ol.format.MVT(),
            url: 'http://localhost:8081/tiles/roads/{z}/{x}/{y}.mvt'
        }),
        
        style:styleRoadFunction 
       })
  • If you want to style features depending on zoom, your initial attempt (now commented out) was in the right direction, you just need to supply resolution parameter: var zoom = map.getView().getZoomForResolution(resolution);. – TomazicM Jul 2 at 14:40
  • yes, after passing the resolution parameter it works. Thanks, TomazicM – poonam patel Jul 6 at 1:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.