Search code examples
angularjsangularjs-directiveesriarcgis-js-api

Display map using ArcGIS JS 4 API with AngularJS

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

Solution

  • 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>