Support map rotation

[HarelM]

Feature

• To be able to rotate the map when needed.
• To be able to clear rotation and point it north.
• To see the map rotates as the GPS is tracking my movement.

A list of things still to rewrite due to Openlayers migration:

Critical:

• [x] Public POI - Hover on single POI should show its name
• [x] Mouse cursor UX - pointing finger on feature to indicate you can click
• [x] Check to see if private route presentation needs a performance improvement.
• [x] Better sync of layers + need to make sure sync happens before adding share layer / url layer.
• [x] need to redefine share view behavior? maybe make it read-only and allow adding it to private routes only when the user requests it? otherwise loading the same share multiple time may cause duplication of private routes...
• [x] vector layer does not get rendered when animating the map - related to this issue: https://github.com/quentin-ol/ngx-openlayers/issues/198

Need to test when a release candidate is available:

• [x] Private Route - Drag middle point on start coordinates acts weird
• [x] Public POI icon - add extra data indicator back
• [x] Private POI - Show popup when clicking in read-only mode
• [x] Private POI - Change mode to edit using the pen doesn't work
• [x] Private POI - Changing the icon doesn't work
• [x] Private POI - edit dialog - only opens when you click on the drop icon. Should work when clicking the description as well.
• [x] Private POI - Show coordinates - height doesn’t show
• [x] Do not load/store data in PouchDB when inside IFrame
• [x] First time loading causes missing icons due to missing fonts - need to wait for font to complete download.
• [x] Database performance is not good - need to move it out of UI thread.
• [x] Search - When selecting a search result, the location icon does not show on the map
• [x] local storage can hold up to 5Mb which is not enough - decided to use PouchDB.
• [x] Private Route - Improve route points style to better see direction - only in non-edit mode
• [x] Open File - When opening a geo-tagged image: It goes to the right location but doesn’t show a POI with the image.
• [x] When dragging a private POI the hover marker stays behind
• [x] Base maps do not need a transparency slider
• [x] ~Fix issue with public POI when adding a new one (might be a different issue since it's not a new bug)~ #840
• [x] Test to see if file save workaround is still needed - iOS was not tested yet.
• [x] Routes from Non-IHM files do not get the right opacity and weight
• [x] Show/hide public POIs (eye button) shouldn’t close the list of POIs, we have the collapse button (arrow) for that and this behavior makes it harder to control the POIs you want to show. Same with public tracks.
• [x] Reverse track – This feature is useful where it is located (at the end nodes of tracks) but hard to find. Maybe also put it at the track properties dialog.
• [x] In the legend, in several categories (e.g. points of interest), the examples cover the text, making the legend useless.
• [x] Show route direction as it seems animation is not an option
• [x] Cluster markers + hover
• [x] Recordings
• [x] Read only layers - traces, missing parts, directional search
• [x] Snapping - when editing a route
• [x] Move layers to state management
• [x] Make all route points editable
• [x] Make advance route actions under a ... button
• [x] Replace edit route/layer icon with ...
• [x] Support ESRI layers
• [x] Clear route data - specific
• [x] Fit bounds - needs implementation
• [x] Accuracy circle for GPS - not sure how to do it
• [x] Animate zoom changes - fly to...
• [x] Drag and drop to open file
• [x] Make sure image gallery doesn't change the map position when interacting
• [x] Remove all leaflet references
• [x] No tooltips for the reorient (B&W arrow) button - Text: North-Up הצפן
• [x] ~When the window/screen is small and narrow, the route statistics, scale bar, and the IHM logo are partially hidden below the buttons~ - this was not changed.

Might not implement:

• [x] Hover on line - show it on chart (not sure this is important enough to implement as the other way around works well - when hovering on the chart)
• [ ] Allow sorting of private routes - this is a problem with the new state management system...
• [ ] In a reasonably long track, showing all POIs on the track froze the site. Consider throwing it away rather than handle it.
• [x] ~Esri feature server layer~ #860
• [x] ~Public POI/search - show geometry/route in read-only mode~ requires server change, will be fixed as part of #780

[HarelM]

Steps that needs to be done in order to test the branch:

1. npm install https://github.com/va2ron1/Leaflet
2. go to node_module/leaflet and remove module line from package.json
3. go to dist/leaflet-src.js and add the following code below // misc:

   
   var oldL = window.L;
   function noConflict() {
   window.L = oldL;
   return this;
   }

// Always export us to window global (see #2364) window.L = exports;

in `base-poi-marker.layer.ts`:
```js
import { MarkerClusterGroup } from "leaflet.markercluster";`
...
protected markers: MarkerClusterGroup;
...
this.markers = new MarkerClusterGroup({

[JasonRodman]

Any updates on this feature? The ability to rotate the map is a must for me to be able to adopt Leaflet in my project. I went thru a full implementation before I realized it did not support it.

[HarelM]

@JasonRodman I'm not a leaflet maintainer. you should probably post your concerns in the following issues: Leaflet/Leaflet#268 va2ron1/Leaflet#5 Judging by how it has progressed so far if this is a must for you I would try and use a different library. I'm looking into openlayers and angular-cesium right now to see if I can migrate this project.

[HarelM]

Another approach to rotate would be rotate and 3D to be able to better see how the landscape looks. A short POC I'm working on is using angular-cesium: It has the ability to show 2D and 3D maps. to rotate the view and has full support to angular which is good. This will require a very big UI change and I'm not sure it's needed. Never-the-less, it's fun playing with it. Kinneret with IHM map in 3D.

[HarelM]

While the above is somewhat nice the 3D effect of the map does not give the right perspective IMO, the terrain in not giving the effect I was hoping for and therefore the only lightweight option right now is openlayers.

[zstadler]

See also TileLayer.GL

[HarelM]

Thanks for the link! However, I'm not sure how to use the TileLayer.GL to do the rotation... :-/ I've read some of the docs and some instruction on webGL but I can't figure it out, I'm also concerned that the rotation will happen on every tile separately and so there will be a lot of code to write in order for this to work properly, and it won't work for the esri layers. Bottom line, I'm not sure this is the right approach, I tend to go with an exiting solution - i.e. openlayers...

[valleyofdawn]

This is important for the navigation abilities of the app. It's much easier to decide on turns when the map faces with the direction of movement up. I suggest moving the priority to medium or high.

[HarelM]

Html icons: https://gis.stackexchange.com/questions/253194/create-marker-icon-based-on-html-code-for-openlayers

This seems like a unneeded complexity. The solution is probably to generate image icons for all of the needed marker icons.

[HarelM]

Since we are migrating out of leaflet, there's a need to define the look and feel of the on screen buttons. To align this with the rest of the app I'll be using Material design buttons, with not margins (Ignore the blue tint to some of the buttons, it will be fixed once leaflet style is completely gone):

[zstadler]

One of the original requirements was

• To be able to clear rotation and point it north.

There is a need for button to switch between map rotation and north up.

Perhaps a diagonal arrow ( or ) can indicate map rotation, and a vertical, compass-like arrow would indicate a north-up mode ( )

follow_arrow.svg.zip follow_arrow2.svg.zip north_up.svg.zip

[HarelM]

Good point, thanks for reminding me. I'll add it below the location after the entire migrating will be done.

[zstadler]

As a user, I would like to be able to rotate the map manually. For example, when not moving or when the GPS is inactive. Therefore, I think the map orientation button needs to be available at all times and probably not grouped with the GPS icon (unlike the record button).

[HarelM]

Of course, I just said where it will be...

[valleyofdawn]

Another option is for the current location arrow itself to be pressable. Pressing on it will move from direction up to north up.

[zstadler]

What do you mean by "current location arrow"? The GPS activation button? The current location icon on the map?

In any case, canceling manual map rotation is needed even when there is no "current location".

[HarelM]

Pointer event are very unfriendly... :-/ seems like the rewriting of the route editing in openlayer will take longer than expected: here's a short solution to private POI drag while allowing the map to pan when not dragging a private POI: https://stackblitz.com/edit/angular-ngx-openlayers-pointer-drag-and-pan?file=src/app/map/map.component.ts

[HarelM]

Clustering in ngx-openlayers is very slow: One option is to use supercluster by mapbox: https://github.com/mapbox/supercluster Here's an example that uses openlayers. this means the entire interaction with the cluster https://github.com/openlayers/openlayers/pull/5848/commits/ed2ed006f67b8fc428a193192575a5f7e2445953 Another option it to do if from the code behind and not use ngx-openlayers as there's a problem with the style anyway...

[HarelM]

Dropping support for esri features layers for now. There's a lot of work involved in adding them back to openlayers as far as I understand... MapServer will only support using tile/{z}/{y}/{x} for now.

[zstadler]

Please remember to remove the standard OSM map that hides under the selected base map.

[HarelM]

Since I'm not planning or reverting all this work I'll just merge this to master and split all the remaining work to separate issues.