Community

Issue with my code

2229
12
Jump to solution
07-09-2019 01:02 AM
ShakyasinghMohapatra
by
New Contributor II
‎07-09-2019 01:02 AM

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‌

Tags (1)
Preview file
877 KB
0 Kudos
12 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎07-11-2019 07:40 AM

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.

ShakyasinghMohapatra
by
New Contributor II
‎07-11-2019 11:41 PM

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. 

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎07-12-2019 05:29 AM

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

0 Kudos