OpenStreetMap with OpenLayers

this is obsolete doc -- see http://doc.nethence.com/ instead

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