Basic Concepts

Map

The core component of OpenLayers is the map (Map). It is rendered to a target container (e.g. a div element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. setTarget().

<div id="map" style="width: 100%, height: 400px"></div>
<script>
  import Map from 'ol/Map';

  var map = new Map({target: 'map'});
</script>

View

Map is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a View instance.

  import View from 'ol/View';

  map.setView(new View({
    center: [0, 0],
    zoom: 2
  }));

A View also has a projection. The projection determines the coordinate system of the center and the units for map resolution calculations. If not specified (like in the above snippet), the default projection is Spherical Mercator (EPSG:3857), with meters as map units.

The zoom option is a convenient way to specify the map resolution. The available zoom levels are determined by maxZoom (default: 28), zoomFactor (default: 2) and maxResolution (default is calculated in such a way that the projection's validity extent fits in a 256x256 pixel tile). Starting at zoom level 0 with a resolution of maxResolution units per pixel, subsequent zoom levels are calculated by dividing the previous zoom level's resolution by zoomFactor, until zoom level maxZoom is reached.

Source

To get remote data for a layer, OpenLayers uses source/Source subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML.

  import OSM from 'ol/source/OSM';

  var osmSource = OSM();

Layer

A layer is a visual representation of data from a source. OpenLayers has four basic types of layers: layer/Tile, layer/Image, layer/Vector and layer/VectorTile.

layer/Tile is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions.

layer/Image is for server rendered images that are available for arbitrary extents and resolutions.

layer/Vector is for vector data that is rendered client-side.

layer/VectorTile is for tiled vector data that is rendered client-side.

  import TileLayer from 'ol/layer/Tile';

  var osmLayer = new TileLayer({source: osmSource});
  map.addLayer(osmLayer);

Putting it all together

The above snippets can be conflated to a self contained map configuration with view and layers:

<div id="map" style="width: 100%, height: 400px"></div>
<script>
  import Map from 'ol/Map';
  import View from 'ol/View';
  import OSM from 'ol/source/OSM';
  import TileLayer from 'ol/source/Tile';

  new Map({
    layers: [
      new TileLayer({source: new ol.source.OSM()})
    ],
    view: new View({
      center: [0, 0],
      zoom: 2
    }),
    target: 'map'
  });
</script>