Slipple
From OpenStreetMap Wiki
This script provides a simple interface to the OSM slippy map via OpenLayers, resembling the Google Maps API. It covers the setup, adding a (custom) marker and showing a track.
Contents |
Why
I spent a lot of time trying to have a slippy map that work as the Google one I used in my website, digging into examples and references. With this set of functions I reached a good approximation of that.
History
v.0.1 Public Release
Usage
Preliminary step (if want to show a route) build a gps trace of the route, either with a gps receiver or with JOSM (draw the route on a new data layer on top of OSM data, next Save as GPX trace; I know is cheating, but I hadn't a gps :D ).
Your html page should contain a similar code:
<html>
<head>
<!--scripts-->
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="slipple.js"></script>
<script type="text/javascript">
function places(layer)
{
var img=''; //if empty uses the OSM default pointer
createmarker(layer, coordinv(yourlatitude, yourlongitude), '<p>HTML!<\/p>', img);
gpxlayer('trace.txt'); //txt cause browser will block gpx extension
initcenter(baselatitude, baselongitude, zoom); //zoom is a valid OSM zoom, eg 15, lat/lon in decimal format
}
</script>
</head>
<body>
<!--div needed to draw the map-->
<div id="map_canvas" style="width: 400px; height: 600px; float:left;"></div>
<script type="text/javascript">
initmap(); //call map initialization after configuring in the header
</script>
</body>
</html>
In places function only initcenter is necessary!
