Rendering the map

The ol is the OpenLayers package that provides the API to play with the maps overlay.

ol.Maps

The core essential component of the ol package is ol.Maps. It is used to render the maps on the target p, which in our case is map-overlay a p tag from index.html where the map will be shown: 

    // Renders the map on the target p
    var map = new ol.Map({target: "map"})

ol.View

This is used to manage or configure the viewing properties of the map such as zoom level, default center position, and the projection of the map:

    // To configure center, zoom level and projection of the map
    var view = new ol.View({
      zoom: 9
    });

ol.layer

A layer is a visual representation of data from a source. It is used to show the data on the map that is fetched from remote sources.  

It has three basic types of layers:

• ol.layer.Tile: This is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions
• ol.layer.Image: This is for server rendered images
• ol.layer.Vector: This is for vector data that is rendered client-side

Layers are set when configuring the map object:

    layers: [
      new ol.layer.Tile(...)
    ],

ol.source

This is used to set the source of the remote data for the layer: 

    layers: [
      new ol.layer.Tile({source: new ol.source.OSM()})
    ]