topic Re: Issue with my code in ArcGIS JavaScript Maps SDK Questions

Issue with my code

ShakyasinghMohapatra — Sun, 12 Dec 2021 03:52:12 GMT

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

Robert Scheitlin, GISP‌

Re: 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 checkb

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:52:15 GMT

There is an issue with your require array.

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

function(Map, MapView,WebMap,ScaleBar,BasemapToggle,BasemapGallery,FeatureLayer,InfoTemplate,PopupTemplate,Zoom,Query‍

Notice: InfoTemplate in your function parameters then PopupTemplate but you do not have a InfoTemplate module in the array so your function parameters are out of sync. Just remove "InfoTemplate" from your function parameters and you will be good.

Re: 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 checkb

ShakyasinghMohapatra — Wed, 10 Jul 2019 11:42:04 GMT

Thanks Robert

And below is the code to see the legend on click on checkbox and it is working but Is this correct procedure or not ?

And another thing the same error for Print widget "Export There seems to have been an error." also coming . please suggest

$("#chkRoadLayer").click(function () {
   if ($(this).is(":checked")) {
               map.add(roadsLayer);
               view.when(function() {
                     legend = new Legend({
                     view: view,
                     layerInfos: [{
                           layer: roadsLayer,
                           title: "LEGEND"
                     }]
                  });
            view.ui.add(legend, "bottom-right");
         });

} else {
      map.layers.remove(roadsLayer);
      legend.destroy();
   }
   });

// For print widget I using the code as below

var print = new Print({
view: view
});
view.ui.add(print, {
position: "bottom-left"
});

Re: Issue with my code

RobertScheitlin__GISP — Wed, 10 Jul 2019 13:08:20 GMT

You are waiting for the view to be ready before you do the print code right? I.e view.when(function() {

Re: Issue with my code

ShakyasinghMohapatra — Wed, 10 Jul 2019 13:11:25 GMT

yes

Re: Issue with my code

ShakyasinghMohapatra — Wed, 10 Jul 2019 13:18:27 GMT

Actually I could not able to understand the structure of the arcgis javascript api thoroughly . So could not able to get the errors.

Re: Issue with my code

RobertScheitlin__GISP — Wed, 10 Jul 2019 13:30:36 GMT

It would be best for you to provide your full html page for review.

Re: Issue with my code

ShakyasinghMohapatra — Wed, 10 Jul 2019 13:35:01 GMT

Re: Issue with my code

ShakyasinghMohapatra — Thu, 11 Jul 2019 11:50:17 GMT

I actually want to show the legend info after clicking the legend button but I could not set the layer info of legend object after creating the object globally , Then I just tested using view.when(function() {})

I am sending you the code

Re: Issue with my code

ShakyasinghMohapatra — Thu, 11 Jul 2019 12:30:55 GMT

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Insert title here</title>

legend = new Legend({
view: view,

layerInfos: [
{
layer: roadsLayer,
title: "LEGEND"
}
]
});
// Add widget to the bottom right corner of the view
view.ui.add(legend, "bottom-right");
});

} else {
map.layers.remove(roadsLayer);
legend.destroy();
}
});
$("#chkLayerSTATE").click(function () {
if(!shLayer){
}
else{}
if ($(this).is(":checked")) {
map.add(shLayer,1);

view.when(function() {
// get the first layer in the collection of operational layers in the WebMap
// when the resources in the MapView have loaded.
//var featureLayer = map.layers.getItemAt(0);
//legend.startup();
legend = new Legend({
view: view,

layerInfos: [
{
layer: shLayer,
title: "LEGEND"
}
]
});
// Add widget to the bottom right corner of the view
view.ui.add(legend, "bottom-right");
});
//alert(legend.layerInfos[1].layer.attributionDataUrl);
//var result = JSON.stringify(legend);
//console.log("legendobject",legend);
$("#divContentDivisionLEGEND").text(legend);
} else {
map.layers.remove(shLayer);
legend.destroy();
}
});

});

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

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>

Re: Issue with my code

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:52:19 GMT

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.

Re: Issue with my code

ShakyasinghMohapatra — Fri, 12 Jul 2019 06:41:24 GMT

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.

Re: Issue with my code

RobertScheitlin__GISP — Fri, 12 Jul 2019 12:29:23 GMT

Start a new thread with more details and the code you are attempting.