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 latitude/longitude of any city in Google, and plug them into two variables to get a map centered on that location.
Then, we need to extract our coordinates that will be used to center 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 lang="en-gb">
<head>
<meta charset="UTF-8">
<title>Accessible Map</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.10.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.10.0/build/ol.js"></script>
<style>
html, body {
height:100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.map {
height: 100%;
width: 100%;
}
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>
<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 latitude = 19.4326; // degrees north (south is negative)
var centerPoint = ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857');
var mapControls = ol.control.defaults({
attributionOptions: ({
collapsible: false
})
});
var mapView = new ol.View({
center: centerPoint,
zoom: 7
});
var mapConfig = {
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
controls: mapControls,
view: mapView
};
var map = new ol.Map(mapConfig);
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>
First published: 16th August 2018