Using Styles To Limit Vector Tile Visibility

This Section will teach you how to use CSS and SLD styling to control the visibility of each feature in your layer.

Each example will contain both the CSS and SLD style alternatives, all of the examples will use the topp:states layer.

For more styling options and a deeper introduction to styling layers with CSS and SLD see the section about Styling with SLD and CSS.

Note

Styles that are meant for the vector tile output only control which features go into the tiles, and at which scale. Any styling options regarding color, marker type, and size or opacity are ignored when the layer is served as vector tiles.

1. Go to the Styles link at the left-hand menu and add a new style.

   
   

2. Name the new style states-mvt and select the topp workspace, then select your preferred styling format, either SLD or CSS.

   

3. Copy the code for the styling format you chose, the style will hide Rhode Island up until 1:20M, and District of Columbia up until 1:10M.

   CSS:

   /* @title Other states */
   [STATE_ABBR <> 'DC' AND STATE_ABBR <> 'RI'] {
      fill: #000000;
   }
   
   /* @title DC */
   [STATE_ABBR = 'DC'][@sd < 10M] {
      fill: #000000;
   }
   
   /* @title RI */
   [STATE_ABBR = 'RI'][@sd < 20M] {
      fill: #000000;
   }
   

   SLD:

   <?xml version="1.0" encoding="UTF-8"?><sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" version="1.0.0">
   <sld:NamedLayer>
      <sld:Name>Default Styler</sld:Name>
      <sld:UserStyle>
         <sld:Name>Default Styler</sld:Name>
         <sld:FeatureTypeStyle>
         <sld:Rule>
            <sld:Title>DC</sld:Title>
            <ogc:Filter>
               <ogc:PropertyIsEqualTo>
               <ogc:PropertyName>STATE_ABBR</ogc:PropertyName>
               <ogc:Literal>DC</ogc:Literal>
               </ogc:PropertyIsEqualTo>
            </ogc:Filter>
            <sld:MaxScaleDenominator>1.0E7</sld:MaxScaleDenominator>
            <sld:PolygonSymbolizer>
               <sld:Fill>
               <sld:CssParameter name="fill">#000000</sld:CssParameter>
               </sld:Fill>
            </sld:PolygonSymbolizer>
         </sld:Rule>
         <sld:Rule>
            <sld:Title>RI</sld:Title>
            <ogc:Filter>
               <ogc:PropertyIsEqualTo>
               <ogc:PropertyName>STATE_ABBR</ogc:PropertyName>
               <ogc:Literal>RI</ogc:Literal>
               </ogc:PropertyIsEqualTo>
            </ogc:Filter>
            <sld:MaxScaleDenominator>2.0E7</sld:MaxScaleDenominator>
            <sld:PolygonSymbolizer>
               <sld:Fill>
               <sld:CssParameter name="fill">#000000</sld:CssParameter>
               </sld:Fill>
            </sld:PolygonSymbolizer>
         </sld:Rule>
         <sld:Rule>
            <sld:Title>Other states</sld:Title>
            <ogc:Filter>
               <ogc:And>
               <ogc:PropertyIsNotEqualTo>
                  <ogc:PropertyName>STATE_ABBR</ogc:PropertyName>
                  <ogc:Literal>DC</ogc:Literal>
               </ogc:PropertyIsNotEqualTo>
               <ogc:PropertyIsNotEqualTo>
                  <ogc:PropertyName>STATE_ABBR</ogc:PropertyName>
                  <ogc:Literal>RI</ogc:Literal>
               </ogc:PropertyIsNotEqualTo>
               </ogc:And>
            </ogc:Filter>
            <sld:PolygonSymbolizer>
               <sld:Fill>
               <sld:CssParameter name="fill">#000000</sld:CssParameter>
               </sld:Fill>
            </sld:PolygonSymbolizer>
         </sld:Rule>
         <sld:VendorOption name="ruleEvaluation">first</sld:VendorOption>
         </sld:FeatureTypeStyle>
      </sld:UserStyle>
   </sld:NamedLayer>
   </sld:StyledLayerDescriptor>
   

4. Apply the changes to the style.

5. Within the style editing window, navigate to the Publishing tab, and check the box to make the topp:states associated with the style, apply your changes.

   

6. In the Layer Preview page of the states layer you can now see how our new style works, just switch the style to states-mvt.

   

   The states layer with our style at 1:17,000,000

   

   The states layer with our style at 1:4,000,000

7. For confirmation, check that zooming out beyond 1:20,000,000 removes Rhode Island from the map.

8. In the Tile Layers page, find the topp:states layer and from its preview options select EPSG:900913 / pbf. This will open a preview of the layer in vector tiles with a basic style.

   

   Open the preview for the countries vector tiles

9. Change the style to states-mvt. The visualization is wireframe, zooming out it should be possible to notice Rhode Island disappearing from the map:

   

We can now use tiles with this style on the client style, in the next section we’ll learn how to use the tiles in Maputnik to create new styles for your GeoServer layers.