O'Reilly logo

OpenLayers 3 : Beginner's Guide by Erik Hazzard, Paul Spencer, Thomas Gratier

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required