SOLVED: how to change colors etc in XML - Mapnik 2.2

General talk
1

I’m using Mapnik 2.2 to pre-render raster tiles (png). Will use Leaflet on client side to show the map.
I’m also a newbie in the OpenStreetMap world.
Had originally planned to use Google Map in a web-application, but after Google changed their pricing policy in July this year, I searched for another map solution - and luckily found OpenStreetMap.

Mapnik 2.2 comes with a lot of xml files, where there are a lot of settings which controls how the rendered tiles will look. The look of main colors from default style with Mapnik 2.2 are to dark (for me), and the dark green do not mix well with some street colors. I want to change the main green color, and water color to something lighter (more like the colors in the current Openstreetmap, and perhaps eventually the color of the roads. I also want to increase the distance between the road numbers on the same road.

There is a minor error (minor at least for me) in the rendered tiles - where some road numbers get partly visible, or misaligned (see example tile below). If I can’t find a way to fix this and increase the distance between road numbers (for the same road) then I probably want to remove the road numbers all togheter. In my project roadnumbers are not that important anyway.

So to my questions.
Is there any tutorial available describing which part / color / symbol in the map are controlled where in the various xml files, and where the tutorial is aimed at the styles that come default with Mapnik 2.2 ?

A faster way to get a lighter colored map, would perhaps be to use the OSM Bright style.
If a version of that style is possible to use with the Mapnik 2.2 version, when rendering raster tiles in my setup, it would be nice if someone could direct me to a tutorial on how to implement that style in Mapnik version 2.2.

Here is the look of the rendered tile (using Mapnik 2.2 and PostGis on Windows 7). Where in my opinion the forest and water are to dark, and where some street colors also could be improved, as well as the road signs:

Same area, with lighter and better colors - but now copied from the Openstreetmap.org website:

2

Is there any special reason for you to not simply use Mapnik 3.0.x and OSM Carto (style of default map on OSM.org website)? It’s even easier to modify it, since Carto CSS is more compact and human readable than raw XML.

Disclaimer: I’m an OSM Carto developer.

3

I don’t know what the OP’s equipment is, but I find upgrading Mapnik on my computer to be fraught with peril. Usually takes me many, many hours to get everything working after touching anything in the tool chain. For that reason I am still on an earlier version of Mapnik with the old XML styling information and home brew scripts for generating my topographic maps from DEM, OSM and other data sources.

4

Do you have a link to a pre-compiled version of Mapnik 3.x - which work on Windows 7?
Does this eventual precompiled version have a manual describing which version of Python, osm2pgsql, PostGis etc that is needed to make Mapnik 3.x work on the same operative system, and how this installation can be used to pre-generate raster tiles (.png)?

I’m in a situation right now where my first priority is to finish a web application - using an interactive map (Openstreetmap is one such solution. Google Map is another (but incredibly expensive). In my experience installing Mapnik with the other needed software bits on Windows 7 is not a straightforward task.

In this point in time, using what I have (current installation) to produce the interactive map with Openstreetmap, with some minor justifications to the map, such as forest color, water color (and maybe some other stuff also mentioned in threadstart) will make it possible to finish the web application - whith a good enough interactive map within the current timeschedule. Actually I can use what I have right now. But I believe that with some minor changes to some XML files (or perhaps just one XML file), I can make it a lot better looking map (more similar to the lighter color palette used by Openstreetmap today, and that just by changing color on water and forest).

Then, after the web application is rolled out - I can use time to install newer version of Mapnik (hopefully - if that will work on Windows 7), and pre-generate tiles for at better looking map - and getting all the benefits of the CSS type of stylesheets in Carto.

So the reason is simply this. Using what I have, and what I know will work to get out an interactive map - will make it possible for me to finish the web application in time with a working interactive map. Starting all over to try to install something newer - Mapnik 3 with all other parts working smootly with that Mapnik version - is simply to risky for me.

Now I hope somebody could answer my questions in threadstart.

The question in the thread title is somewhat misleading.
I know how to change a color in an XML file.
What I do not know is where, in which XML files - I change e.g. forest color, water color (please se threadstart for details).
It would be nice if there existed some detailed explanation on where to change the various parts in an XML based map (for Mapnik 2.2), and especially an overview over which part (or areas) in map that can be changed (where) without changing other parts of the map. But maybe such information do not exist, and that every newbie to Openstreetmap has to start from scratch, guessing what to change - change it, generate tiles, see that it was wrong place to change, and/or that it changed parts which should not be changed etc. Having access to a tutorial explaining which parts to change e.g. for getting an other color for the forest, another color for the water. That would save me a lot of time, time I can use on the web application itself.

I know I’m working with an old version of Mapnik. But it is working for me on an Windows 7 platform.
I do not really need the latest verson of Mapnik now (and the latest styles for Openstreetmap) to finish the web application, and I do not even know If I will be able to install the current Mapnik 3.x on Windows 7 (perhaps having to compile it myself) - and I definitely do not want to gamble here. But will I install Mapnik 3.x in future, and take advantage of the the new features as well as newer version of Carto? Definitely, but not before the web-application is finished. At that point in time I also suspect I will use pregenerated vector tiles instead of raster tiles - in order to make the millons of tiles smaller (in bytes that is).

5

To be more specific:

If I go to the .xml file I used when I generated the tiles that produced the area of the map in my first post in this thread I find this:


<Rule>
            <Filter>([landuse]='forest')</Filter>
            <MinScaleDenominator>50000</MinScaleDenominator>
            <MaxScaleDenominator>3000000</MaxScaleDenominator>
            <PolygonSymbolizer fill="rgb(141,197,108)"/>
</Rule>
<Rule>
            <Filter>([landuse]='forest')</Filter>
            <MaxScaleDenominator>50000</MaxScaleDenominator>
            <PolygonPatternSymbolizer file="symbols//forest.png"/>
</Rule>

If i use the rgb colors specified in the first rule from above, and convert them to HEX color value I get:
#8DC56C

If I sample the hex color value from the green area (forest area I guess) with tiles generated on my computer (see my first post above), then I get:
#AED0A0

They are not the same colors - obviously.

So where does this particular green color (#AED0A0) in the map come from?
Is the RGB color specified in the rule above changed somewhere else, maybe using opacity?

I would like to change it so the output color for the forest area in the map are:
#CEE2C6 (like the forest area in map generated by current Openstreetmap.org website).
Where do I have to make change in the xml file?

The example output above (first post) from the map is from zoom level 11.

NOTE: Using Mapnik 2.2

6

At a guess, which seems to be confirmed by https://github.com/mapnik/mapnik/wiki/PolygonPatternSymbolizer , from symbols//forest.png

7

from what I can see, the forest.png has a green background with this color (Mapnik 2.2):
#8DC56C
and it also has a tiny darker green tree inside it, which do not appear at zoom level 11.

In zoom level 11, there is an even green, same HEX color all over the forest area, a color not matching the forest.png, and no trees at all.
So I believe that the forest.png is not used for this zoom level at all.

You can see the same effect, but not the same colors and tree symbol in the current openstreetmap.org website, where the forest.png is not used before you reach zoom-level 13.

From what I can see the forest area is not using the forest.png (or any other tree png) for the zoom level 8 - 12 (current openstreetmap.org), but just a fixed green color (hex or rgb).

I would like to change the color for the forest area for the zoom-levels where the forest.png is not in use (at least not a forest.png with a tree inside it).

8

Apologies. I realised that, but thought I hadn’t posted the draft.

I wonder if the display and Mapnik are working in different colour spaces. There could be advantages for Mapnik to work in linear RGB, but that wouldn’r produce the values you quote, when converted to sRGB.

In terms of any open source software for Windows, you may be up against the problem that the primary developers are not interested in developing for WIndows, so Windows port are likely to lag.

9

I now found that this:


<Filter>([landuse]='forest')</Filter>

does not reflect the actual forest area at e.g. zoom level 11.
Changing either the png color for forest.png or the rgb color in it’s respective rule did not change the color of the large green areas on my map (e.g. zoom level 11).

But this rule:


<Rule>
            <Filter>(([natural]='wood') or ([landuse]='wood'))</Filter>
            <MaxScaleDenominator>3000000</MaxScaleDenominator>
            <PolygonSymbolizer fill="rgb(174,209,160)"/>
 </Rule>

do control the color on those areas.

The color is now changed to something else, which is exactly what I wanted.

I also found that changing this rgb value into another value (all places in the main xml file):
rgb(181,208,208)

34 four places or so…

made it so the water color is set to what I want.

Now I have to look into how to change the street colors and hopefully get rid of the road numbers (if I cant make it so the roadnumbers (e.g. zoom level 11) does not repeat itself so often).

A tutorial or how to - paper, for how to manipulate main areas of the map (for Mapnik 2.2) would really be something.
But I understand that the development and documentation at the current point in time are aimed at another version than I use. To bad that I could not install the current version of mapnik. But as I said - that is something I will do when I have finished the main web-application. Upgrading the map laiter will be easy and not affect the usage of the web-application in any way.

Now I can at least make some changes to the map - which will enhance the map experience dramatically for the end user. Which in my opinion will benefit my own project as well as the OpenStreetMap project.

If someone knows how to make the space between the road numbers larger (e.g. zoom level 11), then please let me know. Take a look at the first image in my initial post in this thread - there you will see road number on same road pretty close - to close for my liking.

10

And then I finally managed to get rid of the misaligned road shields (in my Mapnik 2.2 generated map).
Another person have had the exact same problem (but for the 3.x version) and found a solution:

In this thread:
https://github.com/mapnik/python-mapnik/issues/147

one can find this:

Koles500 commented on Apr 12, 2017
Finally, I fixed it!
<Map buffer-size=“512”
AND
<ShieldSymbolizer clip=“false”
instead of
<ShieldSymbolizer avoid-edges=“true”
(all occurences) in osm.xml worked.

In my main xml file I did not find this: avoid-edges=“true”
But I added this buffer-size=“512” to "<Map … "
and added this clip=“false” to all occurrences of <ShieldSymbolizer
and renderd my testarea againd and found all the misaligned road shields had been fixed.

The misalignment happend where any given roadshield existed in more than one tile.

Now I can focus on the web application development again, as well as importing OSM into database and generating tiles.
When that is finished and working for the end user, then I will look into installing last version of Mapnik - hopefully a binary version working for Windows 7 - and then re-render all the tiles.

Really look forward to use OpenStreetMap and learn more about it.

Via the link above I also became aware of Mapnik Reference:
http://mapnik.org/mapnik-reference/#2.2.0/shield

Map before changing forest and water color to a lighter value, and before fixing road shield misalignment / clipping:

Map after changes described in this thread, where forest (actually wood in xml file) and water color are from current map at Openstreetmap.org:

11

Can anyone please guide me how to use a dark style for my map server? I used https://www.linuxbabe.com/ubuntu/openstreetmap-tile-server-ubuntu-20-04-osm and as you see I have mapnik 3 and carto. The other question is can I have satellite map added to my server? Thanks.