Category: 6 Weeks Training

PopUp Menu in OSM

What is the benifit of making own OSM tile server if we can’t style are own map. So here I come to tell you how to add the information(“PopUp Menu”) in your own OSM map.

So Let’s Start.

Edit the file “slippymap.html”.

The layer named “My Points”contains the information of the few shops near Gill road.

Enter the new layer just after the defination of the variable “map” in the init() function.

var pois = new OpenLayers.Layer.Text( “My Points”,
{ location:”./textfile.txt”,
projection: map.displayProjection


Here textfile.txt is the file containing information of the shops in it. The below picture shows the format of the data stored in the textfile.


Be sure the name of the image in the textfile and the image existing in the same directory should have same name.

Now refresh your map and you will be able to see the changes.


Challenge To Change Colors of OSM Map

Challenge To Change Colors of OSM Map

Yeah, a small challenge to change the colors of OSM map is solved.

Actually, it’s very easy.

For this change your “palette.mss” file.

Changes I have made are:-

I changed the color of buildings(to red), primary_line(to green), secondary_line(to green), road_halo(to black),standard_fill(to black).

And after that I run the command.

 carto project.mml > OSMBright.xml

And then rerender it. Re-rendereing the tiles means

run commands

sudo -u username renderd -f -c /usr/local/etc/renderd.conf

sudo /etc/init.d/renderd restart

Restart your apache also.

But nothing happen:(

Then after searching a lot I took a risk to delete the folder “default” in /var/lib/mod_tile.

It means I deleted the previous tiles created in the tile directory and again re-render the tiles.

Breaking News.

Problem is solved.




OSM Error(Virtual) Solved

OSM Error(Virtual) Solved

” Well, if it can be thought, it can be done, a problem can be overcome”.

Ya, exactly after two weeks finally the problem is solved. You will be surprised to know there was not any error actually. It was just a silly mistake.

Now, talking about it less and should come to main point.

When I was retrieving a piece of OpenStreetMap data in PBF format from the site I have to create the bounding box of the desired location and seriously I selected the box containing Berlin 😉 in a hurry and didn’t noticed it. Ya, I know it is a funny moment.

The problem is solved by selecting the correct bounding box.

I have added two three lines in file “renderd.conf” file.

Now, the final “renderd.conf” llook like this.


Finally, to see your own tile server type the URL “http://localhost/osm/slippymap.html”


On zooming it more,


Greatness can be contagious, but first there must be contact.

Stay tuned.

Fundamentals On OSM

As, my mentor suggested me to concentrate more on the fundamentals of the OSM and record the flow of things going on in order to solve your error(i.e. not getting map on browser). So, today I share with you the fruitful things I learned while searching upon this.

Here we will start ->


The process of rendering a map generally means taking raw geospatial data and making a visual map from it.


Geo loosely means ‘the Earth’, as in geography or geochemistry. Spatial refers to ‘in space’, meaning anything that can be represented in terms of position, coordinates etc.

Geographic Information Systems (GIS)

 GIS is a computer system for capturing, storing, checking, and displaying data related to positions on Earth’s surface. GIS can show many different kinds of data on one map. This enables people to more easily see, analyze, and understand patterns and relationships

The Global Positioning System (GPS) is a space-based navigation system that provides location and time information in all weather conditions, anywhere on or near the Earth where there is an unobstructed line of sight to four or more GPS satellites.

There are different layers like Standard, Cycle Map, Transport Map, Humanitarain showing different rendering styles. There are several layers created using Mapnik software including the default ‘Standard’ layer.

psql means  PostgreSQL interactive terminal


create extention postgis;

The core postgis extension installs PostGIS geometry, geography, raster, spatial_ref_sys and all the functions.

Today, I searched a new term QGIS.

QGIS (previously also known as Quantum GIS) is a free (GNU GPL v2) and open source GIS application enabling the user to visualize, manage, edit, analyse data, and compose printable maps. It runs on Linux, Unix, Mac OSX, Windows and Android and can be downloaded free of charge from

 sudo add-apt-repository ppa:ubuntugis/ubuntugis-unstable

sudo apt-get install qgis

I will update in my next blog why and how to use it.

Stay tuned:)

Map On browser

Map On browser


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


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:


and create img folder in osm/

 sudo mkdir img

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


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:

<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", {
                    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");
            layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");

            // 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});
            // This is the end of the layer
                var switcherControl = new OpenLayers.Control.LayerSwitcher();
            if( ! map.getCenter() ){
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                map.setCenter (lonLat, zoom);
<!-- 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>


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. 🙂

Import Data into Database

Import Data into Database

Loading data into your server

Get the latest OpenStreetMap data

Retrieve a piece of OpenStreetMap data in PBF format from

If you need the entire planet file, you can do it by issuing the following command (again substitute your user for username below):

sudo mkdir /usr/local/share/maps/planet
sudo chown username /usr/local/share/maps/planet
cd /usr/local/share/maps/planet 

It nearly take 7 to 8 hours to download the map of the world. 
So better to extract the small area of the map.

** Here you can download the data from . By selecting the bound box and do select the format as pbf or any other according to your choice. You will get the email with the link having the data of the region you want and then download it .

Note : 1.Data is only Available for 48 hours to download from link you got in mail .


Importing data into the database

With the conversion tool compiled and the database prepared, the following command will insert the OpenStreetMap data you downloaded earlier into the database. This step is very disk I/O intensive; the full planet will take anywhere from 10 hours on a fast server with SSDs to several days depending on the speed of the computer performing the import. For smaller extracts the import time is much faster accordingly, and you may need to experiment with different -C values to fit within your machine’s available memory.

osm2pgsql --slim -d gis -C 1500 --number-processes 4 /usr/local/share/maps/planet/planet-latest.osm.pbf

Intially, I was getting an error because I was working in another user. So, first check, if you have made new user as said in my previous blog, then move to that user.

osm 2

The number of nodes, ways and relations processed will obviously differ by the size of the data extract you are using and the date of the data dump. The numbers shown here are not reflective of the full planet import, which is substantially larger.

Congratulations, if everything is working fine.

Testing your tileserver

Now that everything is installed, set-up and loaded, you can start up your tile server and hopefully everything is working. We’ll run it interactively first, just to make sure that everything’s working properly. Remember to substitute your username again:

sudo mkdir /var/run/renderd
sudo chown $USER /var/run/renderd
sudo -u $USER renderd -f -c /usr/local/etc/renderd.conf

and on a different session:

sudo service apache2 reload

If any FATAL errors occur you’ll need to double-check any edits that you made earlier.


If not, try and browse to http://yourserveraddress/osm_tiles/0/0/0.png to see if a small picture of the world appears. The actual map tiles are being created as “metatiles” beneath the folder /var/lib/mod_tile.

osm 3

Setting it to run automatically

If it ran successfully, you can stop the interactive renderd process and configure it to run automatically at machine startup as a daemon.

sudo cp  ~/src/mod_tile/debian/renderd.init /etc/init.d/renderd
sudo chmod u+x /etc/init.d/renderd

Edit the /etc/init.d/renderd file as root – you’ll need to make a couple of changes to the DAEMON and DAEMON_ARGS lines so that they read:

DAEMON_ARGS="-c /usr/local/etc/renderd.conf"

Also, you’ll need to change references to www-data so that they match your username – change “www-data” to what you changed “username” to in other files.

You should now be able to start mapnik by doing the following:

sudo /etc/init.d/renderd start

and stop it:

sudo /etc/init.d/renderd stop

Logging information is now written to /var/log/syslog instead of to the terminal.

Next, add a link to the interactive startup directory so that it starts automatically:

sudo ln -s /etc/init.d/renderd /etc/rc2.d/S20renderd

and then restart your server, browse to http://yourserveraddress/osm_tiles/0/0/0.png and everything should be working! Zoom level of tiles is up to 20.

osm 3

You can also go to the page http://yourserveraddress/mod_tile which should give you some stats about your tile server.

osm 4


Setting Up Your Web Server

Setting Up Your Web Server

Compiling the stylesheet

We now have a fully working CartoCSS stylesheet. Before Mapnik can use it, we need to compile it into XML using the command-line carto compiler. First of all, we use OSM Bright’s own preprocessor, which we need to edit for our setup:


Change the config line pointing to ~/Documents/Mapbox/project to /usr/local/share/maps/style instead, and change dbname from osm to gis. Save and exit.

Run the pre-processor and then carto:

cd ../OSMBright/
carto project.mml > OSMBright.xml



This will create a new folder called “build” with your new project, customized with the variables you set in and install a copy of this build to your MapBox project folder. If you open up TileMill you should see your new map in the project listing.

Click on the map to view it in the editing interface.

You now have a Mapnik XML stylesheet at /usr/local/share/maps/style/OSMBright/OSMBright.xml .

Setting up your webserver

Next we need to plug renderd and mod_tile into the Apache webserver, ready to receive tile requests.

Configure renderd

Change the the renderd settings by editing the /usr/local/etc/renderd.conf (you’ll need to do it as root via “sudo”) and change the following five lines, uncommenting (removing the ‘;’) when required. They are found in the [renderd], [mapnik] and [default] sections.


Create the files required for the mod_tile system to run (remember to change username to your user’s name):

sudo mkdir /var/run/renderd
sudo chown username /var/run/renderd
sudo mkdir /var/lib/mod_tile
sudo chown username /var/lib/mod_tile

Configure mod_tile

Next, we need to tell the Apache web server about our new mod_tile installation.

Using your favourite text editor, create the file /etc/apache2/conf-available/mod_tile.conf and add one line:

LoadModule tile_module /usr/lib/apache2/modules/

Apache’s default website configuration file needs to be modified to include mod_tile settings. Modify the file /etc/apache2/sites-available/000-default.conf to include the following lines immediately after the admin e-mail address line:

LoadTileConfigFile /usr/local/etc/renderd.conf
ModTileRenderdSocketName /var/run/renderd/renderd.sock
# Timeout before giving up for a tile to be rendered
ModTileRequestTimeout 0
# Timeout before giving up for a tile to be rendered that is otherwise missing
ModTileMissingRequestTimeout 30

Tell Apache that you have added the new module, and restart it:

sudo a2enconf mod_tile
sudo service apache2 reload

Tuning your system

A tile server can put a lot of load on hardware and software. The default settings may therefore not be appropriate and a significant improvement can potentially be achieved through tuning various parameters.

Tuning postgresql

The default configuration for PostgreSQL 9.4 needs to be tuned for the amount of data you are about to add to it. Edit the file /etc/postgresql/9.4/main/postgresql.conf and make the following changes:

shared_buffers = 128MB
checkpoint_segments = 20
maintenance_work_mem = 256MB
autovacuum = off

These changes require a kernel configuration change, which needs to be applied every time that the computer is rebooted. As root via “sudo”, edit /etc/sysctl.conf and add these lines near the top after the other “kernel” definitions:

# Increase kernel shared memory segments - needed for large databases

Reboot your computer. Run this:

sudo sysctl kernel.shmmax

and verify that it displays as 268435456.


Installing Mapnik And OSM Bright

Installing Mapnik And OSM Bright

Mapnik is an open source mapping toolkit for desktop- and server-based map rendering, written in C++.

One of its many users is the OpenStreetMap project (OSM), which uses it in combination with an Apache Web Server module (mod_tile) to render tiles that make up the OSM ‘Slippy Map’ Layer.

For handling common software tasks such as memory management, file system access, regular expressions, and XML parsing, Mapnik utilizes the Boost C++ libraries.

Mapnik runs on Linux, OS X, Windows, and BSD systems.

There is also an osm2pgsql utility,[4] that converts OpenStreetMap data into a format that can be loaded into PostgreSQL. Mapnik can then be used to render the OSM data into maps with the appearance the user wants.

Install Mapnik library

Wait! Wait! Don’t insert the following commands blindly in the terminal.

Next, we need to install the Mapnik library. Mapnik is used to render the OpenStreetMap data into the tiles used for an OpenLayers web map.

Build the Mapnik library from source:

I insert the following commands as it is.

cd ~/src
git clone git://
cd mapnik
git branch 2.2 origin/2.2.x
git checkout 2.2


python scons/ configure INPUT_PLUGINS=all OPTIMIZATION=3 SYSTEM_FONTS=/usr/share/fonts/truetype/


What is SCons?

SCons is a software construction tool—that is, a superior alternative to the classic “Make” build tool that we all know and love.

SCons is implemented as a Python script and set of modules, and SCons “configuration files” are actually executed as Python scripts. This gives SCons many powerful capabilities not found in other software build tools.


Verify that Mapnik has been installed correctly:

>>> import mapnik


If python replies with the second chevron prompt >>> and without errors, then Mapnik library was found by Python. Congratulations! You can leave Python with this command:

>> quit()

But, the command “import mapnik” was giving me the import error as shown below.

So, after travelling most of the streets of the map of my brain I installed mapnik through the following commands. 😉

sudo apt-get install pip


sudo apt-get install python-pip

pip install mapnik

sudo apt-get install libmapnik-dev libmapnik3.0 mapnik-utils mapnik-vector-tile python-mapnik python3-mapnik

pip is a package management system used to install and manage software packages written in Python. Many packages can be found in the Python Package Index (PyPI)

Congratulations! if you have installed it.

Install mod_tile and renderd


mod_tile – A custom Apache module which is responsible for serving tiles and requests the rendering of tiles if they aren’t already available in cache or if they have changed since.

mod_tile uses Mapnik as a rendering backend.


Compile the mod_tile source code:

cd ~/src
git clone git://
cd mod_tile
sudo chmod 777 -R mod_tile
sudo make install
sudo make install-mod_tile
sudo ldconfig

Download OSM Bright


OSM Bright is a sensible starting point for quickly making beautiful maps based on an OpenStreetMap database. It is written in the Carto styling language and can be opened as a project in TileMill.

The style is still a work in progress and you are encouraged to use the issue tracker to note missing features or problems with the current implementation.

OSM Bright depends on two large shapefiles. You will need to download and extract them before continuing.

Download them to the shp directory in the osm-bright folder. You can do this with wget like:

To begin with, we need to download both the OSM Bright stylesheet, and also the additional data resources it uses (for coastlines and the like).  Again, substitute your username for username in the “chown” command below.

sudo mkdir -p /usr/local/share/maps/style
sudo chown username /usr/local/share/maps/style
cd /usr/local/share/maps/style
mkdir ne_10m_populated_places_simple
cd ne_10m_populated_places_simple
cd ..

We then move the downloaded data into the osm-bright-master project directory:

unzip '*.zip'
mkdir osm-bright-master/shp
mv land-polygons-split-3857 osm-bright-master/shp/
mv simplified-land-polygons-complete-3857 osm-bright-master/shp/
mv ne_10m_populated_places_simple osm-bright-master/shp/


To improve performance, we create index files for the larger shapefiles:

cd osm-bright-master/shp/land-polygons-split-3857
shapeindex land_polygons.shp
cd ../simplified-land-polygons-complete-3857/
shapeindex simplified_land_polygons.shp
cd ../..

Configuring OSM Bright

The OSM Bright stylesheet now needs to be adjusted to include the location of our data files. Edit the file osm-bright/osm-bright.osm2pgsql.mml in your favourite text editor, for example:

gedit osm-bright/osm-bright.osm2pgsql.mml

Find the lines with URLs pointing to shapefiles (ending .zip) and replace each one with these appropriate pairs of lines:

"file": "/usr/local/share/maps/style/osm-bright-master/shp/land-polygons-split-3857/land_polygons.shp", 
"type": "shape"
"file": "/usr/local/share/maps/style/osm-bright-master/shp/simplified-land-polygons-complete-3857/simplified_land_polygons.shp", 
"type": "shape",
"file": "/usr/local/share/maps/style/osm-bright-master/shp/ne_10m_populated_places_simple/ne_10m_populated_places_simple.shp", 
"type": "shape"

Note that we are also adding “type”: “shape” to each one. (If you’re using nano, to save, now press ctrl-X and Y.)

Finally, in the section dealing with “ne_places”, replace the “srs” and “srs-name” lines with this one line:

"srs": "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs"

You have configured OSM Bright.

Stay tuned. 🙂

OSM(Open Street Map)

OSM(Open Street Map)

OpenStreetMap (OSM)

It is a collaborative project to create a free editable map of the world.

Now ,before beginning to make your own tile server, let me explain you some termonologies.

Web browser

Data provided by the OpenStreetMap project can be viewed in a web browser with JavaScript support via Hypertext Transfer Protocol (HTTP) on its official website.


OsmAnd is free software for Android and iOS mobile devices that can use offline vector data from OSM. It also supports layering OSM vector data with prerendered raster map tiles from OpenStreetMap and other sources.


It is a wonderful example of what you can do with the tools and data of OpenStreetMap catalyzed by an idea.

Tiled web map/ slippy map/ raster tile map

It is a map displayed in a browser by seamlessly joining dozens of individually requested image files over the internet.

It is currently the most popular way to display and navigate maps, replacing other methods such as WMS which typically display a single large image, with arrow buttons to navigate to nearby areas.

Google Maps was one of the first major mapping sites to use this technique. Tiled web maps may in turn be replaced by vector tiles as the standard.

Benifit of Having your own tile server

Maybe you need to have access to you map even when your internet provider is down. Or when the power is off. Or both. It won’t take much for you to see the benefit of having your own piece of OpenStreetMap infrastructure

Now it’s turn to install, setup and configure all the necessary software to operate your own tile server.

These instructions build what OpenStreetMap calls a tile server. That is, a computer that uses the OSM data set to create map images that are suitable for a web site. Not every OpenStreetMap function is supported, but you will be able to create a local map, keep it up to date and customize it for your own purposes.

Software installation

The OSM tile server stack is a collection of programs and libraries that work together to create a tile server. As so often with OpenStreetMap, there are many ways to achieve this goal and nearly all of the components have alternatives that have various specific advantages and disadvantages. This tutorial describes the most standard version that is also used on the main tile server.

It consists of 5 main components: Mod_tile, renderd, mapnik, osm2pgsql and a postgresql/postgis database. Mod_tile is an apache module, that serves cached tiles and decides which tiles need re-rendering – either because they are not yet cached or because they are outdated. Renderd provides a priority queueing system for rendering requests to manage and smooth out the load from rendering requests. Mapnik is the software library that does the actual rendering and is used by renderd.

In order to build these components, a variety of dependencies need to be installed first:

I am installing this OSM on Ubuntu 15.10.

If you are installing it on Ubuntu 14.04, then you have to edit the below command  little bit.

Write “libtiff4” in place of “libtiff5”.


sudo apt-get install libboost-all-dev subversion git-core tar unzip wget bzip2 build-essential autoconf libtool libxml2-dev libgeos-dev libgeos++-dev libpq-dev libbz2-dev libproj-dev munin-node munin libprotobuf-c0-dev protobuf-c-compiler libfreetype6-dev libpng12-dev libtiff5-dev libicu-dev libgdal-dev libcairo-dev libcairomm-1.0-dev apache2 apache2-dev libagg-dev liblua5.2-dev ttf-unifont lua5.1 liblua5.1-dev libgeotiff-epsg node-carto

Without running the above command you can not install postgresql.

Installing postgresql / postgis

PostGIS is a spatial database extender for PostgreSQL object-relational database. It adds support for geographic objects allowing location queries to be run in SQL.

Most spatial databases allow representing simple geometric objects such as points, lines and polygons. Some spatial databases handle more complex structures such as 3D objects, topological coverages, linear networks, and TINs.

On Ubuntu there are pre-packaged versions of both postgis and postgresql, so these can simply be installed via the Ubuntu package manager.


sudo apt-get install postgresql postgresql-contrib postgis postgresql-9.4 -postgis-2.1

Now you need to create a postgis database. The defaults of various programs assume the database is called gis and we will use the same convention in this tutorial, although this is not necessary. Substitute your username for username in the two places below. This should be the username that will render maps with Mapnik.

The default superuser for PostgreSQL is called postgres. You may need to login as this user first.

sudo -u postgres -i

Now, you will get username postgres@yourpcname

createuser username

createdb -E UTF8 -O username gis


Create a Unix user for this user, too, choosing a password when prompted:

sudo useradd -m username
sudo passwd username

Set up PostGIS on the PostgreSQL database (again, substitute your username for username below):

sudo -u postgres psql
\c gis
ALTER TABLE geometry_columns OWNER TO username;
ALTER TABLE spatial_ref_sys OWNER TO username;

Installing osm2pgsql

osm2pgsql is under active development and is best compiled from source.

osm2pgsql is a command-line based program that converts OpenStreetMap data to postGIS-enabled PostgreSQL databases.

mkdir ~/src
cd ~/src
git clone git://
cd osm2pgsql


sudo apt-get install make cmake g++ libboost-dev libboost-system-dev \
  libboost-filesystem-dev libexpat1-dev zlib1g-dev \
  libbz2-dev libpq-dev libgeos-dev libgeos++-dev libproj-dev lua5.2 \


mkdir build && cd build
cmake ..
sudo make install


Congratulations, you have installed osm2pgsql. Now in my next blog I will explain how to install Mapnik library.