Update code to Ionic 4

andygup · Feb 14, 2019 · c24b91e · c24b91e
1 parent 77e41c1
commit c24b91e
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 115 deletions.
diff --git a/README.md b/README.md
@@ -10,34 +10,33 @@ For a more complete Angular sample you should also check out: https://github.com
 * Create an Ionic project. It can be either android or iOS
 
 ```
-	npm install –g cordova ionic
+	npm install -g ionic
 	ionic start testApp tabs
 	cd testApp
-	ionic cordova platform add android
+  ionic cordova prepare android
 	npm install esri-loader
 ```
 
 * Run a quick test to make sure that boilerplate Ionic project loaded but running `ionic serve` from your projects
 roots directory. If you don't get a web page launch then look for errors, something didn't install right.
-* Then copy `index.html`, `home.html` and `home.ts` from this repo to their respective directories in your new project.
+* Then copy `index.html`, `tab1.page.html` and `tab1.page.ts` from this repo to their respective directories in your new project.
 * Then build or run your project
 
 ```
-	ionic cordova build android 
-	ionic cordova run android
+  ionic cordova run android -1
 ```
 
 * Be sure to test your app on a native device!
 
 
 # Notes
 * Last tested using
-  - Ionic 3.20.0, 
-  - Angular Core 5.2.11, 
-  - Cordova 8.0.0, 
-  - Cordova android 7.0.0,
-  - Device OS: Android 8.1.0,
-  - esri-loader: 2.4.0 
+  - Ionic CLI 4.10.2 
+  - Angular 7.2.4, 
+  - Cordova 8.1.2, 
+  - Cordova android 7.1.4,
+  - Device OS: Android 9,
+  - esri-loader: 2.6.0 
 * Not getting a location result in Android - do the following steps:
 	* If you are using Android Studio look for errors in Android Monitor. You may have also gotten an application alert box when the `watchPosition()` request timed out.
 	* Add these permissions to the `AndroidManifest.xml file`. You can find it under `/<your_project_directory>/platforms/android/`:

diff --git a/app/tab1/tab1.page.html b/app/tab1/tab1.page.html
@@ -0,0 +1,21 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Map Tab
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-card class="welcome-card">
+    <ion-img src="/assets/shapes.svg"></ion-img>
+    <ion-card-header>
+      <ion-card-title>Welcome to Ionic</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p>This app shows how use Ionic with the ArcGIS API for JavaScript</p>
+    </ion-card-content>
+  </ion-card>
+
+  <div id="map" #map ></div>
+</ion-content>
diff --git a/app/tab1/tab1.page.ts b/app/tab1/tab1.page.ts
@@ -0,0 +1,51 @@
+import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
+
+import { Platform } from '@ionic/angular';
+
+import { loadModules } from 'esri-loader';
+
+@Component({
+    selector: 'app-tab1',
+    templateUrl: 'tab1.page.html',
+    styleUrls: ['tab1.page.scss']
+})
+export class Tab1Page implements OnInit{
+
+    @ViewChild('map') mapEl: ElementRef;
+
+    constructor( public platform: Platform) {}
+
+    async getGeo() {
+
+        // Reference: https://ionicframework.com/docs/api/platform/Platform/#ready
+        await this.platform.ready();
+
+        // Load the ArcGIS API for JavaScript modules
+        const [Map, MapView]:any = await loadModules([
+            'esri/Map',
+            'esri/views/MapView'
+        ])
+            .catch(err => {
+                console.error('ArcGIS: ', err);
+            });
+
+        console.log('Starting up ArcGIS map');
+
+        let map = new Map({
+            basemap: 'hybrid'
+        });
+
+        // Inflate and display the map
+        let mapView = new MapView({
+            // create the map view at the DOM element in this component
+            container: this.mapEl.nativeElement,
+            center: [-12.287, -37.114],
+            zoom: 12,
+            map: map
+        });
+    }
+
+    ngOnInit() {
+        this.getGeo();
+    }
+}
diff --git a/index.html b/index.html
@@ -1,16 +1,23 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
+<html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <title>ArcGIS + ArcGIS App</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <meta name="format-detection" content="telephone=no">
-  <meta name="msapplication-tap-highlight" content="no">
+  <meta charset="utf-8" />
+  <title>ArcGIS Mapping App</title>
+
+  <base href="/" />
+
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="format-detection" content="telephone=no" />
+  <meta name="msapplication-tap-highlight" content="no" />
 
-  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
-  <link rel="manifest" href="manifest.json">
+  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
 
-  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
+  <!-- add to homescreen for ios -->
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
 
   <style>
     html, body, #map {
@@ -20,38 +27,10 @@
       width: 100%;
     }
   </style>
-
-  <meta name="theme-color" content="#4e8ef7">
-
-  <!-- cordova.js required for cordova apps -->
-  <script src="cordova.js"></script>
-
-  <!-- un-comment this code to enable service worker
-  <script>
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('service-worker.js')
-        .then(() => console.log('service worker installed'))
-        .catch(err => console.log('Error', err));
-    }
-  </script>-->
-
-  <link href="build/main.css" rel="stylesheet">
-
 </head>
-<body>
-
-  <!-- Ionic's root component and where the app will load -->
-  <ion-app>ArcGIS Ionic Demo</ion-app>
-
-  <!-- The polyfills js is generated during the build process -->
-  <script src="build/polyfills.js"></script>
-
-  <!-- The vendor js is generated during the build process
-     It contains all of the dependencies in node_modules -->
-  <script src="build/vendor.js"></script>
-
-  <!-- The bundle js is generated during the build process -->
-  <script src="build/main.js"></script>
 
+<body>
+<app-root></app-root>
 </body>
+
 </html>
diff --git a/pages/home/home.html b/pages/home/home.html
diff --git a/pages/home/home.ts b/pages/home/home.ts