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-

two

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

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