I am currently scripting out my first webmap with the Javascript API. So far I am able to add my basemap, feature layers, zoom tool, home button, and search bar.
I am getting stuck on the legend. This is the only example I was able to find for the 3.27 API.
Legend | ArcGIS API for JavaScript 3.27
The problem is that I don't want a content pane on the right side, I would like to be able to embed my legend at the bottom left of the map and then alter the way to it looks from there.
Is there any examples online that I am missing that show how to do this? I am using the 3.27 Javascript API.
Thanks,
Solved! Go to Solution.
Matthew,
Here is a sample for that:
<!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>FeatureLayer On Demand</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.27/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
#legendDiv {
position:absolute !important;
right:20px;
top:10px;
z-Index:999;
width: 200px;
height: 200px;
background-color: white;
padding:8px;
}
</style>
<script src="https://js.arcgis.com/3.27/"></script>
<script>
var map;
require([
"esri/map", "esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/dijit/Legend", "dojo/_base/array",
"dojo/parser", "dojo/domReady!"
], function(
Map, InfoTemplate, FeatureLayer, Legend, arrayUtils,
parser
) {
parser.parse();
map = new Map("mapDiv", {
basemap: "national-geographic",
center: [-96.541, 38.34],
zoom: 6
});
map.on("load", initOperationalLayer);
function initOperationalLayer() {
var infoTemplate = new InfoTemplate("${state_name}", "Population (2000): ${pop2000:NumberFormat}");
var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: infoTemplate
});
map.addLayers([featureLayer]);
map.infoWindow.resize(155,75);
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 class="claro">
<div id="mapDiv">
<div id="legendDiv"></div>
</div>
</body>
</html>
Matthew,
Here is a sample for that:
<!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>FeatureLayer On Demand</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.27/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
#legendDiv {
position:absolute !important;
right:20px;
top:10px;
z-Index:999;
width: 200px;
height: 200px;
background-color: white;
padding:8px;
}
</style>
<script src="https://js.arcgis.com/3.27/"></script>
<script>
var map;
require([
"esri/map", "esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/dijit/Legend", "dojo/_base/array",
"dojo/parser", "dojo/domReady!"
], function(
Map, InfoTemplate, FeatureLayer, Legend, arrayUtils,
parser
) {
parser.parse();
map = new Map("mapDiv", {
basemap: "national-geographic",
center: [-96.541, 38.34],
zoom: 6
});
map.on("load", initOperationalLayer);
function initOperationalLayer() {
var infoTemplate = new InfoTemplate("${state_name}", "Population (2000): ${pop2000:NumberFormat}");
var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: infoTemplate
});
map.addLayers([featureLayer]);
map.infoWindow.resize(155,75);
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 class="claro">
<div id="mapDiv">
<div id="legendDiv"></div>
</div>
</body>
</html>
Thank you this is exactly what I needed! I really appreciate your time and effort!
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.
Just did, thanks again! Have a great day!