Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Calcite Maps 3.x Legend inside Panel
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
05-03-2018
06:01 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>Solved! Go to Solution.
1 Solution
Accepted Solutions
05-03-2018
06:22 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I just found the issue.... I am hosting my map app on Sharepoint and it adds some code at the beginning of the head that somehow disables some of the rendering.
Thanks for the help anyhow!
2 Replies
05-03-2018
06:16 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Judson,
Your code rendered the legend fine for me when I added my layers.
05-03-2018
06:22 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I just found the issue.... I am hosting my map app on Sharepoint and it adds some code at the beginning of the head that somehow disables some of the rendering.
Thanks for the help anyhow!
