<!DOCTYPE html>
<html>
<head>
<title>Legend 4.0</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.0/"></script>
<script>
require([
"esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/PopupTemplate", "esri/widgets/Legend", "dojo/domReady!"],
function(Map, MapView, FeatureLayer, PopupTemplate, Legend) {
var parkingTemplate = new PopupTemplate({
title: "Parking Lot {CityworksID}",
content: "<ul><li>Facility: {FACILITY}</li>" +
"<li>Capacity: {CAPACITY}</li>" +
"<li>Type: {TYPE}</li></ul>"
});
var parkingLayer = new FeatureLayer({
url: "http://a222.lansing.local/arcgis/rest/services/MainMap/MapServer/39",
outFields: ["*"],
popupTemplate: parkingTemplate,
minScale: 0,
opacity: 0.75
});
var votingTemplate = new PopupTemplate({
title: "Voting Ward {WARDID}",
content: "<ul><li>County: {COUNTY}</li>" +
"<li>Name: {NAME}</li></ul>"
});
var votingLayer = new FeatureLayer({
url: "http://a222.lansing.local/arcgis/rest/services/MainMap/MapServer/40",
outFields: ["*"],
popupTemplate: votingTemplate
});
var map = new Map({
basemap: "streets",
layers: [parkingLayer, votingLayer]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 14,
center: [-84.530030, 42.735592]
});
var legend = new Legend({
view: view,
layerInfos: [{
layer: parkingLayer,
title: "Parking Lots"
},{
layer: votingLayer,
title: "Voting Wards"
}]
});
legend.startup();
view.ui.add(legend, "bottom-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
The layers are just a couple layers from our REST server. This isn't for a real app we're doing, I'm just educating myself. Any pointers you have are much appreciated.
