Update Plan wizard are step to use OpenLayers

src/angular/Dockerfile

@@ -18,9 +18,9 @@ COPY ./planit/yarn.lock /opt/planit/angular/planit/
 RUN yarn install --pure-lockfile \
 	&& yarn cache clean --force
 
-COPY ./ngx-openlayers-1.0.0-next.11.tgz /opt/planit/angular/planit/
-# Contains the changes https://github.com/quentin-ol/ngx-openlayers/pull/244
-RUN yarn add file:./ngx-openlayers-1.0.0-next.11.tgz
+COPY ./ngx-openlayers-1.0.0-next.13.tgz /opt/planit/angular/planit/
+# Contains the changes https://github.com/quentin-ol/ngx-openlayers/pull/247
+RUN yarn add file:./ngx-openlayers-1.0.0-next.13.tgz
 
 COPY ./planit/ /opt/planit/angular/planit
 

src/angular/planit/package.json

@@ -44,7 +44,7 @@
     "ngx-bootstrap": "4.3.0",
     "ngx-toastr": "10.0.4",
     "nouislider": "^13.1.5",
-    "ol": "^5.3.1",
+    "ol": "6.0.0",
     "ol-mapbox-style": "4.3.1",
     "papaparse": "5.0.0",
     "rxjs": "^6.5.2",
@@ -58,11 +58,11 @@
     "@angular/cli": "^8.0.4",
     "@angular/compiler-cli": "~8.0.2",
     "@angular/language-service": "~8.0.2",
+    "@hanreev/types-ol": "^3.0.0",
     "@types/googlemaps": "^3.36.5",
     "@types/jasmine": "~3.3.13",
     "@types/jasminewd2": "~2.0.6",
     "@types/node": "~12.0.10",
-    "@types/ol": "^5.3.1",
     "codelyzer": "^5.1.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",

src/angular/planit/src/app/core/utilities/map.utility.ts

@@ -0,0 +1,50 @@
+import { QueryList, ViewChildren } from '@angular/core';
+
+import { Observable, of as observableOf } from 'rxjs';
+import { delay, map, take } from 'rxjs/operators';
+import { applyStyle } from 'ol-mapbox-style';
+import MVT from 'ol/format/MVT';
+import VectorTileLayer from 'ol/layer/VectorTile';
+import Map from 'ol/Map';
+import { createXYZ } from 'ol/tilegrid';
+import VectorTileSource from 'ol/source/VectorTile';
+
+
+import basemapStyle from './basemapStyle.json';
+import labelsStyle from './labelsStyle.json';
+
+
+export function componentLoaded<T>(component: QueryList<T>): Observable<T> {
+  if (component.first) {
+    return observableOf(component.first).pipe(delay(0));
+  }
+  return component.changes.pipe(map(c => c.first), take(1), delay(0));
+}
+
+
+  // tslint:disable-next-line:max-line-length
+const BASEMAP_TILE_URL = 'https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf';
+const BASEMAP_Z_INDEX = 0;
+const LABELS_Z_INDEX = 99;
+
+export function addBasemapToMap(map: Map, labelsZIndex = LABELS_Z_INDEX) {
+  const sourceOpts = {
+    format: new MVT(),
+    url: BASEMAP_TILE_URL
+  };
+  const basemapLayer = new VectorTileLayer({
+    renderMode: 'image',
+    source: new VectorTileSource(sourceOpts),
+    zIndex: BASEMAP_Z_INDEX,
+  });
+  applyStyle(basemapLayer, basemapStyle, 'esri');
+  map.addLayer(basemapLayer);
+
+  const labelsLayer = new VectorTileLayer({
+    renderMode: 'hybrid',
+    source: new VectorTileSource(sourceOpts),
+    zIndex: labelsZIndex,
+  });
+  applyStyle(labelsLayer, labelsStyle, 'esri');
+  map.addLayer(labelsLayer);
+}

src/angular/planit/src/app/create-plan/plan-wizard/plan-wizard.module.ts

@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { AgmCoreModule } from '@agm/core';
 import { ArchwizardModule } from 'ng2-archwizard';
 import { BsDatepickerModule, TooltipModule } from 'ngx-bootstrap';
+import { AngularOpenlayersModule } from 'ngx-openlayers';
 
 import { SharedModule } from '../../shared/shared.module';
 import { PlanWizardComponent } from './plan-wizard.component';
@@ -20,7 +20,7 @@ import { HazardsStepComponent } from './steps/hazards-step/hazards-step.componen
     CommonModule,
     SharedModule,
     RouterModule,
-    AgmCoreModule,
+    AngularOpenlayersModule,
     TooltipModule,
     ArchwizardModule,
     BsDatepickerModule,

src/angular/planit/src/app/create-plan/plan-wizard/steps/area-step/area-step.component.html

@@ -10,13 +10,13 @@ <h2 class="step-title">Geographic area</h2>
     <div class="nav-tabs">
       <button class="button-tab tab-item"
               [ngClass]="{active: areaTab === areaTabs.EnterCity}"
-              (click)="areaTab = areaTabs.EnterCity">
+              (click)="setTab(areaTabs.EnterCity)">
         <span class="icon icon-search"></span>
         Enter City
       </button>
       <button class="button-tab tab-item"
               [ngClass]="{active: areaTab === areaTabs.DrawArea}"
-              (click)="areaTab = areaTabs.DrawArea;">
+              (click)="setTab(areaTabs.DrawArea)">
         <span class="icon icon-draw-polygon"></span>
         Draw Area
       </button>
@@ -51,17 +51,36 @@ <h3>Draw your plan&rsquo;s boundaries</h3>
         *{{ form.controls.bounds.errors.server }}
       </p>
       <div class="map-container">
-        <agm-map
-          #gmap
-          [latitude]="initialLocation.geometry.coordinates[1]"
-          [longitude]="initialLocation.geometry.coordinates[0]"
-          [streetViewControl]="false"
-          [styles]="mapStyles"
-          (mapReady)="onMapReady($event)">
-        </agm-map>
+        <aol-map>
+          <aol-control-zoom></aol-control-zoom>
+          <aol-interaction-default></aol-interaction-default>
+          <aol-interaction-draw
+            #draw
+            *ngIf="!polygon"
+            type="Polygon"
+            (drawStart)="drawingStarted = true"
+            (drawEnd)="setPolygon($event)"
+          ></aol-interaction-draw>
+          <aol-interaction-translate
+            *ngIf="polygon"
+            [layers]="canDrag"
+            (translating)="checkPolygon()">
+          </aol-interaction-translate>
+
+          <aol-view [zoom]="12">
+            <aol-coordinate
+              [y]="initialLocation.geometry.coordinates[1]"
+              [x]="initialLocation.geometry.coordinates[0]"
+              [srid]="wgs84"></aol-coordinate>
+          </aol-view>
+          <aol-layer-vector [zIndex]="2" #bounds>
+            <aol-source-vector>
+            </aol-source-vector>
+          </aol-layer-vector>
+        </aol-map>
         <button
           class="button redraw-btn"
-          *ngIf="polygon !== null"
+          *ngIf="polygon || drawingStarted"
           (click)="clearBounds()">
           <i class="icon icon-cancel"></i>Re-draw
         </button>