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>
