[josm-dev] icons for MapCSS for RoadSigns

[Jo]

Got it! Now I can start building it up for the rest of the signs. I'll
experiment with parking and extra panels. I always try to tackle the
exceptions first.

It's probably true that displacing the png icons would be easier, but this
is the better solution, I expect it to be a lot more flexible. (I might be
wrong, wouldn't be the first time).

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*/

/* Pixel per metre (on
average)
*/

*|z16  { pixel_per_metre: 0.625; }
*|z17  { pixel_per_metre: 1.25; }
*|z18  { pixel_per_metre: 2.5; }
*|z19  { pixel_per_metre: 5; }
*|z20  { pixel_per_metre: 10; }
*|z21  { pixel_per_metre: 20; }
*|z22  { pixel_per_metre: 40; }
*|z23  { pixel_per_metre: 80; }
*|z24  { pixel_per_metre: 160; }
*|z25  { pixel_per_metre: 320; }
*|z26- { pixel_per_metre: 640; }

/* 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;
}


node[traffic_sign]::ts
{
  traffic_sign_top: 0;
  traffic_sign_svg: "";
}

node|z3-[traffic_sign =~ /BE:C3/]::ts
{
    traffic_sign_svg: eval(concat(prop(traffic_sign_svg, ts),"<circle
r='45' fill='white' stroke='red' stroke-width='10' cx='50'
cy='",(prop(traffic_sign_top, ts)+50),"'/>"));
    traffic_sign_top: eval(prop(traffic_sign_top, ts)+100);
}

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

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

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


2015-02-19 0:01 GMT+01:00 Gertrud Simson <simson.gertrud at gmail.com>:

> 2015-02-18 23:23 GMT+01:00 Jo <winfixit at gmail.com>:
>
> >
> > /* 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)));
> > }
> >
> > prop() depends on the layer. If no layer is given, the default layer is
> used. A solution would be to remove "::traffic_signs" to use the default
> layer. Another solution: if you use the layer "::traffic_signs", the props
> of this layer are used (However you set them in the default layer before).
> So you need to use prop(traffic_sign_top,default),
> prop(traffic_sign_svg,default)
> and prop(pixel_per_metre,default).
>
> However this seems not to fix the style completely. I only see white
> squares and the sign for BE:C3. Don't know if this is the expected result.
>
>
> Stefan
> _______________________________________________
> josm-dev mailing list
> josm-dev at openstreetmap.org
> https://lists.openstreetmap.org/listinfo/josm-dev
>