Migrate to mapbox #997 - Inital and main commit.

IsraelHiking.Web/package.json

@@ -18,10 +18,17 @@
     "@ngx-progressbar/core": "5.3.1",
     "@ngx-progressbar/http": "5.3.1",
     "@nicky-lenaers/ngx-scroll-to": "1.1.1",
+    "@turf/bbox": "6.0.1",
+    "@turf/circle": "6.0.1",
+    "@turf/center": "6.0.1",
+    "@turf/distance": "6.0.1",
+    "@turf/helpers": "6.1.4",
+    "@turf/nearest-point-on-line": "6.0.2",
+    "@turf/point-to-line-distance": "6.0.0",
+    "@turf/simplify": "5.1.5",
     "angulartics2": "7.2.2",
     "b64-to-blob": "1.2.19",
     "cc.fovea.cordova.openwith": "^1.2.0",
-    "color-parse": "1.3.7",
     "cordova-android": "^7.1.4",
     "cordova-android-play-services-gradle-release": "2.0.0",
     "cordova-plugin-camera": "~4.0.3",
@@ -39,17 +46,16 @@
     "hammerjs": "2.0.8",
     "intl": "1.2.5",
     "lodash": "4.17.11",
+    "mapbox-gl": "0.53.1",
     "ngx-clipboard": "^11.1.1",
     "ngx-d3": "0.1.0",
     "ngx-image-gallery": "1.3.1",
     "ngx-infinite-scroll": "6.0.1",
-    "ngx-ol": "0.0.1",
+    "ngx-mapbox-gl": "3.0.1",
     "ngx-pagination": "3.2.1",
     "ngx-store": "2.1.0",
     "ngx-window-token": "1.0.2",
     "ohauth": "1.0.0",
-    "ol": "5.3.1",
-    "ol-mapbox-style": "4.2.1",
     "piexifjs": "1.0.4",
     "pouchdb": "7.0.0",
     "redux": "4.0.1",
@@ -70,8 +76,10 @@
     "@types/file-saver": "2.0.0",
     "@types/jasmine": "^3.3.0",
     "@types/lodash": "^4.14.118",
+    "@types/mapbox-gl": "0.51.4",
     "@types/node": "^10.12.11",
     "@types/pouchdb": "^6.3.2",
+    "@types/supercluster": "5.0.1",
     "codelyzer": "^4.3.0",
     "cordova": "8.1.2",
     "gettext-extractor": "3.4.1",

IsraelHiking.Web/sources/application/application.module.ts

@@ -43,7 +43,7 @@ import { NgxImageGalleryModule } from "ngx-image-gallery";
 import { NgxD3Service } from "ngx-d3";
 import { InfiniteScrollModule } from "ngx-infinite-scroll";
 import { NgReduxModule, NgRedux } from "@angular-redux/store";
-import { AngularOpenlayersModule } from "ngx-ol";
+import { NgxMapboxGLModule } from "ngx-mapbox-gl";
 import PouchDB from "pouchdb";
 import WorkerPouch from "worker-pouch";
 import WebFont from "webfontloader";
@@ -121,7 +121,6 @@ import { ClusterOverlayComponent } from "./components/overlays/cluster-overlay.c
 import { GpsLocationOverlayComponent } from "./components/overlays/gps-location-overlay.component";
 import { ClearableOverlayComponent } from "./components/overlays/clearable-overlay.component";
 import { MissingPartOverlayComponent } from "./components/overlays/missing-part-overlay.component";
-import { PublicPoiHoverOverlayComponent } from "./components/overlays/public-poi-hover-overlay.component";
 import { SearchComponent } from "./components/search.component";
 import { InfoComponent } from "./components/info.component";
 import { InfoSidebarComponent } from "./components/sidebar/info-sidebar.component";
@@ -217,7 +216,8 @@ export function initializeApplication(injector: Injector) {
 
 export function getWindow() { return window; }
 
-@NgModule({
+@
+NgModule({
     imports: [
         CommonModule,
         BrowserModule,
@@ -258,7 +258,7 @@ export function getWindow() { return window; }
         NgxImageGalleryModule,
         InfiniteScrollModule,
         NgReduxModule,
-        AngularOpenlayersModule
+        NgxMapboxGLModule.withConfig({ accessToken: "no-token" })
     ],
     entryComponents: [ZoomComponent,
         LocationComponent,
@@ -287,7 +287,6 @@ export function getWindow() { return window; }
         GpsLocationOverlayComponent,
         ClearableOverlayComponent,
         MissingPartOverlayComponent,
-        PublicPoiHoverOverlayComponent,
         SearchComponent,
         InfoComponent,
         InfoSidebarComponent,
@@ -383,7 +382,6 @@ export function getWindow() { return window; }
         GpsLocationOverlayComponent,
         ClearableOverlayComponent,
         MissingPartOverlayComponent,
-        PublicPoiHoverOverlayComponent,
         SearchComponent,
         InfoComponent,
         InfoSidebarComponent,

IsraelHiking.Web/sources/application/components/dialogs/layers/layer-properties-dialog.component.html

@@ -37,19 +37,18 @@
                 <mat-slider [(ngModel)]="opacity" min="0.1" max="1.0" step="0.1" color="primary" vertical></mat-slider>
             </div>
             <div fxFlex>
-                <aol-map fxfill [width]="'100%'" [height]="'138px'">
-                    <auto-layer [address]="getTilesAddress()"
-                                [minZoom]="minZoom"
-                                [maxZoom]="maxZoom"
-                                [opacity]="opacity"
-                                [visible]="true"
-                                [zIndex]="1">
-
-                    </auto-layer>
-                    <aol-view [zoom]="(minZoom + maxZoom) / 2">
-                        <aol-coordinate [x]="(location | async).longitude" [y]="(location | async).latitude" [srid]="'EPSG:4326'"></aol-coordinate>
-                    </aol-view>
-                </aol-map>
+                <div style="width: 100%; height: 138px">
+                    <mgl-map [zoom]="[(minZoom + maxZoom) / 2]"
+                             [center]="[(location | async).longitude, (location | async).latitude]"
+                             [style]='{"version": 8, "sources": {}, "layers": [] }'>
+                        <auto-layer [address]="getTilesAddress()"
+                                    [minZoom]="minZoom"
+                                    [maxZoom]="maxZoom"
+                                    [opacity]="opacity"
+                                    [visible]="true">
+                        </auto-layer>
+                    </mgl-map>
+                </div>
             </div>
         </div>
     </div>

IsraelHiking.Web/sources/application/components/drawing.component.html

@@ -1,4 +1,4 @@
-<div class="side-control">
+<div class="side-control mapboxgl-ctrl">
     <button mat-button (click)="toggleEditPoi()" [ngClass]="{active : isPoiEditActive()}" [ngStyle]="{'color': getRouteColor()}" matTooltip="{{resources.editPoi}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw POI toggle"><i class="fa icon-map-marker fa-lg"></i></button>
     <button mat-button (click)="toggleEditRoute()" [disabled]="isRouteEditDisabled()" [ngClass]="{active : isRouteEditActive() }" [style.color]="isRouteEditDisabled() ? '' : getRouteColor()" matTooltip="{{resources.editRoute}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw route toggle"><i class="fa icon-pencil fa-lg"></i></button>
     <button mat-button *ngIf="isRouteEditActive()" (click)="setRouting('Hike')" [ngClass]="{active : getRoutingType() == 'Hike' }" matTooltip="{{resources.hikeRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing Hike"><i class="fa icon-hike fa-lg"></i></button>

IsraelHiking.Web/sources/application/components/edit-osm.component.html

@@ -1,3 +1,3 @@
-<div class="side-control" [dir]="resources.direction" *ngIf="(isAdvanced | async)">
+<div class="side-control mapboxgl-ctrl" [dir]="resources.direction" *ngIf="(isAdvanced | async)">
     <a mat-button [href]="getOsmAddress()" [target]="'_blank'" matTooltip="{{resources.editThisMapUsingOsm}}" matTooltipPosition="right" angulartics2On="click" angularticsCategory="OSM" angularticsAction="Edit in OSM"><i class="fa icon-map-editing fa-lg"></i></a>
 </div>

IsraelHiking.Web/sources/application/components/file-save-as.component.html

@@ -1,7 +1,7 @@
-<div class="side-control" *ngIf="!isOpen" [dir]="resources.direction">
+<div class="side-control mapboxgl-ctrl" *ngIf="!isOpen" [dir]="resources.direction">
     <button mat-button (click)="toggleSaveAs()" matTooltip="{{resources.saveAs}}" matTooltipPosition="right" angulartics2On="click" angularticsCategory="Files" angularticsAction="Save as open"><i class="fa icon-save-as fa-lg"></i></button>
 </div>
-<div class="side-control" *ngIf="isOpen" [dir]="resources.direction">
+<div class="side-control mapboxgl-ctrl" *ngIf="isOpen" [dir]="resources.direction">
     <div class="save-as-dropdown">
         <mat-form-field fxFill>
             <mat-select placeholder="{{resources.saveAs}}" fxFill #dropdown="matSelect">

IsraelHiking.Web/sources/application/components/file.component.html

@@ -1,4 +1,4 @@
-<div class="side-control">
+<div class="side-control mapboxgl-ctrl">
     <label>
         <a mat-button matTooltip="{{resources.openAFile}}" matTooltipPosition="right" angulartics2On="click" angularticsCategory="Files" angularticsAction="Open from file"><i class="fa icon-folder-open fa-lg"></i></a>
         <input type="file" name="file" id="openFile" #openFile (change)="open($event)" [style.display]="'none'" />

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

@@ -87,6 +87,9 @@ export class FileComponent extends BaseMapComponent {
         if ($event.ctrlKey === false) {
             return true;
         }
+        if ($event.key == null) {
+            return true;
+        }
         switch ($event.key.toLowerCase()) {
             case "o":
                 // this doesn't work on firefox due to security reasons. it does work in chrome and IE though.

IsraelHiking.Web/sources/application/components/info.component.html

@@ -1,3 +1,3 @@
-<div class="side-control">
+<div class="side-control mapboxgl-ctrl">
     <button mat-button (click)="toggleInfo()" matTooltip="{{resources.about}} - {{resources.legend}}" matTooltipPosition="right" [ngClass]="{active: isActive()}" angulartics2On="click" angularticsCategory="Info" angularticsAction="Info sidebar toggle"><i class="fa fa-lg icon-info"></i></button>
 </div>

IsraelHiking.Web/sources/application/components/intercations/pointer-counter.helper.ts

@@ -1,13 +1,11 @@
-import { MapBrowserPointerEvent } from "ol";
-
-export class PointerCounterHelper {
+export class PointerCounterHelper {
     private pointers: string[];
 
     constructor() {
         this.pointers = [];
     }
-
-    public updatePointers(event: MapBrowserPointerEvent) {
+    // HM TODO: finsih this
+    public updatePointers(event: any) {
         if (!event.pointerEvent || !(event.pointerEvent as any).pointerId) {
             return;
         }