[josm-dev] icons for MapCSS for RoadSigns

Jo winfixit at gmail.com
Wed Feb 18 22:56:21 UTC 2015


Oh, just when I was having so much fun witht those SVGs.

Found several mistakes in what I had been doing:

meta {
    author: "Polyglot";
    description: "Display all the road signs you put the info in OSM.
Starting for Belgium traffic signs, but it should be easy to extend it to
other country's signs";
    version: "1.01_2015-02-14";
    }

/* meta[lang=nl"]
{
    nl.shortdescription: "Belgische verkeersborden";
    nl.description: "Geeft alle verkeersborden weer op basis van hun
Belgische code. Als het eenmaal op punt staat, zou het eenvoudig moeten
zijn om het uit te breiden naar de codes die in andere landen worden
gebruikt voor de borden die overenstemmen";
    }
meta[lang=fr"]
{
    nl.shortdescription: "Panneaux belges";
    nl.description: "Visualise tous les panneaux routiers en à base de leur
code belge. Une fois achevé, il devrait être simple d'ajouter les codes
nationaux d'autres pays.";
     }

The basics of how this works was lent from the lane_and_road_attributes
style*/

/* Disable rendering of maxspeed from default style */
node[prop(maxspeedclass, default)]::core_maxnodebg {
    symbol-shape: none;
}
node[prop(maxspeedclass, default)]::core_maxnodefg {
    text: none;
    symbol-shape: none;
}

/* Disable rendering of traffic signs on low zoom levels */
node|z-15[traffic_sign]::traffic_signs
{       icon-image: prop(unset_property);               }

node[traffic_sign]::traffic_signs
{
  traffic_sign_top: 0;
  /* Define some basic shapes */
  traffic_sign_svg: "<defs><circle id='prohibited' cx='50' r='45'
fill='white' stroke='red' stroke-width='10'/></defs>";
}

node|z3-[traffic_sign =~ /BE:C3/]::traffic_signs
{
    traffic_sign_svg: eval(concat(prop(traffic_sign_svg),"<use
xlink:href='#prohibited' y='",(prop(traffic_sign_top)+50),"'/>"));
    traffic_sign_top: eval(prop(traffic_sign_top)+100);
}

node|z16-[traffic_sign =~ /BE:C43/]::traffic_signs
{
    maxspd: get(regexp_match(".*BE:C43\\[(.*)\\].*", tag(traffic_sign)),1);
    t:
eval((prop(maxspd)<10)?1.0:((prop(maxspd)<100)?0.8:((prop(maxspd)<1000)?0.6:0.4)));
    t_x:
eval((prop(maxspd)<10)?45:((prop(maxspd)<100)?60:((prop(maxspd)<1000)?80:120)));
    traffic_sign_svg: eval(concat(prop(traffic_sign_svg),"<use
xlink:href='#prohibited' y='",(prop(traffic_sign_top)+50),"'/><text
style='font-size:60px; font-weight:bold;' x='",prop(t_x),"'
y='",(prop(traffic_sign_top)+70),"' text-anchor='middle'
transform='scale(",prop(t)," 1.0)'>",prop(maxspd),"</text>"));
    traffic_sign_top: eval(prop(traffic_sign_top)+100);
}

node|z16-[traffic_sign ^= "BE:F4a"]::traffic_signs
{
    maxspd: get(regexp_match(".*BE:F4a\\[(.*)\\].*", tag(traffic_sign)),1);
    t:
eval((prop(maxspd)<10)?1.0:((prop(maxspd)<100)?0.8:((prop(maxspd)<1000)?0.6:0.4)));
    t_x:
eval((prop(maxspd)<10)?45:((prop(maxspd)<100)?60:((prop(maxspd)<1000)?80:120)));
    t_z: concat("<rect x='0' y='",(prop(traffic_sign_top)+0),"' width='100'
height='140' fill='white' /><text style='font-size:40px; font-weight:bold;'
x='60' y='",(prop(traffic_sign_top)+135),"' text-anchor='middle'
transform='scale(0.8 1.0)'>ZONE</text>");
    traffic_sign_svg: eval(concat(prop(traffic_sign_svg),prop(t_z),"<circle
cx='50' cy='",(prop(traffic_sign_top)+50),"' r='45' stroke='red'
stroke-width='10' fill='white' /><text style='font-size:60px;
font-weight:bold;' x='",prop(t_x),"' y='",(prop(traffic_sign_top)+70),"'
text-anchor='middle' transform='scale(",prop(t),"
1.0)'>",prop(maxspd),"</text>"));
}

/* Now render the traffic sign */
node|z16-[!(prop(traffic_sign_svg)="")]::traffic_signs
{
    icon-image: eval(concat("data:image/svg+xml,<svg width='100px'
height='",prop(traffic_sign_top),"'>",prop(traffic_sign_svg),"</svg>"));
    icon-width: eval(max(12,prop(pixel_per_metre)));
    text: eval(concat("data:image/svg+xml,<svg width='100px'
height='",prop(traffic_sign_top),"'>",prop(traffic_sign_svg),"</svg>"));
    font-size: 14;
}




Still not quite there yet, should have looked at all those error messages
in the terminal sooner...


More information about the josm-dev mailing list