1

Looking for some help regarding adding a Legend to my GIS application. I'm using the Javascript API for ArcGIS. I think it's a problem with my div tags.

<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>Simple Map</title>
        <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
        <style>
            html, body, #map {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #rightPane {
                width: 20%;
            }

            #legendPane {
                border: solid #97DCF2 1px;
            }
        </style>
        <script src="https://js.arcgis.com/3.17/"></script>
        <script type="text/javascript">
            var map;

            require(["esri/map", 
            "esri/layers/ArcGISDynamicMapServiceLayer", 
            "esri/dijit/Legend",
            "esri/dijit/LayerList",
            "dojo/domReady!",
            "dojo/dom",
            "dojo/dom-construct",
            "dojo/parser",
            "dojo/_base/array",
            "dijit/form/CheckBox",
            "dijit/layout/AccordionContainer",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "esri/arcgis/utils",
            "esri/arcgis/arrayUtils",
            "dojo/parser",
            "dojo/dom-construct"], 
            function(Map, ArcGISDynamicMapServiceLayer, Legend, arrayUtils, ContentPane, BorderContainer, parser, domConstruct) {
                parser.parse();


                map = new Map("map", {
                    center : [-76.029214, 38.460648],
                    zoom : 10
                });


                var Basemap = new ArcGISDynamicMapServiceLayer("http://(MyServer)/arcgis/rest/services/Basemaps/BaseMap/MapServer");
                map.addLayers([Basemap]);

                var Lines = new ArcGISDynamicMapServiceLayer("http://(MyServer)/arcgis/rest/services/Basemaps/Lines/MapServer");
                map.addLayers([Lines])

                var Flood = new ArcGISDynamicMapServiceLayer("http://(MyServer)/arcgis/rest/services/Basemaps/FloodMap/MapServer");
                map.addLayers([Flood])

                //adds legend
                map.on("layers-add-result", function(evt) {
                    var layerInfo = arrayUtils.map(evt.layers, function(layer, index)
                        return {layer:layer.layer, title:layer.layer.name};
                        });
                    if (layerInfo.length > 0) {
                        var legendDijit = new legend({
                            map: map,
                            layerInfos: layerInfo
                            }, "legendDiv");
                            legendDijit.startup();
                        }
                    });


            });

        </script>
    </head>

    <body>
        <div id="content" style="width: 100%; height: 100%; margin: 0;"
        data-dojo-type="dijit/layout/BorderContainer"
        data-dojo-props="design:'headline', gutters:true" >

            <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">

                <div data-dojo-type="dijit/layout/AccordionContainer">
                    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Legend', selected:true">
                        <div id="legendDiv"></div>
                    </div>
                    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Pane 2'">
                        GIS Viewer

                    </div>
                </div>
            </div>

            <div id="map"
            data-dojo-type="dijit/layout/ContentPane"
            data-dojo-props="region:'center'"
            style="overflow:hidden;"></div>
        </div>
    </body>
</html>
1

To start with you need to have an argument declared in your function for every module that you want to load (except for plugins like domReady!, plugins are denoted by the !), it's also important that they are in the same order and that they are only listed once. For example:

require(["esri/map", 
        "esri/layers/ArcGISDynamicMapServiceLayer", 
        "esri/dijit/Legend",
        "esri/dijit/LayerList",
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/parser",
        "dojo/_base/array",
        "dijit/form/CheckBox",
        "dijit/layout/AccordionContainer",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "esri/arcgis/utils",
        "esri/arcgis/arrayUtils",
        "dojo/domReady!"], 
        function(Map, ArcGISDynamicMapServiceLayer, Legend, 
            LayerList, Dom, dc, parser, domArray, CheckBox, 
            AccordionContainer, BorderContainer, ContentPane, utils, arrayUtils) {
            parser.parse();

You can use any name to represent any module but then you need to make sure you reference it accordingly in the code. The plugins need to be listed last, if you list them in the middle then the alignment is out of order. See here. Also here is a great example of a legend if you haven't seen it.

EDIT:

<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>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #rightPane {
            width: 20%;
        }

        #legendPane {
            border: solid #97DCF2 1px;
        }
    </style>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script type="text/javascript">
        var map;

        require(["esri/map", 
    "esri/layers/ArcGISDynamicMapServiceLayer", 
    "esri/dijit/Legend",
    "esri/dijit/LayerList",
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/parser",
    "dojo/_base/array",
    "dijit/form/CheckBox",
    "dijit/layout/AccordionContainer",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "esri/arcgis/utils",       
    "dojo/domReady!"], 
    function(Map, ArcGISDynamicMapServiceLayer, Legend, 
        LayerList, Dom, dc, parser, arrayUtils, CheckBox, 
        AccordionContainer, BorderContainer, ContentPane, utils) {
        parser.parse();


            map = new Map("map", {
                center : [-76.029214, 38.460648],
                zoom : 10
            });

            var Basemap = new ArcGISDynamicMapServiceLayer("http://(MyServer)/arcgis/rest/services/Basemaps/BaseMap/MapServer");
            map.addLayers([Basemap]);

            var Lines = new ArcGISDynamicMapServiceLayer("http://(MyServer)/arcgis/rest/services/Basemaps/Lines/MapServer");
            map.addLayers([Lines])

            var Flood = new ArcGISDynamicMapServiceLayer("http://(MyServer)/arcgis/rest/services/Basemaps/FloodMap/MapServer");
            map.addLayers([Flood])

            //adds legend
            map.on("layers-add-result", function(evt) {
                var layerInfo = arrayUtils.map(evt.layers, function(layer, index){
                    return {layer:layer.layer, title:layer.layer.name};
                });
                if (layerInfo.length > 0) {
                    var legendDijit = new Legend({
                        map: map,
                        layerInfos: layerInfo
                    }, "legendDiv");
                    legendDijit.startup();
                }
            });


        });

    </script>
</head>

<body>
    <div id="content" style="width: 100%; height: 100%; margin: 0;"
    data-dojo-type="dijit/layout/BorderContainer"
    data-dojo-props="design:'headline', gutters:true" >

        <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">

            <div data-dojo-type="dijit/layout/AccordionContainer">
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Legend', selected:true">
                    <div id="legendDiv"></div>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Pane 2'">
                    GIS Viewer

                </div>
            </div>
        </div>

        <div id="map"
        data-dojo-type="dijit/layout/ContentPane"
        data-dojo-props="region:'center'"
        style="overflow:hidden;"></div>
    </div>
</body>

I made several changes, you were missing a bracket and there were some module names that needed to be changed. Also there is no esri/arcgis/arrayUtils module. Try this, also use the developer tools in whichever browser you are testing in so you can see which errors are happening in the console window. To access use F12.

  • Alright, I completed that. No luck so far with the application as a whole. Appreciate the module/plugins help! – Nick Sep 28 '16 at 15:22
  • Thanks Brian. I figured it was a formatting error along with my reference module issues! – Nick Sep 28 '16 at 15:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.