The OpenLayers open source project allows us to add dynamic maps into our web pages. Using this library we can avoid the use of Google Maps.
The following code sample shows how simple it is to use OpenLayers together with data retrieved from openstreetmap.org.
<!DOCTYPE html>
<html lang="en">
<head>
<title>openlayers simple demo</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/theme/default/style.css" media="all" />
<style>
#mymap {
height: 500px;
width: 800px;
}
</style>
</head>
<body>
<div id="mymap"></div>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js"></script>
<script type="text/javascript">
var map = new OpenLayers.Map({
div: "mymap",
controls: [
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Zoom()
],
layers: [
new OpenLayers.Layer.OSM("OpenStreetMap", null, {
transitionEffect: "resize",
attribution: "© <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
})
],
center: new OpenLayers.LonLat(0, 0),
zoom: 1
});
</script>
</body>
</html>
The following video clip overviews this code sample, shows its execution and explains eacn and every part of it.
You can find more code samples, video clips and various other training material for learning how to use this library at http://abelski.lifemichael.com.
