OpenLayer.js

OpenLayers has long been the standard choice for embedding a browsable OpenStreetMap view into a webpage. A mature and comprehensive library (over 400k of minimised JavaScript), it has a moderate learning curve but is capable of many applications beyond a simple “slippy map”: its features include full projection support, vector drawing, overview maps, and much more.

Now, to see your map on the browser, you need to add this(OpenLayer.js) javascript file. You may always choose any other alternative like Leaflet (a new and lighter library). I used OpenLayer.js

Steps:

To create folder osm in /var/www/ use the following command

sudo mkdir /var/www/osm/

sudo chown $USER /var/www/osm/

cd /var/www/osm/

And in osm folder download these:

wget http://openlayers.org/api/theme/default/style.css
wget http://www.openlayers.org/api/OpenLayers.js
wget http://www.openstreetmap.org/openlayers/OpenStreetMap.js

and create img folder in osm/

 sudo mkdir img

Now, paste the following files in ‘img’ folder:

wget http://www.openstreetmap.org/openlayers/img/blank.gif
wget http://www.openstreetmap.org/openlayers/img/cloud-popup-relative.png
wget http://www.openstreetmap.org/openlayers/img/drag-rectangle-off.png
wget http://www.openstreetmap.org/openlayers/img/drag-rectangle-on.png
wget http://www.openstreetmap.org/openlayers/img/east-mini.png
wget http://www.openstreetmap.org/openlayers/img/layer-switcher-maximize.png
wget http://www.openstreetmap.org/openlayers/img/layer-switcher-minimize.png
wget http://www.openstreetmap.org/openlayers/img/marker.png
wget http://www.openstreetmap.org/openlayers/img/marker-blue.png
wget http://www.openstreetmap.org/openlayers/img/marker-gold.png
wget http://www.openstreetmap.org/openlayers/img/marker-green.png
wget http://www.openstreetmap.org/openlayers/img/measuring-stick-off.png
wget http://www.openstreetmap.org/openlayers/img/measuring-stick-on.png
wget http://www.openstreetmap.org/openlayers/img/north-mini.png
wget http://www.openstreetmap.org/openlayers/img/panning-hand-off.png
wget http://www.openstreetmap.org/openlayers/img/panning-hand-on.png
wget http://www.openstreetmap.org/openlayers/img/slider.png
wget http://www.openstreetmap.org/openlayers/img/south-mini.png
wget http://www.openstreetmap.org/openlayers/img/west-mini.png
wget http://www.openstreetmap.org/openlayers/img/zoombar.png
wget http://www.openstreetmap.org/openlayers/img/zoom-minus-mini.png
wget http://www.openstreetmap.org/openlayers/img/zoom-plus-mini.png
wget http://www.openstreetmap.org/openlayers/img/zoom-world-mini.png

These files will help you to run your OpenLayer.js file offline. Now, configure these in slippymap.html file which display your local tiles on the browser.

sudo vim slippymap.html

You can give any name to this file according to your choice. Now add following text in this file:

<html>
<head>
    <title>OSM Local Tiles</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- bring in the OpenLayers javascript library -->
    <script src="OpenLayers.js"></script>
    <!-- bring in the OpenStreetMap OpenLayers layers. -->
    <script src="OpenStreetMap.js"></script>
 
    <script type="text/javascript">
// Start position for the map (hardcoded here for simplicity)
        var lat=47.7;
        var lon=7.5;
        var zoom=10;
 
        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.Permalink(),
                    new OpenLayers.Control.ScaleLine({geodesic: true}),
                    new OpenLayers.Control.Permalink('permalink'),
                    new OpenLayers.Control.MousePosition(),                    
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0339,
                numZoomLevels: 19,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );
            
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
            layerMapnik.setOpacity(0.4);
            map.addLayer(layerMapnik); 
            
            layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
            layerCycleMap.setOpacity(0.4);
            map.addLayer(layerCycleMap);

            // This is the layer that uses the locally stored tiles
            var newLayer = new OpenLayers.Layer.OSM("Local Tiles", "tiles/${z}/${x}/${y}.png", {numZoomLevels: 19, alpha: true, isBaseLayer: false});
            map.addLayer(newLayer);
			// This is the end of the layer
 
 	            var switcherControl = new OpenLayers.Control.LayerSwitcher();
	            map.addControl(switcherControl);
	            switcherControl.maximizeControl();
 
            if( ! map.getCenter() ){
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                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>

Now, simply test your map by checking your browser. http://yourserveraddress/osm/slippymap.html Mine is looking like this:-

localmap

That’s it. Now create your own and edit the way you want. Enjoy 🙂

Advertisements

Published by

kaurdavinder

I am the one who discover myself daily through reading, writing, interacting with people and expressing my thoughts to inspire them if I would be able to bring a little change to the society through my work. I write blogs, participate in various social activities and want to be a Professional Speaker. Currently, I am pursuing my post graduation in Computer Applications from Guru Nanak Dev Engineering College, Ludhiana and I’m very much active in many technical & social communities.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s