I am working on trying to display a featurelayer with a legend in a simple map. The html page contains a map, a title block and a div to hold the legend which all display correctly. The problem is when I add the code to include the legend, the legend is added to the map, but not in the div in the position as was set up with css. I've attached the code along with two images showing the map (before) as designed and (after) as it appears when adding the legend.
Any help is appreciated.
George Hilton
Town of Queensbury, NY
BEFORE IMAGE: 
AFTER IMAGE: 
<!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>Feature Layer Hover</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<style>
html, body, #map {
height:100%;
width:100%;
margin:0;
padding:0;
}
#title{
position: absolute;
width: 420px;
height: 50px;
left: 20px;
top: 20px;
background-color:white;
text-align: center;
padding-top: 2px;
border: 1px solid black;
border-radius: 5px;
z-index: 6;
}
p {
font-size: 18px;
font-weight: bold;
color: #2F4F4F;
}
#legenddiv {
position: absolute;
right: 5px;
bottom: 20px;
height: 400px;
width: 300px;
background-color: white;
border: 1px solid grey;
border-radius: 5px;
z-index: 6;
}
</style>
<script src="https://js.arcgis.com/3.16/"></script>
<script>
var map;
var pLayer;
require([
"esri/map",
"esri/dijit/Legend",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/ClassBreaksRenderer",
"esri/dijit/Popup",
"dojo/parser",
"esri/Color",
"dojo/domReady!"
], function (
Map, Legend, FeatureLayer, SimpleFillSymbol,
SimpleLineSymbol, ClassBreaksRenderer, Popup, parser,
Color, domConstruct
) {
parser.parse();
map = new Map("map", {
basemap: "streets",
center: [-73.68, 43.35],
zoom: 11,
slider: false,
showAttribution: false,
logo: false
});
var symbol = new SimpleFillSymbol();
symbol.setColor(new Color([150, 150, 150, 0.5]));
var renderer = new ClassBreaksRenderer(symbol, "POPSQMI");
renderer.addBreak(0, 100, new SimpleFillSymbol().setColor(new Color([56, 168, 0, 0.5])));
renderer.addBreak(100, 500, new SimpleFillSymbol().setColor(new Color([139, 209, 0, 0.5])));
renderer.addBreak(500, 1000, new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
renderer.addBreak(1000, 1500, new SimpleFillSymbol().setColor(new Color([255, 128, 0, 0.5])));
renderer.addBreak(1500, Infinity, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
var pLayer = new FeatureLayer("http://toqgis.queensbury.net/arcgis/rest/services/Population_Density/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: "*",
opacity: 0.6
});
pLayer.setRenderer(renderer);
map.on("layers-add-result", layersadded);
map.addLayers([pLayer]);
function layersadded() {
console.log("added");
// UNCOMMENTING THIS SECTION CAUSES LEGEND TO DISPLAY BUT ABOVE MAP AND NOT IN LEGENDIV AS POSITIONED WITH CSS
//var mlegend = new Legend({
// map: map,
//layerInfos: [{
// layer: pLayer,
// title: "Interactive Map Layers"
// }]
// }, "legenddiv");
// mlegend.startup();
}
});
</script>
</head>
<body class="claro">
<div id="map">
<div id="title">
<p>Queensbury Population Density: Persons per Sq. Mi.</p>
</div>
<div id="legenddiv">
</div>
</div>
</body>
</html>
Accepted Solutions
