Opened 10 years ago

Closed 9 years ago

Last modified 9 years ago

#10217 closed enhancement (fixed)

Rotating icon with MapCSS

Reported by: Aun Johnsen <lists@…> Owned by: team
Priority: normal Milestone: 15.04
Component: Core mappaint Version:
Keywords: mapcss rotation Cc: Klumbumbus

Description (last modified by simon04)

On some instances it would be desirable if an icon could be rotated. Either by the direction of the road (i.e. a pedestrian crossing) or completely independent

node[highway=crossing]:connected {
    icon-image:    "presets/pedestrian_crossing.png";
    icon-rotation: way;

this turns the icon to follow the direction of the way

node[mykey=value] {
    icon-image:   "arrow-symbol.png";
    icon-rotation: 60;

this rotates the icon 60 degrees clockwise.

If the syntax doesn't quite fit, feel free to improve

Attachments (1)

10217.patch (7.0 KB ) - added by simon04 10 years ago.

Download all attachments as: .zip

Change History (36)

comment:1 by Don-vip, 10 years ago

Component: CoreCore mappaint
Keywords: rotation added

comment:2 by Don-vip, 10 years ago

Type: defectenhancement

by simon04, 10 years ago

Attachment: 10217.patch added

comment:3 by simon04, 10 years ago

Milestone: 14.07
Summary: Rotating icon with MapCSS[Patch] Rotating icon with MapCSS

comment:4 by simon04, 10 years ago

Description: modified (diff)

comment:5 by Klumbumbus, 10 years ago

Cc: Klumbumbus added

comment:6 by Don-vip, 10 years ago

Simon, it's ok to apply the patch if it works :)

comment:7 by bastiK, 10 years ago

For pedestrian crossing: There is often a highway=residential and a highway=footway crossing at 90 degrees angle. You probably want to have the icon oriented in one specific direction. This could be achieved with an eval expression as we have the selected parent object in the environment:

way[highway=residential] > node[highway=crossing]:connection {
    icon-image:    "presets/pedestrian_crossing.png";
    icon-rotation: parent_way_angle();

comment:8 by Don-vip, 10 years ago

Milestone: 14.0714.08

move tickets to next milestone

comment:9 by plepe, 10 years ago

I'm thinking ... All the trigonometric functions in JOSM returns angles in radians. If parent_way_angle() really returns the angle in degrees, this could raise consistency problems. Maybe it should be used here too?

On the other hand, degrees are much more human readable.

In pgmapcss I added an option to choose between degrees and radians globally, all functions will adhere to this setting.

comment:10 by Aun Johnsen <lists@…>, 10 years ago

If the angle need to be in radians, maybe functions like degree_to_radian() should be implemented also, if an object is mapped with an angle, it is likely to be tagged in degrees. Very few people are able to relate to angles in radians just by observations, most people would need a tool to convert it to something more familiar.

Maybe also worth having a cardinal_to_radian() function as well, though I cannot think of any use cases where the creator of the stylesheet can't convert cardinals to degrees himself (north = 0, north east = 45, etc.)

comment:11 by plepe, 10 years ago

Absolutely. Usually I think those functions are called *_radians() not *_radian().

It would also be interesting to specify the unit, so that JOSM can convert it to the correct angular system, e.g. "45°" or "3.14156rad", similar to MapCSS 'metric' function, which converts a length value to pixels (e.g. "30m", "5km", "3in"). (This function is currently not supported by JOSM).

I think, a cardinal_to_radians() function is very useful, because people would need to re-implement it over and over.

comment:12 by Don-vip, 10 years ago

Milestone: 14.0814.09

comment:13 by Don-vip, 9 years ago

Milestone: 14.0914.10

comment:14 by Don-vip, 9 years ago

Milestone: 14.10

comment:15 by Klumbumbus, 9 years ago

New different crossing icons in #10831 waiting for rotation :)

comment:16 by simon04, 9 years ago

In 8199/josm:

see #10217 - Enable rotating icons with MapCSS

The corresponding key is icon-rotation and takes angles in the following forms:
[rad], [rad]rad, [deg]°, [deg]deg, or a cardinal direction
(e.g., northeast, sw).

In addition, the following MapCSS functions are provided:
degree_to_radians, cardinal_to_radians

comment:17 by simon04, 9 years ago

Summary: [Patch] Rotating icon with MapCSSRotating icon with MapCSS

Rotating icons should be possible now; further extensions like parent_way_angle() would be best discussed in separate tickets?

comment:18 by simon04, 9 years ago

Milestone: 15.04

comment:19 by plepe, 9 years ago

Cool :-) Hope to implement compatibility in pgmapcss soon!

comment:20 by Klumbumbus, 9 years ago

The rotation resets as soon as you hover an object or click in the mapview.

edit: ... if icon-rotation is in another mapcssfile than the icon path of the node.

Revision: 8199
Repository Root:
Relative URL: ^/trunk
Last Changed Author: simon04
Last Changed Date: 2015-04-15 23:51:33 +0200 (Wed, 15 Apr 2015)
Build-Date: 2015-04-16 01:31:12
Repository UUID: 0c6e7542-c601-0410-84e7-c038aed88b3b
Last Changed Rev: 8199

Identification: JOSM/1.5 (8199 en) Windows 7 32-Bit
Memory Usage: 742 MB / 742 MB (252 MB allocated, but free)
Java version: 1.8.0_31, Oracle Corporation, Java HotSpot(TM) Client VM
VM arguments: [,\Program Files\Java\jre1.8.0_31\lib\security\javaws.policy, -DtrustProxy=true, -Djnlpx.home=<java.home>\bin, -Djnlpx.origFilenameArg=C:\Program Files\josm-latest-bla.jnlp, -Djnlpx.remove=true, -Djava.util.Arrays.useLegacyMergeSort=true, -Djnlpx.heapsize=256m,768m, -Djnlpx.splashport=61388, -Djnlpx.jvm=<java.home>\bin\javaw.exe, -Djnlpx.vmargs=LURqYXZhLnV0aWwuQXJyYXlzLnVzZUxlZ2FjeU1lcmdlU29ydD10cnVlAA==]
Dataset consistency test: No problems found
Last edited 9 years ago by Klumbumbus (previous) (diff)

comment:21 by simon04, 9 years ago

To me it seems like a caching issue, i.e. commenting out the following code circumvents the problem:

  • src/org/openstreetmap/josm/gui/mappaint/

    diff --git a/src/org/openstreetmap/josm/gui/mappaint/ b/src/org/openstreetmap/josm/gui/mappaint/
    index af28bf4..2194d26 100644
    a b public class ElemStyles {  
    127127        }
    128128        StyleCache style = osm.mappaintStyle != null ? osm.mappaintStyle : StyleCache.EMPTY_STYLECACHE;
    129129        try {
    130             osm.mappaintStyle = style.put(p.a, p.b);
     130            //osm.mappaintStyle = style.put(p.a, p.b);
    131131        } catch (StyleCache.RangeViolatedError e) {
    132132            throw new AssertionError("Range violated. object: " + osm.getPrimitiveId() + ", current style: "+osm.mappaintStyle
    133133                    + ", scale: " + scale + ", new stylelist: " + p.a + ", new range: " + p.b, e);

comment:22 by simon04, 9 years ago

Concerning radians vs. degree: The most frequently used numeric values for the key direction are in degrees:

comment:23 by simon04, 9 years ago

In 8238/josm:

see #10217 - Fix reset/flickering/cache issue wrt rotated MapCSS icons

comment:24 by simon04, 9 years ago

After this bug hopefully being fixed, the remaining question is whether to stick with radians as default unit (see my comment:22)?

comment:25 by plepe, 9 years ago

Concerning units: As I wrote before, I see a problem if different trigonometric functions use different angular systems. I think this can only lead to inconsistencies and confusion.

In pgmapcss I added an option to change the global angular system for the current stylesheet. Maybe this would be an option (but, for sure, this would be a bigger change): (Option "angular_system").

I think, if you can write "icon-rotation: 90°;" or "icon-rotation: 90deg;" this manageable, don't you think?

Btw, maybe it would be interesting to also add "gon" resp. "grad"? This seems to be quite common with land surveyors. It's similar to deg, but 100grad = 90°. See: . Most calculators also know these three angular systems: deg, rad, grad.

comment:26 by bastiK, 9 years ago

I like the use of units, this is very CSS-like. In principle, the MapCSS parser could recognize numbers with units on a syntactical level (better performance at runtime). It would be nice to allow negative numbers and maybe add the grad and turn unit (see

comment:27 by plepe, 9 years ago

Interesting. I always like the idea of keeping to standards. So the solution would be, to not have a default unit.

Then trigonometric functions, e.g. parent_way_angle() should return a value with a unit, e.g. "0.1234rad".

comment:28 by bastiK, 9 years ago

I think it is common convention that numbers without explicit unit are interpreted as rad. This would be a backward compatible extension to the standard and would simplify the use of eval expressions and arithmetic in our case.

comment:29 by simon04, 9 years ago

In 8251/josm:

see #10217 - MapCSS rotation: add grad and turn units

comment:30 by simon04, 9 years ago

Resolution: fixed
Status: newclosed

comment:31 by Klumbumbus, 9 years ago

Icon-rotation would be really usefull, if dependent on way direction.(crossing icons, highway=passing_place,...). However this is maybe not trivial for nodes belonging to multiple ways.

comment:32 by plepe, 9 years ago

@Klumbumbus: See the example above:

way[highway=residential] > node[highway=crossing]:connection {

icon-image: "presets/pedestrian_crossing.png";
icon-rotation: parent_way_angle();


With this you define to which way the icon should be rotated. Sure, the node could still be connected to several highway=residential roads. In that case, the "first" way (which is found) will be used.

Btw: is ":connection" really necessary? Because due to the "way > node" relation, the node has to be member of a way anyway?

comment:34 by bastiK, 9 years ago

In 8260/josm:

see #10217 - move unit handling to parser
adds support for negative angles
new: length units px,cm,mm,in,q,pc,pt as in CSS (immediately converted to px)

comment:35 by bastiK, 9 years ago

In 8262/josm:

see #10217 - "fix" test

Modify Ticket

Change Properties
Set your email in Preferences
as closed The owner will remain team.
as The resolution will be set.
The resolution will be deleted. Next status will be 'reopened'.

Add Comment

E-mail address and name can be saved in the Preferences .
Note: See TracTickets for help on using tickets.