AnsweredAssumed Answered

How to add feature layer to AngularJS Ionic?

Question asked by ANS_dev on Nov 8, 2017

I want to show a web-map including feature layer in my hybrid app.

 

Therefore, I followed instructions here: GitHub - jwasilgeo/ionic-esri-map: An Ionic app demonstrating how to use the Esri ArcGIS API for JavaScript. 

 

I renamed the fullscreen.html to index.html.

In addition, I added zoom and extent (which works).

 

However, adding the feature layer doesn't work. Any suggestions how to add a feature layer correctly? Or can I add the webmap (with the feature layer) itself?

 

Thanks in advance!

 

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
   <title></title>

   <meta http-equiv="Content-Security-Policy"
               content="
               default-src
                  'self'
                  http://js.arcgis.com
                  http://static.arcgis.com
                  http://services.arcgisonline.com
                  http://server.arcgisonline.com;
               font-src
                  'self'
                  http://js.arcgis.com
                  data:;
               style-src 'self' http://js.arcgis.com 'unsafe-inline';
               script-src 'self' http://js.arcgis.com http://unpkg.com 'unsafe-eval'">

 

   <link href="lib/ionic/css/ionic.css" rel="stylesheet">

   <!-- load Esri CSS -->
   <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">

   <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
   <link href="css/ionic.app.css" rel="stylesheet">
   -->

 

   <style>
      html, body, #esriMap {
      padding: 0;
      margin: 0;
      height: 100%;
      }
   </style>

 

   <!-- ionic/angularjs js -->
   <script src="lib/ionic/js/ionic.bundle.js"></script>

   <!-- cordova script (this will be a 404 during development) -->
   <script src="cordova.js"></script>

   <!-- load Esri JSAPI -->
   <script src="http://js.arcgis.com/3.16/"></script>
   <!-- load angular-esri-map -->
   <script src="http://unpkg.com/angular-esri-map@1"></script>

   <!-- your app's js -->
   <script src="js/fullscreen/app.js"></script>
   <script src="js/fullscreen/controllers.js"></script>
   <script src="js/fullscreen/services.js"></script>
</head>
<body ng-app="starter">

   <esri-map
      id = "esriMap"
      map-options="{
         basemap : 'topo',
         center: [4.91, 52.36],
         zoom: 13
         }"
      >
      <esri-feature-layer
         url='https://services8.arcgis.com/QVnoktcHDRrlMUCe/arcgis/rest/services/Panden_Amsterdam/FeatureServer/0'
      >
      </esri-feature-layer>
   </esri-map>

</body>
</html>

Outcomes