Migrate to mapbox #997 - Fix lint, Fix issue with click on point to e…

…dit.
IsraelHikingMap · Apr 25, 2019 · c977381 · c977381
1 parent cd76331
commit c977381
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/IsraelHiking.Web/sources/application/components/intercations/route-edit-route.interaction.ts b/IsraelHiking.Web/sources/application/components/intercations/route-edit-route.interaction.ts
@@ -1,6 +1,6 @@
 import { Injectable, EventEmitter, NgZone } from "@angular/core";
 import { NgRedux } from "@angular-redux/store";
-import { MapMouseEvent, Map, GeoJSONSource } from "mapbox-gl";
+import { MapMouseEvent, Map, GeoJSONSource, Point } from "mapbox-gl";
 
 import { AddSegmentAction, UpdateSegmentsAction } from "../../reducres/routes.reducer";
 import { SelectedRouteService } from "../../services/layers/routelayers/selected-route.service";
@@ -22,6 +22,7 @@ import {
 
 const SEGMENT = "_segment_";
 const SEGMENT_POINT = "_segmentpoint_";
+const DRAG_PIXEL_TOLERANCE = 3;
 
 declare type EditMouseState = "none" | "down" | "dragging" | "canceled";
 
@@ -32,6 +33,7 @@ export class RouteEditRouteInteraction {
     public onPointerMove: EventEmitter<LatLngAlt>;
 
     private state: EditMouseState;
+    private mouseDownPoint: Point;
 
     private selectedRoutePoint: GeoJSON.Feature<GeoJSON.Point>;
     private selectedRouteSegments: GeoJSON.Feature<GeoJSON.LineString>[];
@@ -52,6 +54,7 @@ export class RouteEditRouteInteraction {
         this.onPointerMove = new EventEmitter();
         this.onRoutePointClick = new EventEmitter();
         this.state = "none";
+        this.mouseDownPoint = null;
     }
 
     public static createSegmentId(route: RouteData, index: number) {
@@ -98,6 +101,7 @@ export class RouteEditRouteInteraction {
     }
 
     private handleDown = (event: MapMouseEvent) => {
+        this.mouseDownPoint = event.point;
         if (this.isMultiTouchEvent(event.originalEvent)) {
             this.selectedRoutePoint = null;
             this.selectedRouteSegments = [];
@@ -148,6 +152,10 @@ export class RouteEditRouteInteraction {
     }
 
     private handleMove = (event: MapMouseEvent) => {
+        if (this.mouseDownPoint != null &&
+            Math.abs((this.mouseDownPoint.x - event.point.x) + (this.mouseDownPoint.y - event.point.y)) < DRAG_PIXEL_TOLERANCE) {
+            return;
+        }
         if (this.isMultiTouchEvent(event.originalEvent)) {
             return;
         }
@@ -210,6 +218,7 @@ export class RouteEditRouteInteraction {
     }
 
     private handleUp = (event: MapMouseEvent) => {
+        this.mouseDownPoint = null;
         // 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) {
@@ -227,7 +236,7 @@ export class RouteEditRouteInteraction {
         }
         let isDragging = this.state === "dragging";
         this.state = "none";
-        
+
         if (!isUpdating && isDragging) {
             // regular map pan
             return;

diff --git a/...elHiking.Web/sources/application/components/map/automatic-layer-presentation.component.ts b/...elHiking.Web/sources/application/components/map/automatic-layer-presentation.component.ts
@@ -75,7 +75,7 @@ export class AutomaticLayerPresentationComponent implements OnInit, OnChanges, O
     private createRasterLayer() {
         let address = this.address;
         if (this.address.toLocaleLowerCase().endsWith("/mapserver")) {
-            //address += "/tile/{z}/{y}/{x}"
+            // address += "/tile/{z}/{y}/{x}"
             address += "/export?dpi=96&transparent=true&format=png32&bbox={bbox-epsg-3857}&bboxSR=3857&imageSR=3857&size=256,256&f=image";
         }
         let source = {

diff --git a/IsraelHiking.Web/sources/application/components/map/routes.component.ts b/IsraelHiking.Web/sources/application/components/map/routes.component.ts
@@ -103,13 +103,12 @@ export class RoutesComponent extends BaseMapComponent implements AfterViewInit {
         let selectedRoute = this.selectedRouteService.getSelectedRoute();
         let segment = selectedRoute.segments[pointIndex];
         setTimeout(() => {
-                // allow angular to draw this as it seems not to od it without this timeout...
-                this.routePointPopupData = {
-                    latlng: segment.routePoint,
-                    segmentIndex: pointIndex,
-                };
-            },
-            0);
+            // allow angular to draw this as it seems not to do it without this timeout...
+            this.routePointPopupData = {
+                latlng: segment.routePoint,
+                segmentIndex: pointIndex,
+            };
+        }, 0);
     }
 
     public closeRoutePointPopup() {