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.

  1. 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
  2. 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 ...

Get OpenLayers 3 : Beginner's Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.