MapCSS/Examples

From OpenStreetMap Wiki
Jump to navigation Jump to search

Here shall come an easy to handle collection of short MapCSS rulesets

How to use own MapCSS rule files easily in JOSM:

  1. Copy all text of each example to your own text file.
  2. Open JOSM and choose the mappaint style button at the left screen side, so that at the right screen side a box with all available mapstyles comes up.
  3. There, choose the very right button when you hover over it with the mouse, so the settings for mappaint style comes up.
  4. Choose the plus symbol to add a new style -> there you can choose your text file.

Some Josm Map Styles are made in MapCSS. See the JOSM Map Styles page to see different stylesheets that can be used within JOSM. The kothic repository also has some examples.


Display of administrative boundary polygons

I tried the following in JOSM. Source data file can be one country or a smaller area downloaded via geofabrik.de or cloudmade.com which were minimized by Osmfilter via --keep="boundary=" or similar.

Maybe you can even have a "filtered" download via one of the recent API servers.

--- start copy&paste here ---

 canvas {
   background-color: #ffffea;
   default-points: false;
   default-lines: false;
 }
 relation[boundary=administrative][admin_level=7]:closed
 {
   width: 1;
   color: black;
   opacity: 1;
   fill-color: orange;
   fill-opacity: 0.3;
   font-size: 16;
   text-color: green;
   text: admin_level;
   text-position: center;
 }
 relation[boundary=administrative][admin_level=8]:closed
 {
   width: 1;
   color: black;
   opacity: 1;
   fill-color: blue;
   fill-opacity: 0.3;
   font-size: 16;
   text-color: red;
   text: admin_level;
   text-position: center;
 }
 relation[boundary=administrative][admin_level=6]:closed
 {
   width: 1;
   color: black;
   opacity: 1;
   fill-color: brown;
   fill-opacity: 0.3;
   font-size: 16;
   text-color: white;
   text: admin_level;
   text-position: center;
 } 

--- end copy&paste here ---

Result:

Note: all areas with dark blue seems to be double ... so there are some logical errors in the boundary relations!!

20120101-JOSM with MapCSS style for admin-boundaries.png