Display map using ArcGIS JS 4 API with AngularJS

Question

I am new to ArcGIS JS so any help would be really appreciated.

As a starting point I want to display any map using ArcGIS js API 4 with AngularJS. Any pointers or examples would really help.

Thanks

Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Please read [What topics can I ask about here](http://stackoverflow.com/help/on-topic) and [How do I ask a good question](http://stackoverflow.com/help/how-to-ask) — Khalid Hussain, May 03 '16 at 03:22

score 1 · Accepted Answer · answered May 03 '16 at 05:14

Well, If you are looking straight directives of angularjs with esri map; Below is the sample for that.

To know more about angularjs with esri map please click here...

<!DOCTYPE html>
<html ng-app="esri-map-example">
    <head>
        <title>Angular Esri Quick Start</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
      <script src="//npmcdn.com/angular-esri-map@2.0.0-beta.2"></script>
        <link rel="stylesheet" href="//js.arcgis.com/4.0beta3/esri/css/main.css">
    </head>
    <body ng-controller="MapController as vm">
        <esri-scene-view map="vm.map" view-options="{scale: 50000000, center: [-101.17, 21.78]}">
        </esri-scene-view>

        <!-- load Esri JSAPI -->
        <script src="//js.arcgis.com/4.0beta3/"></script>
        <!-- load AngularJS -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
        <!-- load angular-esri-map -->
        <script src="//npmcdn.com/angular-esri-map@2.0.0-beta.2"></script>

        <script type="text/javascript">
            angular.module('esri-map-example', ['esri.map'])
                .controller('MapController', function(esriLoader) {
                    var self = this;
                    esriLoader.require(['esri/Map'], function(Map) {
                        self.map = new Map({
                            basemap: 'streets'
                        });
                    });
                });
        </script>
    </body>
</html>

I tried some directives from the link shared and it worked. This gives me a quick start. Thanks for the quick turnaround. — Hussain Moiz, May 03 '16 at 18:51
I guess i found some sample related to typesript and esri. please post a new question relevant to esri typescript. so that it can help others too. — Vikash Pandey, May 06 '16 at 05:37
well, I saw ur another question- http://stackoverflow.com/questions/37064891/convert-javascript-esri-map-controller-to-typescript... will get back to u.. — Vikash Pandey, May 06 '16 at 05:38

Vikash Pandey · Answer 2 · 2016-05-03T07:39:04.663

-1

Well, Below is the code to add map 3d map using ArcGIS JS API 4.0

for more details related to API and samples Please click here...

 require([
      "esri/Map",
      "esri/views/SceneView",
      "dojo/domReady!"
    ], function(Map, SceneView) {

      var map = new Map({
        basemap: "streets"
      });

      var view = new SceneView({
        container: "viewDiv",
        map: map,
        scale: 50000000,
        center: [-101.17, 21, 78]
      });

    });

 html,
    body {
      padding: 0;
      margin: 0;
    }

<link rel="stylesheet" href="https://js.arcgis.com/4.0beta3/esri/css/main.css">
  <script src="https://js.arcgis.com/4.0beta3/"></script>
<body>
  <div id="viewDiv"></div>
</body>

UPDATED

Above example is based on dojo framework because ARCGIS js api is tightly binded with dojo...

edited May 03 '16 at 07:39

answered May 03 '16 at 05:07

Vikash Pandey

5,407
6
41
42

You should explain in your answer that ArcGIS js API relies on the dojo framework, thus that your answer is not using Angular JS. – Marc_Alx May 03 '16 at 07:31
@Marc_Alx Yeah.. its true.. however esri maps is also available with angular.. my another answer explain that.. thats y i added two different answers.. – Vikash Pandey May 03 '16 at 07:37
still thanks i added that too in answer. :) – Vikash Pandey May 03 '16 at 07:39
check the question before writing an answer – ashif-ismail Oct 29 '18 at 09:25

Display map using ArcGIS JS 4 API with AngularJS

2 Answers2