Getting Started with OpenLayers 3 With Google Lattitude and Longitude

OpenLayers is a high performance mapping library for web development which allows you to create interactive maps. Developers could use alternative tools, such as Google maps, except that OpenLayers is completely free, Open Source JavaScript, and released under the 2-clause BSD License (also known as the FreeBSD). With OpenLayers you have complete control and can even host your own tiles.

This tutorial will quickly get us set up with an example that will allow to look up the lattitude/longitude of any city in Google, and plug them into two variables to get a map centered on that location.

From the OpenLayers examples page, we have modified the code for the Accessible Map. The first thing I've done is change the version from OpenLayers 3.17 to 3.16 because there appears to be a bug that is preventing 3.17 from working for me.

....
<link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.16.0/build/ol.js"></script>
....

Then, we need to extract our coordinates that will be used to centre the map, and apply a transformation operation that will convert from Google's coordinate system to the one OpenLayers uses:

var longitude = -99.1332; // degrees east (west is negative)
var lattitude = 19.4326; // degrees north (south is negative)
var centerPoint = ol.proj.transform([longitude, lattitude], 'EPSG:4326','EPSG:3857');
...
view: new ol.View({
    center: centerPoint,
    zoom: 7
})
...

Finally we need to look up the city we want to centre on and plug the coordinates into our code. Unfortunately, Google will use South and West instead of negative north and east values, so you may have to remember to add a negative sign. The final result is the following code, which if you copy and paste into an html file before opening it in a browser, you will see a map centered on Mexico city.

<!DOCTYPE html>
<html>
  <head>
    <title>Accessible Map</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.16.0/build/ol.js"></script>
    <style>
      a.skiplink {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;
      }
      a.skiplink:focus {
        clip: auto;
        height: auto;
        width: auto;
        background-color: #fff;
        padding: 0.3em;
      }
      #map:focus {
        outline: #4A74A8 solid 0.15em;
      }
    </style>
  </head>
  <body>
    <a class="skiplink" href="#map">Go to map</a>
    <div id="map" class="map" tabindex="0"></div>
    <button id="zoom-out">Zoom out</button>
    <button id="zoom-in">Zoom in</button>
    <script>

      // Mexico city.
      var longitude = -99.1332; // degrees east (west is negative)
      var lattitude = 19.4326; // degrees north (south is negative)
      var centerPoint = ol.proj.transform([longitude, lattitude], 'EPSG:4326','EPSG:3857');

      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: new ol.View({
          center: centerPoint,
          zoom: 7
        })
      });

      document.getElementById('zoom-out').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom - 1);
      };

      document.getElementById('zoom-in').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom + 1);
      };
    </script>
  </body>
</html>

Author

Programster

Stuart is a software developer with a passion for Linux and open source projects.

comments powered by Disqus
We are a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites. More info.