Time for action – basic styling

We'll start with an example that shows off most of the basic style properties. We'll start with a new HTML page setup the same way we usually start off.

Make a copy of our sandbox template and add the standard setup for a map to the main <script> tag:

var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
  center: center,
  zoom: 1
});
var map = new ol.Map({
  target: 'map',
  view: view
});

In this example, we'll be purely using vector layers. No need for rasters here! Go ahead and create a vector layer for countries, then add it to the map:

var countries = new ol.layer.Vector({
  source: new ol.source.GeoJSON({
    projection: 'EPSG:3857',
    url: '../assets/data/countries.geojson'
  })
});
var map = new ol.Map({
  target: 'map',
  layers: [countries],
  view: view
});

Load the HTML file to your browser to see the basic styling that OpenLayers provides:

Make it a bit more interesting by adding another vector layer, time zones. Don't forget to add it to the map's layers property:

var timezones = new ol.layer.Vector({
  source: new ol.source.KML({
    projection: 'EPSG:3857',
    url: '../assets/data/timezones.kml'
  })
});

Now, the map looks like the following. The time zone KML file is drawn in different colors because KML files often contain style information for each feature.

We'd like to have more control over the appearance of our map; so, let's create some rules for styling. First, create two style objects—one for each layer:

var countryStyle = new ol.style.Style({
  fill: new ol.style.Fill({
    color: [203, 194, 185, 1]
  }),
  stroke: new ol.style.Stroke({
    color: [177, 163, 148, 0.5],
    width: 2
  })
});
var timezoneStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: [64, 200, 200, 0.5],
  }),
  text: new ol.style.Text({
    font: '20px Verdana',
    text: 'TZ',
    fill: new ol.style.Fill({
      color: [64, 64, 64, 0.75]
    })
  })
});

Don't forget to add a style property to each of the vector layers so they know which style to use. Also, we'll need to tell the KML source not to extract the default feature styles stored in the KML document:

var countries = new ol.layer.Vector({
  source: new ol.source.GeoJSON({
    projection: 'EPSG:3857',
    url: '../assets/data/countries.geojson'
  }),
  style: countryStyle
});
var timezones = new ol.layer.Vector({
  source: new ol.source.KML({
    projection: 'EPSG:3857',
    url: '../assets/data/timezones.kml',
    extractStyles: false
  }),
  style: timezoneStyle
});

Take a look at the result. Not arguably better, perhaps, but we now have full control!

What just happened?

With this example, we are illustrating some of the basic styling capabilities of OpenLayers. We combined two static vector sources—countries and time zones—and some simple styles to create our map.

Step 1 set up the same structure we've been using for all our examples. In step 2, we added the country data using a static GeoJSON source and added it to the map with the default styling. Next, we added the time zone data in step 4 and developed some basic styles for the two layers in step 6. The country data is composed of polygons, so we created a fill style and a stroke style for styling the country layer. The time zone data also contains polygons, but we want to see the countries underneath so we created a separate style with just the stroke and text properties for it.

The text property in this example is somewhat contrived to keep things simple. Showing the same text string for each time zone is not what we'd really want to do. Ideally, we'd display information specific to each time zone—perhaps, the name or number of hours from Greenwich Mean Time. We'll cover how to do this a bit later in the chapter though. The last thing is to assign our custom styles to the appropriate vector layer and turn off the automatic extraction of styles from the KML layer, which happened in step 7.

Now that we've reviewed how basic styles work, let's take a closer look at the style object and the properties we can assign to it. Along the way, we'll illustrate each with a specific example.

Previous Chapter

6. Styling Vector Layers

Next Chapter

The style class

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – basic styling

What just happened?

Table of Contents for
OpenLayers 3 : Beginner's Guide