I am using esri arcgis javascript 4.11 ,all the other things is walking but the LEGEND could not be added to the mapview this is the error "Export There seems to have been an error." is showing and all the layers are being added by clicking on checkbox.
<script src="https://js.arcgis.com/4.11/"></script>
<script>
let view;
require([
"esri/Map",
"esri/views/MapView",
"esri/WebMap",
"esri/widgets/ScaleBar",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery",
"esri/layers/FeatureLayer",
"esri/PopupTemplate",
"esri/widgets/Zoom",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/Graphic",
"esri/geometry/Geometry",
"esri/core/Accessor",
"esri/geometry/Extent",
"esri/symbols/SimpleLineSymbol",
"esri/layers/SceneLayer",
"esri/views/draw/Draw",
"esri/geometry/geometryEngine",
"esri/views/draw/PolygonDrawAction",
"esri/layers/support/Sublayer",
"esri/layers/ImageryLayer",
"esri/layers/MapImageLayer",
"esri/renderers/UniqueValueRenderer",
"esri/Viewpoint",
"esri/widgets/Legend",
"esri/widgets/Print",
"esri/widgets/Directions"
], function(Map, MapView,WebMap,ScaleBar,BasemapToggle,BasemapGallery,FeatureLayer,InfoTemplate,PopupTemplate,Zoom,QueryTask,Query,Graphic,Geometry,
Accessor,Extent,SimpleLineSymbol,SceneLayer,Draw,geometryEngine,PolygonDrawAction,Sublayer,ImageryLayer,MapImageLayer,
UniqueValueRenderer,Viewpoint,Legend,Print,Directions) {
var map = new Map({
basemap: "topo"
});
view = new MapView({
container: "viewDiv",
map: map,
center: [85.0985,20.5]
zoom: 8
});
var scaleBar = new ScaleBar({
view: view,
unit: "dual"
});
view.ui.add(scaleBar, {
position: "bottom-left"
});
view.when(function() {
var featureLayer = map.layers.getItemAt(0);
var legend = new Legend({
view: view,
layerInfos: [
{
layer: featureLayer,
title: "test"
}
]
});
view.ui.add(legend, "bottom-right");
});
var roadsLayer = new FeatureLayer("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", {
id : "roadLayerId",
outFields: ["*"],
popupTemplate: {
title: "NAME1 : {XXXXXXXX}:NAME: {XXXK}",
content: "TESTED"
}
});
$("#chkRoadLayer").click(function () {
if(!roadsLayer){
}else {
}
if ($(this).is(":checked")) {
map.add(roadsLayer,1);
} else {
map.layers.remove(roadsLayer);
}
});
//XXXXXXXXXXXXXXXXXXXXXXXXXXXX
//XXXXXXXXXXXXXXXXXXXXXXXXXXXX
//XXXXXXXXXXXXXXXXXXXXXXXXXXXX
//XXXXXXXXXXXXXXXXXXXXXXXXXXXX
//XXXXXXXXXXXXXXXXXXXXXXXXXXXX
//#other codes goes here
});
</script>
Solved! Go to Solution.
Shakyasingh,
This should get you going. I can not do all your coding for you so you should be able to take it from here.
<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> -->
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Insert title here</title>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="src/jquery.responsive-collapse.css" rel="stylesheet">
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<style>
body {
background-color: #fafafa;
font-family: 'Roboto';
}
h1 {
margin: 70px auto;
text-align: center;
}
.navbar-inverse .navbar-nav>li>a {
color: #FFF;
}
.navbar-inverse .navbar-brand {
color: #FFF;
}
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 20px;
line-height: 20px;
}
.basemapli {
padding-bottom: 5px;
width: 100%;
}
</style>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="src/jquery.responsive-collapse.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
let view;
let legend;
let print;
require([
"esri/Map",
"esri/views/MapView",
"esri/WebMap",
"esri/widgets/ScaleBar",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery",
"esri/layers/FeatureLayer",
"esri/PopupTemplate",
"esri/widgets/Zoom",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/geometry/Geometry",
"esri/geometry/Extent",
"esri/symbols/SimpleLineSymbol",
"esri/geometry/geometryEngine",
"esri/renderers/UniqueValueRenderer",
"esri/widgets/Print",
"esri/widgets/Legend",
], function (Map, MapView, WebMap, ScaleBar, BasemapToggle, BasemapGallery, FeatureLayer, PopupTemplate, Zoom,
QueryTask, Query, Geometry, Extent, SimpleLineSymbol, geometryEngine, UniqueValueRenderer, Print, Legend) {
$(".floatingDivs1").dialog({autoOpen: false, title: "Legend"});
$('ul.navbar-nav').responsiveCollapse();
var map = new Map({
basemap: "topo"
});
view = new MapView({
container: "viewDiv",
map: map,
center: [92.0985, 21.5],
zoom: 7
});
var scaleBar = new ScaleBar({
view: view,
unit: "dual"
});
view.ui.add(scaleBar, {
position: "bottom-left"
});
var toggle = new BasemapToggle({
view: view,
nextBasemap: "hybrid",
nextBasemap: "national-geographic"
});
view.ui.add(toggle, "top-right");
// Road Static
var roadsLayer = new FeatureLayer("https://services9.arcgis.com/XGrFB8X5mbDYsUfo/arcgis/rest/services/dis1/FeatureServer/0", {
id: "roads",
outFields: ["*"],
popupTemplate: {
title: "Test",
content: "Hello"
}
});
// SH Layer
var lakesLayer = new FeatureLayer("https://services.arcgis.com/P8Cok4qAP1sTVE59/arcgis/rest/services/BGD_lakes/FeatureServer/0", {
id: "Lakes",
outFields: ["*"],
popupTemplate: {
title: "Test",
content: "Hello"
}
});
$("#chkRoadLayer").click(function () {
if ($(this).is(":checked")) {
map.add(roadsLayer);
if(legend){
legend.layerInfos = [{
layer: roadsLayer,
title: "Roads"
}]
}else{
legend = new Legend({
view: view,
layerInfos: [{
layer: roadsLayer,
title: "Roads"
}],
container: "divContentDivisionLEGEND"
});
}
$(".floatingDivs1").dialog("open");
} else {
map.layers.remove(roadsLayer);
$(".floatingDivs1").dialog("close");
}
});
$("#chkLayerSTATE").click(function () {
if ($(this).is(":checked")) {
map.add(lakesLayer, 1);
if(legend){
legend.layerInfos = [{
layer: lakesLayer,
title: "Other Layer"
}]
}else{
legend = new Legend({
view: view,
layerInfos: [{
layer: lakesLayer,
title: "LEGEND"
}],
container: "divContentDivisionLEGEND"
});
}
$(".floatingDivs1").dialog("open");
} else {
map.layers.remove(lakesLayer);
$(".floatingDivs1").dialog("close");
}
});
});
</script>
</head>
<body class="calcite">
<div id="viewDiv" style="padding-top: 50px;"></div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"
style="background-color: #4c4c4c;width: 100%;padding-right: 0px;padding-left: 0px;float: left;">
<div class="navbar-header" style="float: left">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav" style="margin-right:125px;">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> Layers <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><input type="checkbox" id="chkRoadLayer" />Road</a></li>
<li><a href="#"><input type="checkbox" id="chkLayerSTATE" />STATE </a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> Additional Layers <b
class="caret"></b></a>
</li>
<li><a href="#" id="hrefLegend"><i class="fa fa-link"></i>Legend</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> Thematic Map<b
class="caret"></b></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> Search<b
class="caret"></b></a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') +
'.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- LEGEND STARTS -->
<div class="floatingDivs1" id="divFloatLEGEND">
<div id="divContentDivisionLEGEND"></div>
</div>
<!-- LEGEND ENDS -->
<!-- </div> -->
</body>
</html>
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
Thanks . Ok I will try . Can you suggest a book on esri arcgis javascript api
Actually I am searching the attributes and properties of the objects but could not get this from anywhere . that is the only problem otherwise I can do this easily but nothing is elaborately given in arcgis javascript api help.
Start a new thread with more details and the code you are attempting.