Changing Colours in OSM Map

Our Previous Work

  1. Creating our own OSM tile Server
  2. Adding one more Zoom Level
  3. Online Map Editing using ID Editor
  4. Changing Colours of roads in Map by editing file OSMBright.xml (which is wrong approach)

This is what we have done earlier. Today, we will talk about the right approach to change the colours of the roads, widths of the roads and much more. Now, we will study every concept related to OSM in details, whether it is its database ‘postgresql’ or XML files or any other technology used in this like mapnik, mod_tile, OpenLayers.osm etc. So, we will cover every topic in details and definitely with some good examples. For now, we will start with editing colours of map roads. For this, you need to know about the following-

  1. pallette.mss file
  2. roads.mss file
  3. project.mml file
  4. OSMBright.xml file
  5. Carto

All the files are stored in the folder OSMBright, address could be /usr/local/share/maps/style/OSMBright/.

So, let’s study each one by one:-

  1. pallette.mss – For style customization like colours and fonts, we can use this file. I wanted to change the colours of primary roads and residential roads, so I made changes in this file and after rendering got the colours of roads of my choice.
  2. roads.mss- This file contains line widths of roads at every zoom level. We can make changes here if we want to change the widths of roads. Also, it uses the colour ids we created in the palette.mss file.
  3. project.mml- This file contains all the information of data stored in the postgresql database. We have given dbname ‘gis’ to our database where details of every line, area and land is stored in file format .mml. This file contains the IDs we used in .mss files to define the properties of roads, buildings etc.
  4. Carto- Carto converts the .mml file into Mapnik XML file. It adds the Carto stylesheet with the every entity.
  5. OSMBright.xml- This is final output mapnik XML file generated with the following command- $ carto project.mml > OSMBright.xml. Now, this file is rendered to show maps on the browser with the attributes of our choice.

Changes I made-

I made some changes in the pallete.mss file to create a map having primary and secondary roads of green colour and all the residential roads with black colour. Also changed building colours to red. Then I recreated the OSMBright.xml file and performed rendering to see the output on the browser. You can see the changes hee in the following screenshots-


If, you want more details, feel free to ask any question and stay tuned for future posts.


Change all buildings Color to Red

To change all buildings Color to Red, open /usr/local/share/maps/style/OSMBright/OSMBright.xml file and then

1. In line 966 where style name building is defined (Style name=”buildings” filter-mode=”first”), change the fill colour to red i.e. #FF0000 at every zoom level.

2. Change it for polygonsymbolizer, buildingSymbolizer etc.

3. Then perform re-rendering, if needed remove the old tiles in <code>/var/lib/mod_tile </code>folder and re-generate all.

4. Now, check the result on the browser.


Increase zoom level in OSM

To increase one more zoom level in OSM, follow the given steps:-

1. Edit renderd.conf file located at /usr/local/etc/ and add this-


Now, save the file and close.

2. Edit the file /var/www/html/osm/slippymap.html

In line number 37 and 44 set numZoomLevels: 20;
In line number 39 add

map.setCenter (new OpenLayers.lonLat(659688.852138, 5710701.2962197), 20);

3. Re-render the tiles. The zoom level will be increased.