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

224
2
Jump to solution
05-03-2020 03:40 PM
CodyHilton
New Contributor II

<!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
MVP Esteemed Contributor

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
MVP Esteemed Contributor

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

CodyHilton
New Contributor II

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

0 Kudos