Styling a VectorTile layer

Styling a vector tile layer works exactly the same way as styling a vector layer. We will now try to style our world map so it actually looks like a world map is supposed to look.

Load fonts

Let's say we want to use a nicer font for labels in our map. I decided to use the Open Sans font family, which can easily be loaded with an additional stylesheet in the <head> of our index.html:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Set a map background

A common style element in vector tile maps is a background color, which the user sees in places that are not covered by any geometries. Like we already saw in the vector exercise, this can be done by simply setting a background color in a <style> for the #map-container:

background-color: rgb(248, 244, 240);

Style the layer with a style function

Now we are going to add some application code to main.js.

First, we'll need imports for the styles we are going to use:

import Style from 'ol/style/style';
import Fill from 'ol/style/fill';
import Stroke from 'ol/style/stroke';
import Circle from 'ol/style/circle';
import Text from 'ol/style/text';

The style function is a bit long:

layer.setStyle(function(feature, resolution) {
  var properties = feature.getProperties();

  // Water polygons
  if (properties.layer == 'water') {
    return new Style({
      fill: new Fill({
        color: 'rgba(0, 0, 255, 0.7)'
      })
    });
  }

  // Boundary lines
  if (properties.layer == 'boundary' && properties.admin_level == 2) {
    return new Style({
      stroke: new Stroke({
        color: 'gray'
      })
    });
  }

  // Continent labels
  if (properties.layer == 'place' && properties.class == 'continent') {
    return new Style({
      text: new Text({
        text: properties.name,
        font: 'bold 16px Open Sans',
        fill: new Fill({
          color: 'black'
        }),
        stroke: new Stroke({
          color: 'white'
        })
      })
    });
  }

  // Country labels
  if (properties.layer == 'place' && properties.class == 'country' &&
      resolution < map.getView().getResolutionForZoom(5)) {
    return new Style({
      text: new Text({
        text: properties.name,
        font: 'normal 13px Open Sans',
        fill: new Fill({
          color: 'black'
        }),
        stroke: new Stroke({
          color: 'white'
        })
      })
    });
  }

  // Capital icons and labels
  if (properties.layer == 'place' && properties.capital) {
    var point = new Style({
      image: new Circle({
        radius: 5,
        fill: new Fill({
          color: 'black'
        }),
        stroke: new Stroke({
          color: 'gray'
        })
      })
    });
    if (resolution < map.getView().getResolutionForZoom(6)) {
      point.setText(new Text({
        text: properties.name,
        font: 'italic 12px Open Sans',
        offsetY: -12,
        fill: new Fill({
          color: '#013'
        }),
        stroke: new Stroke({
          color: 'white'
        })
      }));
    }
    return point;
  }

  //return Style.defaultFunction(feature, resolution);
});

I think you will agree that we have not reached our goal of creating a beautiful world map:

An ugly world map
An ugly world map

There is much more effort involved in styling a world map appropriately, and writing a style function in JavaScript is probably not the right tool. In the next exercise, we will learn a different way of loading and styling vector tile layers.

results matching ""

    No results matching ""