How to load WebMap from Arcgis Online or Portal using Angular TypeScript

[suresh.s...@gmail.com]

I am not able to load a webmap from Portal for ArcGis Server using ANgular TypeScript: Here is my Source Code:

esri-map.component.ts

--------------------------------------------------

import { Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';

import { loadModules } from 'esri-loader';

@Component({

  selector: 'app-esri-map',

  templateUrl: './esri-map.component.html',

  styleUrls: ['./esri-map.component.css']

})

export class EsriMapComponent implements OnInit {

  // this is needed to be able to create the MapView at the DOM element in this component

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

  constructor() { }

  ngOnInit() {

    loadModules([

      'esri/Map',

      'esri/views/MapView',

      'esri/WebMap',

    ])

      .then(([WebMap, MapView]) => {

      const map = new WebMap({

          basemap: 'streets',

        portalItem: {

      //  id: 'e691172598f04ea8881cd2a4adaa45ba',

        id: 'f2e9b762544945f390ca4ac3671cfa72',

 }

        });

 const mapView = new MapView({

        container: this.mapViewEl.nativeElement,

       //   center: [0.1278, 51.5074],

        //  zoom: 10,

          map: map

        });

}).catch(err => {

        // handle any errors

        console.error('error is:', err);

      });

  }

}

Can anyone help me to solve this issue?

Thanks, Waiting for your Response.

[Sander Elias]

Hi Suresh,

What is the actual problem you are facing? is there an error in the console? Doesn't it load?

Regards

Sander

[Suresh Kumar]

Hi Sander, & Angular Group,

Good Afternoon.

There is one Program in ArcGIS website explains about how to render ArcGIS Map using html/Script code:

Please find attached index.html. Double Click on html file you can find webmap rendering from ArcGIS Online.

I am working for a project using Angular with ArcGIS. So, HTML/Script functionality need to be implemented through Angular TypeScript. I have written the following Type Script to do the same. But I am not able to render the web map from ArcGIS Online using App Id. Below is the Program.:

esri-map.component.html

----------------------------------

<!-- Here's the DIV that we inject the map into -->

<h3>Here is the Map: </h3>

<div #mapViewNode></div>

esri-map.component.ts

------------------------------

import { Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';

import { loadModules } from 'esri-loader';

@Component({

  selector: 'app-esri-map',

  templateUrl: './esri-map.component.html',

  styleUrls: ['./esri-map.component.css']

})

export class EsriMapComponent implements OnInit {

  // this is needed to be able to create the MapView at the DOM element in this component

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

  constructor() { }

  ngOnInit() {

    loadModules([

      'esri/Map',

      'esri/views/MapView',

      'esri/WebMap',

    ])

      .then(([WebMap, MapView]) => {

        // create a Map loaded from a webmap

        const map = new WebMap({

//          basemap: 'streets',

        portalItem: {

            id: 'f2e9b762544945f390ca4ac3671cfa72',

        }

        });

        const mapView = new MapView({

        container: this.mapViewEl.nativeElement,

       //   center: [0.1278, 51.5074],

        //  zoom: 10,

          map: map

        });

 }).catch(err => {

        // handle any errors

        console.error('error is:', err);

      });

  }

}

There is no compilation error.

Output is:

Can you please help me to solve the issue? Why my typescript is not rendering the web map from ArcGIS Online.

Thanking you in advance. Waiting for your response.

Regards,

M. Suresh Kumar

9910654993

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Suresh,

It seems to work for me in a stackblitz

Did you set a height for your holding element?

Regards

Sander