ArcGIS in angular

1214
4
Jump to solution
06-02-2021 06:04 AM
Wasique
New Contributor

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

<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.3.css">
<link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.3.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">

<!--<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.15/"></script>-->
<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>

<body class="calcite-maps calcite-nav-top calcite-layout-small-title">

<nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark">

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

<div class="calcite-map calcite-map-absolute">
<div id="mapViewDiv"></div>
</div>

<script type="text/javascript">
var dojoConfig = {
packages: [
{ name: "bootstrap", location: "https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap" },
{ name: "calcite-maps", location: "https://esri.github.io/calcite-maps/dist/js/dojo" }]
};
</script>
<script src="https://js.arcgis.com/4.2/"></script>
<script>

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>

 

0 Kudos
1 Solution

Accepted Solutions
AndyGup
Esri Regular Contributor

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

4 Replies
AndyGup
Esri Regular Contributor

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
New Contributor

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:

<div #mapviewnode></div>

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

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();
}

0 Kudos
Wasique
New Contributor

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

0 Kudos
AndyGup
Esri Regular Contributor

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().

0 Kudos