[josm-dev] icons for MapCSS for RoadSigns

[Jo]

Hi,

Martin put me on the right track, but somehow I can't get it to work. This
is what I have already:



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]
{       icon-image: prop(unset_property);               }

node[traffic_sign]
{
  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_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);
    text: prop(traffic_sign_svg);
    font-size: 14;
}

node|z16-[traffic_sign =~ /BE:C43/]
{
    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),"<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>"));
    traffic_sign_top: eval(prop(traffic_sign_top)+100);
}

node|z16-[traffic_sign ^= "BE:F4a"]
{
    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)));
}


The

text: prop(traffic_sign_svg);

under the C3 entry is for testing purposes.

When I put:

<defs><circle id='prohibited' cx='50' r='45' fill='white' stroke='red'
stroke-width='10'/></defs><use xlink:href='#prohibited' y='50.0' />

in here:

http://scriptdraw.com/

It renders the way it should for

traffic_sign=BE:C3

I'm obviously missing something, but I can't figure out what it is.

Jo



2015-02-18 9:07 GMT+01:00 Martin Vonwald <imagic.osm at gmail.com>:

> Hi!
>
> 2015-02-17 20:58 GMT+01:00 Jo <winfixit at gmail.com>:
>
>> It seems like I've started to do something which is impossible. Can't move
>> the png icons giving them an offset
>>
>
> There is a solution for this, but you probably don't want to know it:
> using JOSM and the style Lane and Road attributes open the area around
> http://www.openstreetmap.org/#map=17/47.94917/16.26273. (Note: a previous
> change in JOSMs standard style just broke the rendering, so its best to
> deactivate the standard to view it properly)
> You will find a node tagged with traffic_sign=maxspeed;overtaking and the
> appropriate rendering with two signposts on top of each other.
>
> This is done via embedded svg-images, which are created on-the-fly
> depending on the given tags. If you want to have a look at the specific
> code, search for "node|z16-[traffic_sign]". The variable "traffic_sign_svg"
> contains the svg image and "traffic_sign_top" the top of the next
> to-be-added signpost (and after processing all tags it is equal to the
> height of the overall image).
>
> Best regards,
> Martin
>
> P.S: Anybody know how to disable the new default traffic sign rendering of
> JOSM from within a style?
>
>