topic Re: How to embed Legend on to the map. Javascript 3.27 in ArcGIS JavaScript Maps SDK Questions

How to embed Legend on to the map. Javascript 3.27

MatthewBarr6 — Mon, 25 Feb 2019 13:42:18 GMT

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,

Re: How to embed Legend on to the map. Javascript 3.27

RobertScheitlin__GISP — Sat, 11 Dec 2021 15:57:37 GMT

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

Re: How to embed Legend on to the map. Javascript 3.27

MatthewBarr6 — Mon, 25 Feb 2019 15:41:00 GMT

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

Re: How to embed Legend on to the map. Javascript 3.27

RobertScheitlin__GISP — Mon, 25 Feb 2019 15:42:15 GMT

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

Re: How to embed Legend on to the map. Javascript 3.27

MatthewBarr6 — Mon, 25 Feb 2019 15:47:04 GMT

Just did, thanks again! Have a great day!