Map On browser

Map On browser

OpenLayer.js

OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free,

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/html/osm/

sudo chown $USER /var/www/html/osm/

cd /var/www/html/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>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
    <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", "https://localhost/osm_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>

 

Mapnik option  is working fine but the option “local tiles” is not showing GNE map. Mine is looking like this.

 

osm 5

During Saturday presentation,  Mandeep helped me to found an error and I am trying to find the solution.o.png

If you know the solution please let me know.

The error character encoding is solved by adding two lines in the file slippymap.html after head tag.

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

 

Stay tuned. 🙂

Advertisements

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