Nethence Documentation Lab Webmail Your IP BBDock  


Those documents are obsolete, please use the Nethence Documentation instead.

HomeUnixWindowsOracleObsoleteHardwareDIYMechanicsScriptsConfigsPrivate

OpenStreetMap with OpenLayers
 
 
Introduction
EPSG:4326 -- latitude/longitude
EPSG:900913 -- meters in x/y (Spherical Mercator)
 
No need for proj4js, we're fine with OSM and Spherical Mercator.
 
 
OpenLayers installation
Download (http://openlayers.org), build and install OpenLayers into your website,
wget http://openlayers.org/download/OpenLayers-2.9.tar.gz
tar xzf OpenLayers-2.9.tar.gz
cd OpenLayers-2.9
cd build
./build.py
mkdir -p ../openlayers
cp OpenLayers.js ../openlayers
cp -R img ../openlayers
cp -R theme ../openlayers
cd ..
mv openlayers /var/www/vhosts/www.example.net
 
Note. otherwise we may possibly fetch the thing directly,
cd /var/www/vhosts/www.example.net
mkdir -p openlayers
cd openlayers
wget http://www.openlayers.org/api/OpenLayers.js
#wget -r --relative .../img
#wget -r --relative .../theme
 
 
HTML test page
Make a test page,
cd /var/www/vhosts/www.example.net
cat > check.html <<EOF9
<html>
<head>
<style type="text/css">
#francemap {
width: 425px;
height: 350px;
}
</style>
<script src="/openlayers/OpenLayers.js"></script>
<script>
function init() {
map = new OpenLayers.Map("francemap");
map.addLayer(new OpenLayers.Layer.OSM());

var mark_center = new OpenLayers.LonLat(2.75,46.97)
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
var zoom=5.4;
var mark_paris = new OpenLayers.LonLat(2.33,48.85)
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);

var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(mark_paris));
map.setCenter (mark_center, zoom);
}
</script>
</head>
<body onload="init();">
<div id="francemap"></div>
</body>
</html>
EOF9
Note. OpenLayers.LonLat(2.75,46.97) for France
Note. width: 425px; height: 350px;
Note. 5.4 // Zoom level
Refs.
http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example
http://wiki.openstreetmap.org/wiki/OpenLayers_Marker_Example
 
Get the latitude and longitude you want from http://www.openstreetmap.org (see the URL, lat comes first) and adjust the zoom. You might also find it easy with http://itouchmap.com/latlong.html .
 
 
References
http://docs.openlayers.org/
http://trac.openlayers.org/wiki/HowToDownload
http://docs.openlayers.org/library/deploying.html
http://docs.openlayers.org/library/spherical_mercator.html
http://wiki.openstreetmap.org/wiki/Main_Page
 

Last update: Aug 27, 2010