/ Openlayers 4

Openlayers 4 Tutorial

Openlayers is a JavaScript library that makes it easy to build your dynamic map in any web page.

Before reading:

you should have the knowledge of the relevant JavaScript language

Related resources:


A map consists of several parts in Openlayers:

  • source
  • layer
  • view
  • controls

the following is a simple map's code from official website of Openlayers:

<div id="map" class="map"></div>
<script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4

before use the above code, you must include Openlayers JavaScript library and its CSS library:

<link rel="stylesheet" href="https://openlayers.org/en/v4.3.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.3.1/build/ol.js" type="text/javascript"></script>