How to embed Legend on to the map. Javascript 3.27

MatthewBarr6 · ‎02-25-2019

I am currently scripting out my first webmap with the Javascript API. So far I am able to add my basemap, feature layers, zoom tool, home button, and search bar.

I am getting stuck on the legend. This is the only example I was able to find for the 3.27 API.

Legend | ArcGIS API for JavaScript 3.27

The problem is that I don't want a content pane on the right side, I would like to be able to embed my legend at the bottom left of the map and then alter the way to it looks from there.

Is there any examples online that I am missing that show how to do this? I am using the 3.27 Javascript API.

Thanks,

RobertScheitlin__GISP · ‎02-25-2019

Matthew,

Here is a sample for that:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>FeatureLayer On Demand</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.27/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      
      #legendDiv {
        position:absolute !important;
        right:20px;
        top:10px;
        z-Index:999;
        width: 200px;
        height: 200px;
        background-color: white;
        padding:8px;
      }
    </style>
    <script src="https://js.arcgis.com/3.27/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/dijit/Legend", "dojo/_base/array",
        "dojo/parser", "dojo/domReady!"
      ], function(
        Map, InfoTemplate, FeatureLayer, Legend, arrayUtils,
        parser
      ) {
        parser.parse();
        map = new Map("mapDiv", {
          basemap: "national-geographic",
          center: [-96.541, 38.34],
          zoom: 6
        });

        map.on("load", initOperationalLayer);

        function initOperationalLayer() {
          var infoTemplate = new InfoTemplate("${state_name}", "Population (2000):  ${pop2000:NumberFormat}");
          var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"],
            infoTemplate: infoTemplate
          });

          map.addLayers([featureLayer]);
          map.infoWindow.resize(155,75);
          
          map.on("layers-add-result", function (evt) {
            var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
              return {layer:layer.layer, title:layer.layer.name};
            });
            if (layerInfo.length > 0) {
              var legendDijit = new Legend({
                map: map,
                layerInfos: layerInfo
              }, "legendDiv");
              legendDijit.startup();
            }
          });
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="mapDiv">
      <div id="legendDiv"></div>
    </div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎02-25-2019

Matthew,

Here is a sample for that:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>FeatureLayer On Demand</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.27/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      
      #legendDiv {
        position:absolute !important;
        right:20px;
        top:10px;
        z-Index:999;
        width: 200px;
        height: 200px;
        background-color: white;
        padding:8px;
      }
    </style>
    <script src="https://js.arcgis.com/3.27/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/dijit/Legend", "dojo/_base/array",
        "dojo/parser", "dojo/domReady!"
      ], function(
        Map, InfoTemplate, FeatureLayer, Legend, arrayUtils,
        parser
      ) {
        parser.parse();
        map = new Map("mapDiv", {
          basemap: "national-geographic",
          center: [-96.541, 38.34],
          zoom: 6
        });

        map.on("load", initOperationalLayer);

        function initOperationalLayer() {
          var infoTemplate = new InfoTemplate("${state_name}", "Population (2000):  ${pop2000:NumberFormat}");
          var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"],
            infoTemplate: infoTemplate
          });

          map.addLayers([featureLayer]);
          map.infoWindow.resize(155,75);
          
          map.on("layers-add-result", function (evt) {
            var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
              return {layer:layer.layer, title:layer.layer.name};
            });
            if (layerInfo.length > 0) {
              var legendDijit = new Legend({
                map: map,
                layerInfos: layerInfo
              }, "legendDiv");
              legendDijit.startup();
            }
          });
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="mapDiv">
      <div id="legendDiv"></div>
    </div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

MatthewBarr6 · ‎02-25-2019

Thank you this is exactly what I needed! I really appreciate your time and effort!

RobertScheitlin__GISP · ‎02-25-2019

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

MatthewBarr6 · ‎02-25-2019

Just did, thanks again! Have a great day!