AnsweredAssumed Answered

Legend widget for tiled map service

Question asked by fellj on Sep 12, 2016
Latest reply on Sep 13, 2016 by kenbuja

Does anyone have an example for the legend widget using a tiled map service?

 

When I try to load the legend using our tiled map service I don't see the map service initially nor does the legend display. Please help. See code below.

 

<!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>Tiled map service</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <style>
      html, body, #map{
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
      }
      #info{
        top: 0px;
        right: 0px;
        position: absolute;
        z-index: 99;
        opacity: 0.9;
        background-color: whitesmoke;
        border-bottom-left-radius: 8px;
        padding: 0px 0px 0px 10px;
      }
    </style>


    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
      var map;

      require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!", "esri/dijit/Legend"],
        function(Map, ArcGISTiledMapServiceLayer, Legend) {
          map = new Map("map", [{center: [ -96.851, 32.807 ]}]);
         


          var tiled = new ArcGISTiledMapServiceLayer("https://maps.dcad.org/prdwa/rest/services/Property/PropMap/MapServer");         
          map.addLayer(tiled);
         
          map.on("load", function(evt){
            var legend = new Legend({
              map: map,
            }, "legendDiv");
             
            legend.startup();
          });
        }
      );
    </script>

  </head>
  <body>
    <div id="map"></div>
    <div id="info"><div id="legendDiv"></div></div>
  </body>
</html>

Outcomes