How exactly is used the layer concept in OpenLayer 3?

Question

I am pretty new in JavaScript and I am evaluating to use OpenLayer 3 into a project.

I am studying some tutorial about this library and I have the following doubt about the layer concept.

So, from what I have understand (correct me if I am doing wrong assertion) to render a simple "Hello World" map example I can have something like this:

var view = new ol.View2d({
    center: [0,0],
    zoom: 0
});

var map = new ol.Map({
    target: map,        // map is the id of the element in the DOM where the map will be putted
    layers: [layer],
    view: view          // Use the previous defined view object for the settings of this map
});

I have not yet test this example on my PC, I have take it from this videotutorial: https://www.youtube.com/watch?v=SPPhpLTkWX8

So it seems that there is a separation of the map and the **view* where

Map: is the primary object with which the user interacts (click on, drag and drop, draw, do operations).
View: contains the settings related to how the Map is rendered (in this case it is a bidimensional map where it is specified where the map is centered when it is displayed and the zoom).

So from what I have understand there is this separation of concern because I can have a single Map that can be displayed in different way using differents View objects.

Is it this reasoning correct or am I missing something?

And not the first big doubt: in the tutorial show that the previous code display a map into the browser. Ok, but from where is take this map? Is it a GoogleMap map or what? This is pretty obscure for me...

Then the tutorial go on and show the layer concept.

So it show this code that create an Open Street Map layer (https://www.openstreetmap.org):

var osm = new ol.layer.Tile({
    source: new ol.source.OSM();
});

and then I think that to use this layer I have to add it as element to the previous layers: [layer] array defined into the map object. Is it correct?

Now the thing that I have not so clear in my mind is.

What is a layer? Is it something like additional information added on a specific map or is it a special kind of Map (for example Google Maps or some other kind of map obtained from some other map provider).

I think that it is the first one (some data showed as a layer on the map, infact on the map object I have a layers array as field in which I think I cann add more then one layer to show differents information on this map).

But I have this doubt because I can't understand who is the map provider in OpenLayer (Google Maps or what?) and if I can also speciy a specific Map Provider.

This doubt is also generated because I have see that using OpenLayer I can use Bing Map as layer but from what I know Bing Map is a map provider alternative to Google Maps.

var bing= new ol.layer.Tile({
    source: new ol.source.BingMaps({
        key: API KEY,
        style: setted style
    })
});

So how exactly works?

tsauerwein tsauerwein · Accepted Answer · 2016-01-16T11:04:43

That are a lot of questions at once, let me try to answer some:

So from what I have understand there is this separation of concern because I can have a single Map that can be displayed in different way using differents View objects.

Is it this reasoning correct or am I missing something?

Actually it is the other way round. Different maps can share the same view. Here is an example: http://openlayers.org/en/master/examples/side-by-side.html

Ok, but from where is take this map? Is it a GoogleMap map or what? This is pretty obscure for me... ... What is a layer?

A map is a collection of layers. And a layer is a visual representation of a geographical dataset/datasource (e.g. vector features, raster tiles and images). For example:

var osm = new ol.layer.Tile({
    source: new ol.source.OSM();
});

This defines a tile layer which use OpenStreetMap tile images as the source. If you replace the source with ol.source.BingMaps, your layer will use tile images from Bing.

But I have this doubt because I can't understand who is the map provider in OpenLayer (Google Maps or what?) and if I can also speciy a specific Map Provider.

This doubt is also generated because I have see that using OpenLayer I can use Bing Map as layer but from what I know Bing Map is a map provider alternative to Google Maps.

OpenLayers is a library to create interactive maps. OpenLayers is not a data provider, but it allows to use data from different providers, e.g. the tiles from OpenStreetMap or Bing.

Google has a JavaScript library, the Google Maps JavaScript API, but Google is also a data provider of their street map and satellite imagery tiles.

I hope this makes it a bit clearer. I recommend you to take a look at the OpenLayers 3 Workshop and at mapschool.io and/or Learning Lunches: How to Make a Map to better understand the basics.

How exactly is used the layer concept in OpenLayer 3?

1 Answers