openlayers-3 Getting started with openlayers-3

30% OFF - 9th Anniversary discount on Entity Framework Extensions until December 15 with code: ZZZANNIVERSARY9


This section provides an overview of what openlayers-3 is, and why a developer might want to use it.

It should also mention any large subjects within openlayers-3, and link out to the related topics. Since the Documentation for openlayers-3 is new, you may need to create initial versions of those related topics.

Example using Bing Maps

var baseLayer = new ol.layer.Tile({
    visible: true,
    preload: Infinity,
    source: new ol.source.BingMaps({
        // We need a key to get the layer from the provider. 
        // Sign in with Bing Maps and you will get your key (for free)
        key: 'Ap9VqFbJYRNkatdxt3KyzfJxXN_9GlfABRyX3k_JsQTkMQLfK_-AzDyJHI5nojyP',
        imagerySet: 'Aerial', // or 'Road', 'AerialWithLabels', etc.
        // use maxZoom 19 to see stretched tiles instead of the Bing Maps
        // "no photos at this zoom level" tiles
        maxZoom: 19

var map = new ol.Map({ 
    layers: [baseLayer],
    target: 'map', 
    controls: ol.control.defaults({ 
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
    view: new ol.View({ 
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 2 

Getting started with a simple map

    <title>Getting started</title>
    <link rel="stylesheet" href="" type="text/css">
    <script src=""></script>
    <div id="map" class="map"></div>
      var baseLayer= new ol.layer.Tile({ //a Tile layer is a the background layer for the map
        // here we choose an OpenStreetMap base layer
        source: new ol.source.OSM({
          url: '{z}/{x}/{y}.png'

      var map = new ol.Map({ // we create our map
        layers: [baseLayer], // and add the layers to it ( in our case we only have one)
        target: 'map', // the div element that will serve as a map
        controls: ol.control.defaults({ // we leave the map controls to default
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
        view: new ol.View({ // we define the initial view of the map
          center: ol.proj.fromLonLat([0, 0]), //the default projection is the spherical mercator (meter units) so we get coordinates of the center by degrees
          zoom: 2 // the initial zoom level

Installation or Setup

OpenLayers 3 or as it is referred OL-3 is a Javascript Library for web mapping, so in order to use it you'll need to add it in your html:

  • first add the ol.css file to use the map styling of OL-3 :

  • then add the ol.js file :

you can also download OL-3 from the official site and call the files in the html by changing the src and href

setting up OL-3

<link rel="stylesheet" href="" type="text/css">

<script src=""></script>

Got any openlayers-3 Question?