AnsweredAssumed Answered

Calcite Maps 3.x Legend inside Panel

Question asked by judsoncrouch on May 3, 2018
Latest reply on May 3, 2018 by judsoncrouch

Hello,

 

I am trying to insert the "esri/dijit/Legend" widget inside a Calcite Maps bootstrap panel but it is not rendering for some reason. Is this a limitation of Calcite Maps and 3.x? (specifically 3.24)

 

I would have built this application in 4.x however, my understanding is that feature layer labeling is not supported in 2D.

 

Can anyone provide some insight or a work around on how to get a legend on my map?

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="description" content="Calcite Maps Demo - ArcGIS">
    <meta name="author" content="">
   
    <title>TESTESTEST</title>

    <!-- Calcite Maps Bootstrap -->
    <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.3.css">

    <!-- Calcite Maps -->
    <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-3.x.min-v0.3.css">

    <!-- ArcGIS JS 3.x -->
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/themes/calcite/dijit/calcite.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/themes/calcite/esri/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/dgrid/css/dgrid.css">
    <style>
        html,
        body
{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        #bottompane {
            height: 100px;
        }

        #grid {
            height: 100%;
        }

        .dgrid {
            border: none;
        }

        .calcite-panels {
            z-index: 31;
        }

        .calcite-panels.calcite-panels-table {
            position: absolute;
            bottom: 0;
            top: auto;
            left: 0;
            right: 0;
            z-index: 30;
        }

        #panelTable {
            margin-bottom: 0;
        }

        #panelTable .panel-body {
            height: 800px;
            width: 100%;
        }

    </style>


</head>

<body class="esri claro calcite  calcite-nav-top">

    <!-- Navbar -->

    <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-custom calcite-bgcolor-dark-blue">
        <!-- Menu -->
        <div class="dropdown calcite-dropdown calcite-bg-light calcite-text-dark" role="presentation">
            <a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
                <div class="calcite-dropdown-toggle">
                    <span class="sr-only">Toggle dropdown menu</span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </a>
            <ul class="dropdown-menu">
                <li>
                    <a class="visible-xs" role="button" data-target="#panelSearch" aria-haspopup="true">
                        <span class="glyphicon glyphicon-search"></span> Search</a>
                </li>
                <li>
                    <a role="menuitem"  data-target="#panelLegend" aria-haspopup="true">
                        <span class="glyphicon glyphicon-list-alt"></span> Legend
                    </a>
                </li>
                <li>
                    <a role="button" data-target="#panelBasemaps" aria-haspopup="true">
                        <span class="glyphicon glyphicon-th-large"></span> Basemaps</a>
                </li>
                <li>
                    <a role="button" data-target="#panelTable" data-toggle="collapse" aria-haspopup="true">
                        <span class="glyphicon glyphicon-list"></span> Table</a>
                </li>
                <li>
                    <a role="button" id="calciteToggleNavbar" aria-haspopup="true">
                        <span class="glyphicon glyphicon-fullscreen"></span> Full Map</a>
                </li>
            </ul>
        </div>
        <!-- Title -->
        <div class="calcite-title calcite-overflow-hidden">
            <span class="calcite-title-main hidden-xs">My Map App</span>
        </div>
        <!-- Nav -->
        <ul class="calcite-nav nav navbar-nav">
            <li>
                <div class="calcite-navbar-search hidden-xs">
                    <div id="searchNavDiv"></div>
                </div>
            </li>
        </ul>

    </nav>
    <!--/.navbar -->

    <!-- Map Container  -->

    <div class="calcite-map">
        <div id="map" class="calcite-map-absolute">
        </div>
    </div>
    <!-- /.container -->

    <!-- Panel -->

    <div class="calcite-panels calcite-panels-right calcite-bg-light calcite-text-dark panel-group" role="tablist" aria-multiselectable="true">

        <div id="panelSearch" class="panel collapse hidden-sm hidden-md hidden-lg">
            <div id="headingSearch" class="panel-heading" role="tab">
                <div class="panel-title">
                    <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseSearch" aria-expanded="false" aria-controls="collapseSearch">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        <span class="panel-label">Search</span>
                    </a>
                    <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelSearch">
                        <span class="esri-icon esri-icon-close" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
            <div id="collapseSearch" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSearch">
                <div class="panel-body calcite-body-expander">
                    <div id="searchPanelDiv"></div>
                </div>
            </div>
        </div>

        <!-- Legend -->
        <div id="panelLegend" class="panel collapse">
            <div id="headingLegend" class="panel-heading" role="tab">
                <div class="panel-title">
                    <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseLegend" aria-expanded="false" aria-controls="collapseLegend">
                        <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
                        <span class="panel-label">Legend</span>
                    </a>
                    <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelLegend">
                        <span class="esri-icon esri-icon-close" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
            <div id="collapseLegend" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingLegend">
                <div class="panel-body body-light">
                    <div id="legend" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
                        <div data-dojo-type="dijit/layout/ContentPane">
                            <div id="legendDiv"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Basemaps Panel -->

        <div id="panelBasemaps" class="panel collapse">
            <div id="headingBasemaps" class="panel-heading" role="tab">
                <div class="panel-title">
                    <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseBasemaps" aria-expanded="false" aria-controls="collapseBasemaps">
                        <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
                        <span class="panel-label">Basemaps</span>
                    </a>
                    <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelBasemaps">
                        <span class="esri-icon esri-icon-close" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
            <div id="collapseBasemaps" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBasemaps">
                <div class="panel-body">
                    <select id="selectBasemapPanel" class="form-control">
                        <option value="streets" data-vector="vector-streets">Streets</option>
                        <option value="satellite" data-vector="satellite">Satellite</option>
                        <option value="hybrid" data-vector="hybrid">Hybrid</option>
                        <option value="national-geographic" data-vector="national-geographic">National Geographic</option>
                        <option value="topo" data-vector="vector-streets-relief">Topographic</option>
                        <option value="gray" data-vector="vector-canvas-light">Gray</option>
                        <option value="dark-gray" data-vector="vector-canvas-dark">Dark Gray</option>
                        <option value="osm" data-vector="osm">Open Street Map</option>
                        <option value="dark-gray" data-vector="vector-streets-night">Streets Night</option>
                        <option value="streets" data-vector="vector-streets-mobile">Streets Mobile</option>
                    </select>
                </div>
            </div>
        </div>

    </div>
    <!-- /.calcite-panels -->


    <!--table-->
    <div class="calcite-panels calcite-panels-table calcite-bg-light calcite-text-dark">
        <div id="panelTable" class="panel collapse in">
            <div id="headingInfo" class="panel-heading" role="tab">
                <div class="panel-title">
                    <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseTable" data-parent="#panelAccordion" aria-expanded="true"
                        aria-controls="collapseInfo">

                        <span class="glyphicon glyphicon-list" aria-hidden="true"></span> Table</a>
                    <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelTable">
                        <span class="esri-icon esri-icon-close" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
            <div id="collapseTable" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingInfo">
                <div id="container" class="panel-body">
                    <div id="grid"></div>
                </div>

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


   



    <!-- /.calcite-panels -->

    <script type="text/javascript">
        var dojoConfig = {
            packages: [{
                name: "bootstrap",
                location: "https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap"
               
            },
            {
                name: "calcite-maps",
                location: "https://esri.github.io/calcite-maps/dist/js/dojo"
              
            }]
        };
    </script>


    <!-- ArcGIS JS 3.x -->
    <script src="https://js.arcgis.com/3.24/"></script>

    <script>
        var map, searchWidgetNav, searchWidgetPanel, activeView;

        require([
            "dojo/ready",
            "esri/map",
            "esri/layers/FeatureLayer",
            "esri/dijit/FeatureTable",
            "esri/tasks/QueryTask",
            "esri/tasks/FindTask",
            "esri/tasks/FindParameters",
            "esri/tasks/query",
            "esri/InfoTemplate",
            "esri/dijit/Search",
            "dojo/_base/Color",
            "dojo/query",

            "dojo/dom",
            "dijit/registry",
            "dojo/_base/array",
            "dojo/_base/connect",
            "dojox/grid/DataGrid",
            "dojo/data/ItemFileReadStore",
            "dijit/form/Button",

            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dgrid/OnDemandGrid",
            "dgrid/Selection",
            "dojo/_base/declare",
            "esri/symbols/SimpleFillSymbol",
            "dojo/store/Memory",
            "dojo/dom-style",
            "dgrid/_StoreMixin",
            "esri/dijit/Legend",


            // OAuth
            "esri/arcgis/Portal",
            "esri/arcgis/OAuthInfo",
            "esri/IdentityManager",

            "dojo/on",
            "dojo/parser",

            // Bootstrap
            "bootstrap/Collapse",
            "bootstrap/Dropdown",
            "bootstrap/Tab",

            // Calcite Maps
            "calcite-maps/calcitemaps",

            // "dojo/domReady!"
        ], function (ready, Map, FeatureLayer, FeatureTable, QueryTask, FindTask, FindParameters, Query, InfoTemplate, Search, Color, query, dom, registry, array, connect, DataGrid, ItemFileReadStore, Button, BorderContainer, ContentPane, Grid, Selection, declare, SimpleFillSymbol, Memory, domStyle, StoreMixin, Legend, arcgisPortal, OAuthInfo, esriID, on, parser) {

            ready(function () {

                var info = new OAuthInfo({
                    appId: //appid
                    portalUrl: //portal.com
                    popup: false
                });

                esriID.registerOAuthInfos([info]);

                parser.parse();

                window.grid = new (declare([Grid, Selection]))({
                    bufferRows: Infinity,
                    columns: {
                        // Columns go here
                    },
                    selectionMode: "single",
                    sortable: true

                }, "grid");




                function formatTimestamp(value) {
                    var inputDate = new Date(value);
                    return dojo.date.locale.format(inputDate, {
                        selector: 'date',
                        datePattern: 'MM/dd/yyyy'
                    });
                }

                var map = new Map("map", {
                    basemap: "streets",
                    center: [-103, 32],
                    zoom: 9,
                    showLabels: true
                });

                // Search
                searchDivNav = createSearchWidget("searchNavDiv");
                searchWidgetPanel = createSearchWidget("searchPanelDiv");

                function createSearchWidget(parentId) {
                    var search = new Search({
                        map: map,
                        enableHighlight: false
                    }, parentId);
                    search.startup();
                    return search;
                };

                // Basemaps
                query("#selectBasemapPanel").on("change", function (e) {
                    map.setBasemap(e.target.options[e.target.selectedIndex].value);
                });

                // FL 1

                // FL 2

                //FL 3

                               

                map.on("load", function (evt) {
                    // show the border container now that the dijits
                    // are rendered and the map has loaded
                    domStyle.set(registry.byId("legend").domNode, "visibility", "visible");
                    populateGrid(Memory); // pass a reference to the MemoryStore constructor
                });

                map.on("layers-add-result", function (evt) {
                    var layerInfo = array.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();
                    }
                });
               
                map.addLayers([FL1, FL2, FL3]);


                function populateGrid(Memory) {
                    var qt = new QueryTask(FL1.url);
                    var query = new Query();
                    query.where = "1=1";
                    query.returnGeometry = false;
                    query.outFields = window.outFields;
                    qt.execute(query, function (results) {
                        var data = array.map(results.features, function (feature) {
                            return {
                                // property names used here match those used when creating the dgrid
                            };
                        });
                        // grid.set("columns", generateColumns(results.fields));
                        var memStore = new Memory({ data: data, "idProperty": "col_1" });
                        window.grid.set("store", memStore);
                    });
                }

                //Returns Columns object for dgrid store 
                function generateColumns(fields) {
                    var columns = [];
                    fields.forEach(function (field) {
                        var objects = {};
                        objects.label = field.alias;
                        objects.field = field.name;
                        columns.push(objects);
                    });
                    return columns;
                }

                function showDefaultPanels() {
                    query(".calcite-panels-table").addClass("hidden");
                    query(".calcite-panels:not(.calcite-panels-table)").removeClass("hidden");
                }

                function showTablePanel() {
                    query(".calcite-panels-table").removeClass("hidden");
                    query(".calcite-panels:not(.calcite-panels-table)").addClass("hidden");
                }

                function showAllPanels() {
                    query(".calcite-panels-table").removeClass("hidden");
                    query(".calcite-panels:not(.calcite-panels-table)").removeClass("hidden");
                }

                // Default panels

                query(".calcite-panels .panel:not(#panelTable)").on("show.bs.collapse", function (e) {
                    if (window.innerWidth <= breakpoint) {
                        showDefaultPanels();
                    } else {
                        showAllPanels();
                    }
                });

                // Table panel

                query(".calcite-panels-table .panel").on("show.bs.collapse", function (e) {
                    if (window.innerWidth <= breakpoint) {
                        showTablePanel();
                    } else {
                        showAllPanels();
                    }
                });

                // Responsive

                var breakpoint = 768;
                var isMobile = window.innerWidth <= breakpoint;
                query(window).on("resize", function (e) {
                    if (e.target.innerWidth <= breakpoint && !isMobile) {
                        isMobile = true;
                        showTablePanel();
                    }
                    if (e.target.innerWidth > breakpoint && isMobile) {
                        isMobile = false;
                        showAllPanels();
                    }
                }.bind(this));

            });

        })

    </script>


</body>

</html>

Outcomes