Migrate to mapbox #997 - support touch events for route editing, allo…

…w hebrew fonts, fix icons sprite address, zoom-in-out round to integer, fix osm progressbar color.

IsraelHiking.Web/sources/application/components/intercations/route-edit-poi.interaction.ts

@@ -1,4 +1,4 @@
-import { Injectable, EventEmitter } from "@angular/core";
+import { Injectable } from "@angular/core";
 import { MapMouseEvent, Map } from "mapbox-gl";
 import { MatDialog } from "@angular/material";
 import { NgRedux } from "@angular-redux/store";
@@ -8,14 +8,11 @@ import { SelectedRouteService } from "../../services/layers/routelayers/selected
 import { PrivatePoiEditDialogComponent } from "../dialogs/private-poi-edit-dialog.component";
 import { GeoLocationService } from "../../services/geo-location.service";
 import { SnappingService, ISnappingPointResponse } from "../../services/snapping.service";
-import { PointerCounterHelper } from "./pointer-counter.helper";
 import { ApplicationState, MarkerData, LatLngAlt } from "../../models/models";
 
 @Injectable()
 export class RouteEditPoiInteraction {
 
-    // private pointerCounterHelper: PointerCounterHelper;
-
     constructor(private readonly matDialog: MatDialog,
         private readonly selectedRouteService: SelectedRouteService,
         private readonly geoLocationService: GeoLocationService,

IsraelHiking.Web/sources/application/components/intercations/route-edit-route.interaction.ts

@@ -9,7 +9,6 @@ import { RouterService } from "../../services/routers/router.service";
 import { ElevationProvider } from "../../services/elevation.provider";
 import { SnappingService } from "../../services/snapping.service";
 import { GeoLocationService } from "../../services/geo-location.service";
-import { PointerCounterHelper } from "./pointer-counter.helper";
 import { ResourcesService } from "../../services/resources.service";
 import {
     ApplicationState,
@@ -24,7 +23,7 @@ import {
 const SEGMENT = "_segment_";
 const SEGMENT_POINT = "_segmentpoint_";
 
-declare type EditMouseState = "none" | "down" | "dragging";
+declare type EditMouseState = "none" | "down" | "dragging" | "canceled";
 
 @Injectable()
 export class RouteEditRouteInteraction {
@@ -36,7 +35,6 @@ export class RouteEditRouteInteraction {
 
     private selectedRoutePoint: GeoJSON.Feature<GeoJSON.Point>;
     private selectedRouteSegments: GeoJSON.Feature<GeoJSON.LineString>[];
-    private pointerCounterHelper: PointerCounterHelper;
     private geoJsonData: GeoJSON.FeatureCollection<GeoJSON.LineString | GeoJSON.Point>;
     private map: Map;
 
@@ -49,7 +47,6 @@ export class RouteEditRouteInteraction {
         private readonly ngZone: NgZone,
         private readonly ngRedux: NgRedux<ApplicationState>) {
         this.geoJsonData = null;
-        this.pointerCounterHelper = new PointerCounterHelper();
         this.selectedRouteSegments = [];
         this.selectedRoutePoint = null;
         this.onPointerMove = new EventEmitter();
@@ -82,32 +79,32 @@ export class RouteEditRouteInteraction {
 
     public setActive(active: boolean, map: Map) {
         this.map = map;
-        // HM TODO: touchmove? remove console.log
         if (active) {
             map.on("mousedown", this.handleDown);
-            // map.on("touchstart", this.handleDown);
+            map.on("touchstart", this.handleDown);
             map.on("mousemove", this.handleMove);
+            map.on("touchmove", this.handleMove);
             map.on("mouseup", this.handleUp);
-            // map.on("touchend", this.handleUp);
-            // map.on("touchmove", this.handleDrag);
+            map.on("touchend", this.handleUp);
         } else {
             map.off("mousedown", this.handleDown);
-            // map.off("touchstart", this.handleDown);
+            map.off("touchstart", this.handleDown);
             map.off("mousemove", this.handleMove);
+            map.off("touchmove", this.handleMove);
             map.off("drag", this.handleMove);
             map.off("mouseup", this.handleUp);
-            // map.off("touchend", this.handleUp);
+            map.off("touchend", this.handleUp);
         }
     }
 
     private handleDown = (event: MapMouseEvent) => {
-        if (this.pointerCounterHelper.getPointersCount() > 1) {
+        if (this.isMultiTouchEvent(event.originalEvent)) {
             this.selectedRoutePoint = null;
             this.selectedRouteSegments = [];
+            this.state = "canceled";
             return;
         }
         this.state = "down";
-        console.log("down");
         let latLng = this.getSnappingForRoute(event.lngLat);
         let point = event.target.project(latLng);
         let th = 10;
@@ -142,7 +139,7 @@ export class RouteEditRouteInteraction {
         } else {
             this.raisePointerMove(null);
         }
-        if (this.selectedRoutePoint != null || this.selectedRouteSegments.length > 0) {
+        if (this.isUpdating()) {
             event.preventDefault();
         } else {
             this.map.off("mousemove", this.handleMove);
@@ -151,11 +148,13 @@ export class RouteEditRouteInteraction {
     }
 
     private handleMove = (event: MapMouseEvent) => {
+        if (this.isMultiTouchEvent(event.originalEvent)) {
+            return;
+        }
         if (this.state === "down") {
             this.state = "dragging";
         }
         if (this.state === "dragging") {
-            console.log("drag");
             this.raiseRoutePointClick(null);
             this.raisePointerMove(null);
             if (this.selectedRoutePoint != null) {
@@ -164,7 +163,6 @@ export class RouteEditRouteInteraction {
                 this.handleRouteMiddleSegmentDrag(event);
             }
         } else {
-            console.log("move");
             let latLng = this.getSnappingForRoute(event.lngLat);
             this.raisePointerMove(latLng);
         }
@@ -207,19 +205,35 @@ export class RouteEditRouteInteraction {
 
     }
 
+    private isUpdating() {
+        return this.selectedRoutePoint != null || this.selectedRouteSegments.length > 0;
+    }
+
     private handleUp = (event: MapMouseEvent) => {
-        console.log("up");
-        this.map.on("mousemove", this.handleMove);
-        this.map.off("drag", this.handleMove);
+        // this is used here to support touch screen and prevent additional mouse events
+        event.originalEvent.preventDefault();
+        if (event.originalEvent instanceof TouchEvent && event.originalEvent.touches.length > 0) {
+            // more than one touch - no need to do any thing.
+            return;
+        }
+        if (this.state === "canceled") {
+            this.state = "none";
+            return;
+        }
+        let isUpdating = this.isUpdating();
+        if (!isUpdating) {
+            this.map.on("mousemove", this.handleMove);
+            this.map.off("drag", this.handleMove);
+        }
         let isDragging = this.state === "dragging";
         this.state = "none";
-        let updating = this.selectedRoutePoint != null || this.selectedRouteSegments.length !== 0;
-        if (!updating && isDragging) {
+
+        if (!isUpdating && isDragging) {
             // regular map pan
             return;
         }
         let latlng = this.getSnappingForRoute(event.lngLat);
-        if (!updating && !isDragging) {
+        if (!isUpdating && !isDragging) {
             // new point
             this.addPointToEndOfRoute(latlng);
             return;
@@ -411,4 +425,8 @@ export class RouteEditRouteInteraction {
             this.onRoutePointClick.emit(index);
         });
     }
+
+    private isMultiTouchEvent(event: Event): boolean {
+        return event instanceof TouchEvent && event.touches.length > 1;
+    }
 }

IsraelHiking.Web/sources/application/components/map/main-map.component.html

@@ -5,7 +5,7 @@
 <sidebar></sidebar>
 <div fxLayout="row" style="height: 100%">
     <div fxFlex>
-        <mgl-map [zoom]="[location.zoom - 1]"
+        <mgl-map [zoom]="[location.zoom]"
                  [center]="[location.longitude, location.latitude]"
                  [style]="initialStyle"
                  (moveEnd)="moveEnd($event)"

IsraelHiking.Web/sources/application/components/map/main-map.component.ts

@@ -13,7 +13,6 @@ import { HashService } from "../../services/hash.service";
 import { MapService } from "../../services/map.service";
 import { RunningContextService } from "../../services/running-context.service";
 import { SnappingService } from "../../services/snapping.service";
-import { SpatialService } from "../../services/spatial.service";
 import { ScaleControl } from "mapbox-gl";
 
 @Component({
@@ -94,8 +93,8 @@ export class MainMapComponent extends BaseMapComponent implements AfterViewInit
                     source: "dummy",
                     layout: { visibility: "none" }
                 }],
-            glyphs: "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
-            sprite: "https://israelhikingmap.github.io/VectorMap/Icons/publish/"
+            glyphs: "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
+            sprite: "https://israelhikingmap.github.io/VectorMap/Icons/publish/sprite"
         };
     }
 
@@ -104,10 +103,6 @@ export class MainMapComponent extends BaseMapComponent implements AfterViewInit
             return;
         }
         let centerLatLon = this.mapComponent.mapInstance.getCenter();
-        let currentLocation = { lat: this.location.latitude, lng: this.location.longitude };
-        if (SpatialService.getDistanceInMeters(centerLatLon, currentLocation) < 1) {
-            return;
-        }
         this.ngRedux.dispatch(new SetLocationAction({
             longitude: centerLatLon.lng,
             latitude: centerLatLon.lat,

IsraelHiking.Web/sources/application/components/osm-user.component.ts

@@ -118,12 +118,12 @@ export class OsmUserComponent extends BaseMapComponent {
 
     public getProgressbarType() {
         if (this.getRankPercentage() < 5) {
-            return "Warn";
+            return "warn";
         }
         if (this.getRankPercentage() < 30) {
-            return "Accent";
+            return "accent";
         }
-        return "Primary";
+        return "primary";
     }
 
     public toggleIsAdvanced() {

IsraelHiking.Web/sources/application/components/zoom.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef } from "@angular/core";
+import { Component } from "@angular/core";
 import { MapComponent } from "ngx-mapbox-gl";
 
 import { BaseMapComponent } from "./base-map.component";
@@ -15,10 +15,10 @@ export class ZoomComponent extends BaseMapComponent {
     }
 
     public zoomIn() {
-        this.host.mapInstance.zoomIn();
+        this.host.mapInstance.zoomTo(Math.round(this.host.mapInstance.getZoom() + 1));
     }
 
     public zoomOut() {
-        this.host.mapInstance.zoomOut();
+        this.host.mapInstance.zoomTo(Math.round(this.host.mapInstance.getZoom() - 1));
     }
 }