Some time ago, I wrote a simple guide to make a slippy map for a website using Google Maps API.
Since I started adding geographical data in OpenStreetMap, I wanted to offer an alternative to my visitors and I studied some examples to make this possible, changing them to ease the transition of previously used GMap data to the new layout, writing functions similar to those of Google Maps API, except for the Adsense part.
OpenStreetMap is available as a slippy map via OpenLayers.
-Include the javascript libraries
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
-Make some space and init
<body onload="init();">
<div style="width:100%; height:90%" id="map"></div>
</body>
-Write the functions
1. coordinates object: the style used by Gmaps was a simple function which gives an object from the coordinates in the ‘lat,lon’ form, so we must write two functions, the one which gives the object and the one which swap the coordinates.
function coordinv(lat, lon)
{
return coord(lon, lat);
}
function coord(lon, lat)
{
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
return lonLat;
}
2. marker creation: as in Gmaps we must pass the layer, the coordinates, the text which will appear in the popup plus a custom marker image (if you want it fixed you can add it)
function createmarker(layer, geo, text, img)
{
var feature = new OpenLayers.Feature(layerMarkers, geo);
feature.closeBox = true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {minSize: new OpenLayers.Size(200, 100) } );
feature.data.overflow = "hidden";
feature.data.popupContentHTML = text;
var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon(img,size,offset);
var marker = new OpenLayers.Marker(geo, icon);
marker.feature = feature;
var markerClick = clickev;
marker.events.register("mousedown", feature, markerClick);
layer.addMarker(marker);
}
3. event for the popup
function clickev(evt){
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
}
else {
this.popup.toggle();
}
OpenLayers.Event.stop(evt);
};
-places: there’s a nice feature of openlayers to read from file, but to reuse the gmap data it’s simple using a function which draws directly on the layer, coordinv specifically substitutes the GLatLng function
function places()
{
var img='http://www.openstreetmap.org/openlayers/img/marker.png';
createmarker(layerMarkers, coord(lon, lat), 'ahoy!', img);
createmarker(layerMarkers, coordinv(lat, lon), 'ahoy!', img);
}
-init: the code to initialize the map, in the function we start a map with the choice Mapnik/Osmarenderer/Cyclemap and a layer for the markers, lastly we center the map and we call the places function to populate the markers layer.
var lat=startlat;
var lon=startlon;
var zoom=startzoom;
var map;
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
map.addLayer(layerTilesAtHome);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
layerMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(layerMarkers);
map.setCenter(coord(lon, lat), zoom);
places(layerMarkers);
}
We successfully converted a Gmap into an OSM map.
Sources: the OSM wiki and OpenLayers Examples
