typescript

1300
1
05-12-2017 02:19 PM
UmeshManilal
New Contributor II

Hello everyone, I was trying to create a angular 4 application as part of POC, I was able to show esri map, but was not able to display the polygon in the map. Its not throwing any error. Below is the code which I had used. Could you let me know what's wrong in this?

 

export class EsriMapComponent implements OnInit {
  map: __esri.Map;
  mapView: __esri.MapView;
  polyLine: __esri.Polyline;

  @ViewChild('mapViewNode') private mapViewEl: ElementRef;

  constructor(private esriLoader: EsriLoaderService) {
  }

  public ngOnInit() {
    // only load the ArcGIS API for JavaScript when this component is loaded
    return this.esriLoader.load({
      // use a specific version of the JSAPI
      url: 'https://js.arcgis.com/4.3/'
    }).then(() => {
      // load the needed Map and MapView modules from the JSAPI
      this.esriLoader.loadModules([
        'esri/Map',
        'esri/views/MapView',
        'esri/geometry/Polyline',
        'esri/symbols/SimpleLineSymbol',
        "dojo/domReady!"
      ]).then(([
        Map,
        MapView,
        Polyline,
        SimpleLineSymbol
      ]) => {


        let mapProperties: __esri.MapProperties = {
          basemap: 'hybrid'
        };

        let map: __esri.Map = new Map(mapProperties);

        let mapViewProperties: __esri.MapViewProperties = {
          // create the map view at the DOM element in this component
          container: this.mapViewEl.nativeElement,
          // supply additional options
          //center: pointProperties,
          center:[-98, 49.5],
          zoom: 13,
          map: map // property shorthand for object literal

        };

        this.mapView = new MapView(mapViewProperties);

        this.polyLine=new Polyline({
          paths: [
            [-111.30, 52.68],
            [-98, 49.5],
            [-93.94, 29.89]
          ]
        });
      });
    });
  }
Tags (1)
0 Kudos
1 Reply
ThomasSolow
Occasional Contributor III

Based on your code you've created a new polyline geometry, but you aren't doing the necessary things to add it to the map.  You need to create a Graphic (esri/Graphic), which requires a geometry (which you have), and a symbol (probably a esri/symbols/SimpleLineSymbol).  Once you've created the graphic, you can add it with this.mapView.graphics.add(graphic);