OpenStreetMap (OSM) is een project dat als doel heeft om vrij beschikbare en bewerkbare geografische gegevens te verzamelen.
Zodat daaruit landkaarten en andere services kunnen gemaakt worden. Iedereen kan eraan meewerken, het invoeren en aanpassen van de geografische data steunt volledig op vrijwilligers. Het is mede opgericht uit onvrede met de hoge kosten die commerciële kaartbedrijven vragen voor hun producten. Reeds meer dan 20 miljoen kilometer wegen, fiets- en voetpaden werden in kaart gebracht door middel van het overnemen van gegevens van luchtfoto's, en zelf op pad te gaan met een GPS-apparaat. De kaarten zijn zeer gedetailleerd en na het inzoomen (muiscroll) kunt u heel veel informtie vinden.
[De kaart full-screen bekijken . . .][Het script voor deze kaart downloaden]
Script voor OpenStreetMap Amsterdam
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Google Maps v3 API voorbeeld</title>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
div#footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 18px;
margin: 0;
padding: 6px;
z-index: 2;
background: WHITE;
}
</style>
</head>
<body>
<div id="map" style="float: left;"></div>
<div id="footer">© <a href="http://2travel2.nl/kaarten.html">Kaarten</a> - collectie van 2travel2 - <a href="http://www.booking.com/district/nl/amsterdam/amsterdam-centrum.nl.html?aid=301463" target="_blank">Hotels in Amsterdam Centrum</a></div>
<!-- bring in the google maps library -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//Google maps API initialisation
var element = document.getElementById("map");
var map = new google.maps.Map(element, {
center: new google.maps.LatLng(52.37798,4.898509),
zoom: 16,
mapTypeId: "OSM",
mapTypeControl: false,
streetViewControl: false
});
//Define OSM map type pointing at the OpenStreetMap tile server
map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
// "Wrap" x (logitude) at 180th meridian properly
// NB: Don't touch coord.x because coord param is by reference, and changing its x property breakes something in Google's lib
var tilesPerGlobe = 1 << zoom;
var x = coord.x % tilesPerGlobe;
if (x < 0) {
x = tilesPerGlobe+x;
}
// Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll
return "http://tile.openstreetmap.org/" + zoom + "/" + x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18
}));
</script>
</body>
</html>
