Time for action – rendering a masterpiece

Let's modify our example and add a renderer option to see what happens:

Open the example in your web browser. Right-click on the map and select Inspect Element to open the Web Inspector and see what OpenLayers creates in the web page to display the map.
You should see something like the following screenshot:
The inspector is highlighting the HTML element used to render the map. In this case, that element is the <canvas> element. This element is used for both the WebGL and Canvas renderers. Let's see what happens when we change the renderer.

Edit the example and change the map object constructor to use the DOM renderer, like this:

var map = new ol.Map({
 target: 'map',
 view: view,  
 layers: [layer],
 renderer: 'dom'
});

Save this and load it in your web browser. Right-click on the map and select Inspect Element to open the Web Inspector and see what has changed:

What just happened?

Now, we see a lot of <img> elements. By choosing the DOM renderer, we have asked OpenLayers to use a different way of presenting the map in the browser. OpenLayers now creates a new <img> element for each map tile coming from the remote server and positions it next to the others to create the complete map.

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – rendering a masterpiece

What just happened?

Table of Contents for
OpenLayers 3 : Beginner's Guide