How to embed Legend on to the map. Javascript 3.27

877
4
Jump to solution
02-25-2019 05:42 AM
MatthewBarr6
New Contributor

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,

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
MatthewBarr6
New Contributor

Just did, thanks again! Have a great day!

0 Kudos