topic Re: legend not displaying in div correctly in ArcGIS JavaScript Maps SDK Questions

legend not displaying in div correctly

GeorgeHilton__GISP — Wed, 06 Jul 2016 17:10:07 GMT

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>

<title>Feature Layer Hover</title>

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

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>

<p>Queensbury Population Density: Persons per Sq. Mi.</p>

</div>

</div>

</body>

</html>

Re: legend not displaying in div correctly

RobertScheitlin__GISP — Sat, 11 Dec 2021 18:48:27 GMT

George,

When working with most dijits you want to add a container div that has all the positioning, etc and then add a child div to it that will be assigned to the dijit.

<!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;
        }

        #legendcontdiv {
            position: absolute;
            right: 5px;
            bottom: 20px;
            height: 400px;
            width: 300px;
            background-color: white;
            border: 1px solid grey;
            border-radius: 5px;
            z-index: 6;
            padding: 12px;
        }
    </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
        ) {

            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() {
                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="legendcontdiv">
          <div id="legenddiv"></div>
        </div>
    </div>
</body>

</html>

Re: legend not displaying in div correctly

GeorgeHilton__GISP — Wed, 06 Jul 2016 18:14:34 GMT

Robert,

Thank you for your quick response. The container div worked perfectly.

George