Merge pull request #2 from RalucaNicola/raluca/speedUpInit

Raluca/speed up init

index.html

@@ -35,7 +35,7 @@
 
   <link rel='manifest' href='./manifest.json'>
 
-  <link rel='stylesheet' href='https://jsdev.arcgis.com/4.7/esri/css/main.css'>
+  <link rel='stylesheet' href='https://js.arcgis.com/4.7/esri/css/main.css'>
   <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet'>
   <link rel='stylesheet' href='dist/main.css'>
 </head>

package.json

@@ -24,6 +24,7 @@
     "css-loader": "^0.28.7",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.6",
+    "image-webpack-loader": "^4.2.0",
     "jshint": "^2.9.5",
     "jshint-loader": "^0.8.4",
     "json-loader": "^0.5.7",
@@ -35,6 +36,7 @@
     "tslint": "^5.7.0",
     "tslint-webpack-plugin": "^1.1.1",
     "typescript": "^2.6.0",
+    "uglifyjs-webpack-plugin": "^1.2.5",
     "url-loader": "^0.6.2",
     "webpack": "^3.10.0",
     "webpack-dev-server": "^2.9.7"

src/style/scene-panel.scss

@@ -37,7 +37,3 @@
 .esri-popup__pointer-direction.esri-popup--shadow {
   background: rgb(249, 163, 82);
 }
-
-.esri-popup--feature-updated .esri-popup__header-title, .esri-popup--feature-updated .esri-popup__content{
-  animation: none;
-}

src/style/variables.scss

@@ -1,6 +1,6 @@
 
 $red: #db5353;
-$green: #b5e2c1/*#00827F*/;
+$green: #b5e2c1;
 $orange: #f9a352;
 $disabled-gray: #bbb;
 $delimiter: rgba(100,100,100, 0.75);

src/ts/State.ts

@@ -1,6 +1,6 @@
 import Accessor = require("esri/core/Accessor");
 import SceneView = require("esri/views/SceneView");
-import { Filters, Device, Trail } from "./types";
+import { Device, Trail } from "./types";
 import { subclass, declared, property } from "esri/core/accessorSupport/decorators";
 
 @subclass()
@@ -11,7 +11,6 @@ export default class State extends declared(Accessor) {
 
   @property()
   selectedTrailId: number = null;
-
   setSelectedTrailId(id: number) {
     this.selectedTrailId = id;
     if (this.selectedTrailId && this.visiblePanel !== "detailPanel") {
@@ -21,27 +20,17 @@ export default class State extends declared(Accessor) {
 
   @property()
   filteredTrailIds: Array<number> = [];
-
   setFilteredTrailIds(ids: Array<number>) {
     this.filteredTrailIds = ids;
-
-    // check if the selected trail is in the filtered trails
+    // deselect trail if it is in the filtered out trails
     if (this.filteredTrailIds.indexOf(this.selectedTrailId) === -1) {
       this.selectedTrailId = null;
     }
   }
 
   @property()
-  filters: Filters = {
-    walktime: null,
-    ascent: null,
-    category: null,
-    difficulty: null
-  };
-
+  filters = {};
   setFilter(property: string, value: string | Array<number>): void {
-
-    //create a new filters object so that the watch notifies on every property change
     this.filters = {
       ...this.filters
     };

src/ts/config.ts

@@ -1,10 +1,29 @@
+/* This app can be configured by changing the variables
+in this file.
+
+Webscene:
+ - copy the webscene that I use: http://www.arcgis.com/home/item.html?id=d0580bb5df3840d384bda44b6ddeb54e
+ - remove/add layers with additional data in the Layers group
+ - remove/add basemap layers in the Basemap group
+
+Data:
+ - replace the trails service url
+ - replace the attribute names to the ones in your service
+ - remove attributes if they don't make sense for your data
+ - filterOptions are the attributes that will be used for filtering
+    they can be removed in case they are not useful
+
+Colors:
+ - change the colors for visualizing the trails
+ - for CSS colors check also the variables.scss file - selectedTrail is $orange
+*/
+
 export default {
   scene: {
-    websceneItemId: "d0580bb5df3840d384bda44b6ddeb54e" // global scene
-    // websceneItemId: "7abaad52a4254f30ab1897079cad504a" // local scene
+    websceneItemId: "d0580bb5df3840d384bda44b6ddeb54e"
   },
   data: {
-    trailsServiceUrl: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/SwissNationalParkTrails/FeatureServer",
+    trailsServiceUrl: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/SwissNationalParkTrails/FeatureServer/0",
     trailAttributes: {
       name: "Name",
       id: "RouteId",

src/ts/data/Trail.ts

@@ -7,8 +7,10 @@ import FlickrLayer from "../scene/FlickrLayer";
 export default class Trail {
 
   geometry: Polyline;
+  hasZ = false;
   profileData: Array<any>;
   flickrLayer: FlickrLayer;
+  segments: any;
 
   constructor(feature) {
 
@@ -20,17 +22,28 @@ export default class Trail {
       this[prop] = feature.attributes[attributeMap[prop]];
     }
 
-    let segments;
-    [this.profileData, segments] = this.getProperties(feature.geometry);
-    this.flickrLayer = new FlickrLayer(segments);
   }
 
-  private getProperties(geometry: Polyline): Array<any> {
+  setZValues(view) {
+    return view.map.ground.queryElevation(this.geometry)
+      .then((response) => {
+        this.geometry = response.geometry;
+        this.hasZ = true;
+        [this.profileData, this.segments] = this.getProperties();
+      });
+  }
+
+  public createFlickrLayer() {
+    this.flickrLayer = new FlickrLayer();
+    return this.flickrLayer.loadImages(this.segments);
+  }
+
+  private getProperties(): Array<any> {
 
     const points = [];
     let totalLength = 0;
     let segmentLength = 0;
-    const path = geometry.paths[0];
+    const path = this.geometry.paths[0];
     const segments = [path[0]];
     let i = 0, j;
 

src/ts/data/trailManager.ts

@@ -0,0 +1,39 @@
+import config from "../config";
+import * as Query from "esri/tasks/support/Query";
+import * as QueryTask from "esri/tasks/QueryTask";
+
+import Trail from "./Trail";
+
+function queryTrails() {
+  const query = new Query({
+    outFields: ["*"],
+    where: "1=1",
+    returnGeometry: true,
+    outSpatialReference: {
+      wkid: 4326
+    }
+  });
+
+  const queryTask = new QueryTask({
+    url: config.data.trailsServiceUrl
+  });
+
+  return queryTask.execute(query);
+}
+
+const trailManager = {
+
+  initTrails: (state) => {
+    return queryTrails().then((result) => {
+      console.log(result);
+        state.trails = result.features.map((feature) => {
+          return new Trail(feature);
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }
+};
+
+export default trailManager;

src/ts/main.ts

@@ -1,18 +1,17 @@
-/* main application */
+/* entry point for the application */
 
 import "../style/reset.scss";
 import "../style/style.scss";
 
 import esriConfig = require("esri/config");
-
 esriConfig.request.useIdentity = false;
 
 import State from "./State";
 import deviceUtils from "./ui/deviceUtils";
 import ConnectionManager from "./ui/ConnectionManager";
 import SceneElement from "./scene/SceneElement";
 import LoadingPage from "./ui/LoadingPage";
-import Trail from "./data/Trail";
+import trailManager from "./data/trailManager";
 import MenuPanel from "./ui/MenuPanel";
 
 import * as runtime from "serviceworker-webpack-plugin/lib/runtime";
@@ -26,10 +25,7 @@ deviceUtils.init(state);
 const connectionManager = new ConnectionManager(state);
 const loadingPage = new LoadingPage(state);
 const sceneElement = new SceneElement(state);
-sceneElement.getZEnrichedTrails()
-  .then((features) => {
-    state.trails = features.map((feature) => {
-      return new Trail(feature);
-    });
-    const menuPanel = new MenuPanel(state.trails, state);
+trailManager.initTrails(state)
+  .then(() => {
+    const menuPanel = new MenuPanel(state);
   });

src/ts/scene/FlickrLayer.ts

@@ -85,7 +85,7 @@ export default class FlickrLayer extends FeatureLayer {
   photoList: any[] = [];
   imagesLoaded: boolean = false;
 
-  constructor(wayPoints) {
+  constructor() {
     super({
       elevationInfo: {
         mode: "relative-to-scene"
@@ -111,36 +111,10 @@ export default class FlickrLayer extends FeatureLayer {
       })
     });
 
-    esriConfig.request.corsEnabledServers.push("https://api.flickr.com/");
 
-    for (let i = 1; i <= 9; i++) {
-      esriConfig.request.corsEnabledServers.push(`https://farm${i}.staticflickr.com/`);
-    }
-
-    const requests = [];
-    const radius = 0.5;
-
-    wayPoints.forEach((point) => {
-      const url = `https://api.flickr.com/services/rest/?
-        method=flickr.photos.search&api_key=d2eeadac35a3dfc3fb64a92e7c792de0&privacy_filter=1&accuracy=16
-        &has_geo=true&lon=${point[0]}&lat=${point[1]}&radius=${radius}
-        &per_page=1
-        &content_type=1
-        &license=1,2,3,4,5,6,7,8,9`;
-      requests.push(esriRequest(url, { responseType: "xml" }));
-    });
-
-    all(requests).then((results) => {
-      results.forEach((result) => {
-        const photo = result.data.getElementsByTagName("photo");
-        if (photo.length > 0) {
-          this.photoList.push(photo[0]);
-        }
-      });
-    });
   }
 
-  public loadImages() {
+  public loadImages(wayPoints) {
     if (this.imagesLoaded) {
       //create a fake promise
       const deferred = new Deferred();
@@ -149,7 +123,36 @@ export default class FlickrLayer extends FeatureLayer {
     }
     else {
       this.imagesLoaded = true;
-      return setImages(this);
+      esriConfig.request.corsEnabledServers.push("https://api.flickr.com/");
+
+      for (let i = 1; i <= 9; i++) {
+        esriConfig.request.corsEnabledServers.push(`https://farm${i}.staticflickr.com/`);
+      }
+
+      const requests = [];
+      const radius = 0.5;
+
+      wayPoints.forEach((point) => {
+        const url = `https://api.flickr.com/services/rest/?
+          method=flickr.photos.search&api_key=d2eeadac35a3dfc3fb64a92e7c792de0&privacy_filter=1&accuracy=16
+          &has_geo=true&lon=${point[0]}&lat=${point[1]}&radius=${radius}
+          &per_page=1
+          &content_type=1
+          &license=1,2,3,4,5,6,7,8,9`;
+        requests.push(esriRequest(url, { responseType: "xml" }));
+      });
+
+      return all(requests).then((results) => {
+        results.forEach((result) => {
+          const photo = result.data.getElementsByTagName("photo");
+          if (photo.length > 0) {
+            this.photoList.push(photo[0]);
+          }
+        });
+      })
+      .then(() => {
+        return setImages(this);
+      });
     }
 
   }