Community

I cannot get my legend to load, any help is appreciated.

540
2
Jump to solution
05-03-2020 03:40 PM
CodyHilton
by
New Contributor II
‎05-03-2020 03:40 PM

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Proximity of Fastfood to Schools</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require(["esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend"
], function(Map, MapView, FeatureLayer, Legend){

var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 8,
center: [282.5, 39]
});

var publicschoolsLayer = new FeatureLayer({
url: "https://gis.mdfoodsystemmap.org/server/rest/services/FoodMapMD/Ret_MD_Food_Map_Services/MapServer/135"
});

map.add(publicschoolsLayer);

var fastfoodLayer = new FeatureLayer({
url: "https://gis.mdfoodsystemmap.org/server/rest/services/FoodMapMD/Ret_MD_Food_Map_Services/MapServer/123"
})

map.add(fastfoodLayer);

var legend = new Legend({
view: view,
layerInfos: [{
layer: featureLayer,
title: "Locations of FastFood and Schools"}
]
});

view.ui.add(legend, "bottom-right");


});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-03-2020 04:43 PM

Cody,

   This works. Your issue was that you were setting the layerInfos manually to a var called featureLayer which did not exist in your code.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>Proximity of Fastfood to Schools</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.15/"></script>
  <script>
    require(["esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Legend"
    ], function (Map, MapView, FeatureLayer, Legend) {

      var map = new Map({
        basemap: "streets"
      });
      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 8,
        center: [282.5, 39]
      });

      var publicschoolsLayer = new FeatureLayer({
        url: "https://gis.mdfoodsystemmap.org/server/rest/services/FoodMapMD/Ret_MD_Food_Map_Services/MapServer/135"
      });

      map.add(publicschoolsLayer);

      var fastfoodLayer = new FeatureLayer({
        url: "https://gis.mdfoodsystemmap.org/server/rest/services/FoodMapMD/Ret_MD_Food_Map_Services/MapServer/123"
      })

      map.add(fastfoodLayer);

      var legend = new Legend({
        view: view
      });

      view.ui.add(legend, "bottom-right");


    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

2 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-03-2020 04:43 PM

Cody,

   This works. Your issue was that you were setting the layerInfos manually to a var called featureLayer which did not exist in your code.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>Proximity of Fastfood to Schools</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.15/"></script>
  <script>
    require(["esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Legend"
    ], function (Map, MapView, FeatureLayer, Legend) {

      var map = new Map({
        basemap: "streets"
      });
      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 8,
        center: [282.5, 39]
      });

      var publicschoolsLayer = new FeatureLayer({
        url: "https://gis.mdfoodsystemmap.org/server/rest/services/FoodMapMD/Ret_MD_Food_Map_Services/MapServer/135"
      });

      map.add(publicschoolsLayer);

      var fastfoodLayer = new FeatureLayer({
        url: "https://gis.mdfoodsystemmap.org/server/rest/services/FoodMapMD/Ret_MD_Food_Map_Services/MapServer/123"
      })

      map.add(fastfoodLayer);

      var legend = new Legend({
        view: view
      });

      view.ui.add(legend, "bottom-right");


    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
CodyHilton
by
New Contributor II
‎05-03-2020 05:18 PM

Aw okay, I see now. Thank you so much!

0 Kudos