OpenLayers Simple Example

From OpenStreetMap

Deploy an OpenStreetMap slippymap on my own website

This simple example may help if you are Deploying your own Slippy Map. This DHTML snippit will bring in the OpenLayers javascript library and use it to show an OSM map!

1 Note: OpenStreetMap is serving the tile images
2 Instructions
3 Develop this example?
4 Related

Note: OpenStreetMap is serving the tile images

Please note that tile images are coming from the OpenStreetMap servers. OSM offers no guarantees about supporting this kind of usage going forward. The tile servers frequently suffer downtime, and the tile URLs may be changed. If you are expecting heavy user load, then you should discuss with everyone first (Contact).

You should consider following the other instructions on the "Deploying your own Slippy Map" page, to render and host your own tile images, or set up your own squid cache for tiles. This will reduce the dependency for you, and will ease bandwidth usage for the OSM servers.

Of course the images themselves (our maps) change over time too, not necessarily for the better.

Instructions

Copy the following into a new HTML file, and view it in a browser.

<html>
<head>
    <title>OpenStreetMap</title>
    
    <!-- bring in the OpenLayers javascript library
         (here we bring it from the remote site, but you could
         easily serve up this javascript youreself) -->
    <script src="http://openlayers.org/api/OpenLayers.js"></script> 

    <!-- bring in the OpenStreetMap OpenLayers layers.
         Using this hosted file will make sure we are kept up
         to date with any necessary changes -->
    <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>

    <script type="text/javascript">
        // Start position for the map (hardcoded here for simplicity,
        // but maybe you want to get from URL params)
        var lat=51.50869333187912
        var lon=-0.11768043178514825
        var zoom=13
        
        var map; //complex object of type OpenLayers.Map 

        //Initialise the 'map' object
        function init() {
          
            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'meters',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );
                

            // Define the map layer
            // Note that we use a predefined layer that will be
            // kept up to date with URL changes
            // Here we define just one layer, but providing a choice
            // of several layers is also quite simple
            // Other defined layers are OpenLayers.Layer.OSM.Mapnik and OpenLayers.Layer.OSM.Maplint
            layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");

            map.addLayer(layerTilesAtHome);

            var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

            map.setCenter (lonLat, zoom);
        }
        
    </script>
</head>

<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">

    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
    <div style="width:100%; height:100%" id="map"></div>
    
</body>

</html>

(Full documentation of classes used is at the OpenLayers site)

Develop this example?

Feel free to edit this page with improvements.

This example was originally created by Harry Wood (and anyone else who edits this page). It is intentionally more basic, with only one layer defined, and no support for URL params (permalink) etc. So adding these features is not necessarily an improvement. In fact if you have ideas for making this more simplistic, that'd be good.