Minimal cssmap style for map renderer

03 Jun, 2023

OSM Renderer (written in RUST): https://github.com/dfyz/osm-renderer

below is the mapcss style used to render the map from the image, it does not account for the zoom level - when zoom out it’s required to remove some information that is being rendered (like house numbers):

canvas {
    fill-color: #fcf8e4;
    background-color: #fcf8e4;
}

area
{
    fill-opacity: 1;
    fill-position: background;
    fill-color: #fafafa;
}

area[natural=coastline] {
    fill-color: #fcf8e4;
}


area[natural=water]
{
    fill-position: background;
    fill-color: #c4d4f5;
    z-index: 9;
}

way[waterway=river]
{
    color: #c4d4f5;
    width: 3;
    z-index: 9;
}

area[building] {
    text: "addr:housenumber";
    font-size: 10;
    text-color: #404040;
    text-halo-radius: 1;
    text-halo-color: #eeeeee;
    z-index: 11;
    text-position: center;
    casing-width: 0.2;
    casing-color: #aaaaaa;
    fill-color: #eeeeee;
}

area[natural=scrub] 
{
    casing-width: 0.2;
    casing-color: #aaaaaa;
    fill-color: #eeeeee;
    z-index: 2;
}


area[amenity=parking] 
{
    casing-width: 0.2;
    casing-color: #aaaaaa;
    fill-color: #ffaaaa;
    z-index: 8;
}


area[leisure=park], 
area[landuse=grass],
area[natural=grass],
area[natural=grassland],
area[natural=meadow],
area[natural=wood],
area[landuse=meadow],
area[landuse=recreation_ground] 
{
    fill-color: #d1fec3;
    casing-width: 0.2;
    casing-color: #c1f1c2;
    z-index: 7;
}

way[highway=tertiary],
way[highway=residential],
way[highway=service],
way[highway=unclassified],

{
    text: name;
    text-position: line;
    text-color: #404040;
    font-size: 12;
    text-halo-radius: 1;
    text-halo-color: #ffffff;
    width: 4;
    color: #fafafa;
    z-index: 10;
    casing-width: 0.2;
    casing-color: #444444;
}


way[highway=primary],
way[highway=secondary],
way[highway=trunk],
way[highway=motorway],
way[highway=primary_link]
{
    text: name;
    text-position: line;
    text-color: #404040;
    font-size: 12;
    text-halo-radius: 1;
    text-halo-color: #ffffff;
    width: 6;
    color: #ffcb33;
    z-index: 11;
    casing-width: 0.2;
    casing-color: #444444;
}

way[highway=footway],
way[highway=cycleway],
way[highway=steps]
{
    width: 2;
    color: #f3f3f3;
    z-index: 9;
    casing-width: 0.2;
    casing-color: #aaaaaa;
}

#osm #map #renderer #cssmap #style

Render OpenStreet map using Rust and Cairo

#osm #map #rust #cairo

Minimal cssmap style for map renderer

Related Posts

Render OpenStreet map using Rust and Cairo