MapCSS/Examples

From OpenStreetMap Wiki
Jump to: navigation, search
Available languages — MapCSS/Examples
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen Kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk bokmål norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português português do Brasil română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް

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