ArcGIS in angular

Wasique · ‎06-02-2021

HI Team, This is Mohd Talib and i want some clarification in ArcGIS, So the problem is i already use ArcGIS JavaScript Web Map in our HTML page using ArcGIS code but i need to convert this in Angular so can u pls help for this how can i do and what library we need to installed, its our just small page and only one map there i am using feature layer so pls how can i convert this ArcGIs Angular. Find below my HTML file where I wrote the code. That file txt file but u can save in HTML and test.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="ArcGIS JS v4, Calcite Maps and Bootstrap">

<style>
html,
body {
margin: 0;
padding: 0;
height: 25%;
width: 30%;
}
</style>
<style>

tr:nth-child(even) {
background-color: #dddddd;
}

.myclass1 {
height: 110px;
width: 200px;
}

.btn {
width: 160px;
}

</style>

</head>

<div class="dropdown calcite-dropdown calcite-text-dark calcite-bg-light" role="presentation">
<a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="true">
<div class="calcite-dropdown-toggle">
<span class="sr-only">Toggle dropdown menu</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
<ul class="dropdown-menu">
</ul>
</div>

</nav>

require([
"esri/views/MapView",
"esri/WebMap",
"esri/layers/FeatureLayer",
"esri/renderers/UniqueValueRenderer",
"esri/symbols/SimpleLineSymbol",
"esri/widgets/LayerList",
"dojo/query",
"bootstrap/Collapse",
"bootstrap/Dropdown",
"calcite-maps/calcitemaps-v0.3",
"dojo/dom",
"dojo/domReady!"

], function (
MapView,
WebMap,
FeatureLayer,
UniqueValueRenderer,
SimpleLineSymbol,
LayerList,
query,
dom
) {
var layer = new FeatureLayer({
//url: "https://services6.arcgis.com/KA88lzxweZ86kjDY/arcgis/rest/services/OHareAirPort/FeatureServer",
//url: "https://services6.arcgis.com/KA88lzxweZ86kjDY/arcgis/rest/services/OHareAirA/FeatureServer",
url: "https://services6.arcgis.com/KA88lzxweZ86kjDY/arcgis/rest/services/OHaresMap_WFL1/FeatureServer",
// url: "https://services6.arcgis.com/KA88lzxweZ86kjDY/arcgis/rest/services/Map/FeatureServer",
outFields: ["*"]
});
var webmap = new WebMap({

//portalItem: { id: "8e3ee993cb2642f6aad2f42dcf41c311" }
// portalItem: { id: "5c945164c2c94f2097c83fcffe76af27" }
// portalItem: { id: "c3cde5f60f9e4a2b9399a49ec058a230" }
portalItem: { id: "6376d7dafbf04761bd460c44dc2d2494" }
});

var mapView = new MapView({
container: "mapViewDiv",
map: webmap,
padding: { top: 25, bottom: 0 },
//center: [-118.80500,34.02700],
zoom: 13
});

mapView.then(function () {
var layerList = new LayerList({
view: mapView
});
mapView.ui.add(layerList, "top-right");
});

});

</script>
</body>
</html>

AndyGup · ‎06-02-2021

Hi @Wasique can you upgrade the app from 4.2 to 4.19? Version 4.2 was retired in December of last year. Also, calcite-maps is retired.

For integration with Angular (latest) we recommend using ES module and you can find an example here: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli. Otherwise, if you can't upgrade and need to stick with AMD modules, then we recommend using the esri-loader library, here's an unmaintained example: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli

View solution in original post

AndyGup · ‎06-02-2021

Hi @Wasique can you upgrade the app from 4.2 to 4.19? Version 4.2 was retired in December of last year. Also, calcite-maps is retired.

For integration with Angular (latest) we recommend using ES module and you can find an example here: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli. Otherwise, if you can't upgrade and need to stick with AMD modules, then we recommend using the esri-loader library, here's an unmaintained example: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli

Wasique · ‎06-10-2021

Thanku so much for help but after using this Git code in my visual studio i get one more issue that is "Cannot read property 'nativeElement' of undefined"

and one more question: Can this map div is supported under <ng-template><div #mapviewnode></div></ng-template>

==================

component.html page:

====================

component.ts page:

@ViewChild('mapViewNode', { static: true }) private mapViewEl: ElementRef;

initializeMap(): Promise<any> {
debugger
const container = this.mapViewEl.nativeElement;
const layer = new FeatureLayer({
url: "https://services6.arcgis.com/KA88lzxweZ86kjDY/arcgis/rest/services/OHaresMap_WFL1/FeatureServer",
outFields: ["*"]
});
const webmap = new WebMap({
portalItem: {
id: '6376d7dafbf04761bd460c44dc2d2494',
},
});
const view = new MapView({
container,
map: webmap,

});
view.when(function () {
var layerList = new LayerList({
view: view
});
view.ui.add(layerList, "top-right");
});
// const bookmarks = new Bookmarks({
// view,
// // allows bookmarks to be added, edited, or deleted
// editingEnabled: true,
// });

// const bkExpand = new Expand({
// view,
// content: bookmarks,
// expanded: true,
// });

// Add the widget to the top-right corner of the view
//view.ui.add(bkExpand, 'top-right');

// bonus - how many bookmarks in the webmap?
webmap.when(() => {
if (webmap.bookmarks && webmap.bookmarks.length) {
console.log('Bookmarks: ', webmap.bookmarks.length);
} else {
console.log('No bookmarks in this webmap.');
}
});

this.view = view;
return this.view.when();
}

ryanmz1 · ‎05-23-2023

there is a typo: 'mapviewnode' in html but 'mapViewNode' in component

component.html page:

component.ts page:

@ViewChild('mapViewNode')

esm-samples/jsapi-angular-cli/src/app/app.component.html

AndyGup · ‎05-23-2023

Thanks for reporting. They look the same to me on the repo's 'main' branch and the sample started up okay with no errors.

@ViewChild('mapViewNode', { static: true }) private mapViewEl!: ElementRef;

Wasique · ‎06-10-2021

const container = this.mapViewEl.nativeElement; (Cannot read property 'nativeElement' of undefined)

AndyGup · ‎06-10-2021

This sounds like a life-cycle issue with the mapping component. If you are using ngOnInit() you might need to try switching to using ngAfterViewInit().

PriyaM

hi @Wasique, @AndyGup ,

As this post seems like you're integrating webmap in angular, right?..like this can we integrate other dashboard components such as serial line chart,table and richtext in angular.. If yes..Can u guide me, how to do that?