Id: Support right-click-drag to change map rotation

[bhousel]

In some cases it would be helpful to be able to rotate the map away from North-Up.

To support this we'd need to change the following:

• add rotation to the map projection object

  • this whole file
    https://github.com/openstreetmap/iD/blob/master/modules/geo/raw_mercator.js
  • utilSetTransform (and anywhere that calls utilSetTransform)
    https://github.com/openstreetmap/iD/blob/master/modules/util/util.js#L159

• code that uses a projection to fetch data should be rotation aware.
  mostly that means updating d3.geoTile
  https://github.com/openstreetmap/iD/blob/master/modules/lib/d3.geo.tile.js
  and any place it is used:

  • compute the extent of background tiles to fetch
    https://github.com/openstreetmap/iD/blob/master/modules/renderer/tile_layer.js
  • compute the extent of osm data to fetch
    https://github.com/openstreetmap/iD/blob/master/modules/services/osm.js
  • compute the extent of mapillary/openstreetcam data
    https://github.com/openstreetmap/iD/blob/master/modules/services/mapillary.js
    https://github.com/openstreetmap/iD/blob/master/modules/services/openstreetcam.js

• add support for changing the rotation in several places in the map code:

  • adjust event filter:
    https://github.com/openstreetmap/iD/blob/master/modules/renderer/map.js#L272
  • handle right click drags in event handler:
    https://github.com/openstreetmap/iD/blob/master/modules/renderer/map.js#L365
  • add rotate methods around here:
    https://github.com/openstreetmap/iD/blob/master/modules/renderer/map.js#L674

• support a rotation in the map hash

  • maybe support both zoom/lat/lon and zoom/lat/lon/angle ?
    https://github.com/openstreetmap/iD/blob/master/modules/behavior/hash.js

• all the drawing code needs to be aware of being rotated

  • check everything under
    https://github.com/openstreetmap/iD/tree/master/modules/svg/*
  • But what comes to mind includes
  • midpoint arrows will need to adjust their orientation (midpoints.js)
  • vertices with a direction will need to adjust their orientation (vertices.js)
  • oneway markers should be ok, as they are attached to paths
  • text of all kinds should stay face up (labels.js, gpx.js)
  • markers of all kinds should stay face up (points.js, mapillary_images.js, mapillary_signs.js, openstreetcam_images.js)

• add some kind of rotation compass control:

  • copy whatever zoom does to make a button
    https://github.com/openstreetmap/iD/blob/master/modules/ui/zoom.js
  • add the button to the toolbar around here:
    https://github.com/openstreetmap/iD/blob/master/modules/ui/init.js#L132
  • add some code to make it rotateable
  • needs to listen for map move events like context.map().on('move.compass', debouncedUpdate)
    see https://github.com/openstreetmap/iD/blob/master/modules/ui/undo_redo.js#L78
  • needs an icon

• other stuff:

  • minimap should rotate the yellow bounding box
    https://github.com/openstreetmap/iD/blob/master/modules/ui/map_in_map.js#L252
  • not sure what to even do with the turn restriction editor, but that thing has its own projection and can rotate too
    https://github.com/openstreetmap/iD/blob/master/modules/ui/fields/restrictions.js#L236

[Nakaner]

@bhousel wrote:

In some cases it would be helpful to be able to rotate the map away from North-Up.

Could you please give examples?

[bhousel]

Could you please give examples?

The two most common examples people have asked me about are:

• Tracing stuff along a diagonal road grid (many users instinctively bend their neck to match the road grid, which can be uncomfortable, and looks silly when a whole room of people is doing it)
• Using street level imagery where the user wants the map aligned to driver point of view (for example, to better understand what the "no left turn" sign means without having to spin the world around in their head).

[1ec5]

Personally, I would find map rotation to be very handy for the two reasons above (and not just because I like to trace east-facing corn mazes).

Some considerations regarding user interaction:

• JOSM binds right-dragging (or Ctrl-dragging on the Mac) to panning the map. I don’t think it’s necessarily the job of iD to avoid conflicts with any JOSM gesture, but this is such a basic gesture that it should be super easy to unrotate the map if the user accidentally rotates it. On the Mac, the most natural key bindings would be ⌥← and ⌥→ for rotation and ⌘↑ for unrotation.
• Mac users often Ctrl-drag instead of right-dragging because it’s awkward to two-finger drag on a touchpad or on a touch-enabled, one-button mouse. For awhile, it was impossible to rotate a GL JS–powered map in Firefox on the Mac, because the context menu kept getting in the way: mapbox/mapbox-gl-js#3131.
• Both these kinds of input devices support the two-finger rotation gesture, which would be ideal for this feature. See GestureEvent for Safari and MSGestureEvent for Internet Explorer and Edge.
• Should iD remember the rotation setting? If so, the compass would need to be more prominent to avoid surprises. Maybe the minimap itself should automatically appear when the map is rotated and serve as a compass of some sort.
• How should the imagery offset controls work? Should the map automatically unrotate the moment you fiddle with them?

[bhousel]

hi , this is a great feat for map rotation, is there any timeline for the support of rotate func in iD? i want to make contributions for this feat.

There isn't a timeline - someone wanted this so I put my thoughts on a ticket about what might be needed..

It would be great to have your help with this! 👍
It might make it easier to break the work into several PRs.