How to Make a Map Using Openlayers 3

This updated guide examines How to Make a Map Using Openlayers 3 and organizes the essential facts, background, and practical takeaways in clear American English.

Part 1

Installing and Setting Up OpenLayers

Open or create your webpage. If you don't already have a webpage you want to insert the map into, you can use the following HTML5 template; save it as 'map_page.html':

My OpenLayers 3 Maptitle>head><body>body>html></pre>
</li>
<li id="step-id-01"><strong>Include OpenLayers.</strong> Your webpage will need to include the OpenLayers library JavaScript file. To do this, paste the following line of code into your HTML file, inside the<code></code>area, on a new line below the<code></code>:
<pre><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.js"type="text/javascript">script></pre>
</li>
<li id="step-id-02"><strong>Add an HTML map container.</strong> OpenLayers will display the map inside an HTML element, so you need to provide one for it. Paste the following line of markup inside the<code></code>:
<pre><divid="map"class="map">div></pre>
</li>
<li id="step-id-03"><strong>Style the map container.</strong> You need to set how large the map will be when it is displayed, and you should use CSS to do this. You can add the following to the document<code></code>:
<pre><style>.map{height:500px;width:700px;}style></pre>
</li>
</ol>
<h2>Part 2</h2>
<h3><span id="Creating-the-Map">Creating the Map</span></h3>
<ol>
<li id="step-id-14"><strong>Create the map object.</strong> To start writing the JavaScript code that sets up the map, you'll need to add a<code></code>area to the<code></code> <strong>after</strong> the map container<code>div</code>. Also inside of this, you can create the map object by calling<code>new ol. Map()</code>like this:
<pre><scripttype='text/javascript'>varmap=newol.Map({});</script></pre>
</li>
<li id="step-id-15"><strong>Set the map's target HTML element.</strong> OpenLayers will render (display) the map inside an HTML element such as a<code>div</code>or a<code>p</code>. The value that you must pass to the setTarget() function is simply<code>id</code>of the element, which we set to 'map':
<pre>map.setTarget('map');</pre>
</li>
<li id="step-id-16"><strong>Set the map's view.</strong> An OpenLayers map's view is what manages what part of of the map you see. Create a new view object that centers on the coordinates [0, 0] (off the coast of central Africa): <strong>Note:</strong> Unlike the Leaflet mapping library, OpenLayers 3 deals with coordinates in the format [longitude, latitude].
<pre>varview=newol.View({center:[0,0],zoom:1})map.setView(view);</pre>
</li>
<li id="step-id-17"><strong>Add a tile layer.</strong> OpenLayers maps have layers which are stacked on top of one another, and are what you actually see in a map. There are three types of layers: Image, Tile and Vector. Tile layers are are the standard 'base' layers, and can come from map providers like Google Maps, MapQuest, or OpenStreetMaps. Each layer has a source, which tells OpenLayers where the layer information is coming from.
<pre>vartile_layer=newol.layer.Tile({source:newol.source.OSM({layer:'osm'})})map.addLayer(tile_layer);</pre>
</li>
<li id="step-id-18"><strong>Set the zoom level.</strong> In OpenLayers, maps can be 'zoomed in' to one of several levels, from 0 (the most zoomed-out) to around 20 (the most zoomed in). The zoom level is set on the view object, so we have to get that and set its zoom:
<pre>map.getView().setZoom(2);</pre>
</li>
<li id="step-id-19"><strong>Check your code.</strong> Below is what your webpage code should look like:
<pre><!doctypehtml><htmllang="en"><head><metacharset="utf-8"><title>MyOpenLayers3Map