Skip to content

Instantly share code, notes, and snippets.

@ajturner

ajturner/index.html

Created March 4, 2020 15:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ajturner/c157f8e966c7453ef553d5c252692fd4 to your computer and use it in GitHub Desktop.
Save ajturner/c157f8e966c7453ef553d5c252692fd4 to your computer and use it in GitHub Desktop.
Download ZIP
Interactive legend built with CSS
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"/>
<title></title>
<link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.7/js/esri/css/jsapi.css"/>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=News+Cycle"/>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: 'News Cycle', sans-serif;
font-size: 0.90em;
}
#map {
height: 100%;
width: 100%;
}
/* Legend */
#legend {
height: 170px;
width: 800px;
position: absolute;
z-index: 1;
bottom: 1em;
left: 1em;
right: 1em;
background-color: #f8f8f8;
border-radius: 3px;
opacity: 0.95;
padding: 5px;
}
#title { font-weight: bold; font-size: 1.2em;}
#school {float: right; margin-right: 20px; max-width: 140px;}
#legend ul li { display: inline; float: left; margin-right: 30px; text-align: center; }
#symbols ul { margin: 0; padding: 0; list-style-type: none; }
/* Symbolization */
#legend .symbol {
border-radius: 50%;
display: block;
cursor: pointer;
margin: 5px auto 0;
}
#map .symbol {
stroke-linecap: round;
stroke-linejoin: round;
stroke-opacity: 1.0;
fill-opacity: 1.0;
}
/* classbreaks */
.nodata {
background-color: rgb(255, 0, 0););
fill: rgb(255, 0, 0););
opacity: 0.9;
stroke: rgb(255, 0, 0);
}
.symbol.nodata { width: 6px; height: 6px; }
.nodata_hover .nodata { stroke: rgb(100,0,0) }
.nodata_select .nodata { stroke: rgb(200,0,0); box-shadow: 0 0 5px 5px #FF0000;}
.small {
background-color: rgb(0, 89, 190);
fill: rgb(0, 89, 190);
opacity: 0.85;
stroke: rgb(0, 89, 190);
stroke-width: 3pt;
}
.symbol.small { width: 6px; height: 6px; }
.small_hover .small { stroke: rgb(100,0,0) }
.small_select .small { stroke: rgb(200,0,0); box-shadow: 0 0 5px 5px #FF0000;}
.medium {
background-color: rgb(0, 89, 190);
fill: rgb(0, 89, 190);
opacity: 0.65;
stroke: rgb(0, 89, 190);
stroke-width: 10pt;
}
.symbol.medium { width: 16px; height: 16px; }
.medium_hover .medium { stroke: rgb(100,0,0) }
.medium_select .medium { stroke: rgb(200,0,0); box-shadow: 0 0 5px 5px #FF0000;}
.large {
background-color: rgb(0, 89, 190);
fill: rgb(0, 89, 190);
opacity: 0.35;
stroke: rgb(0, 89, 190);
stroke-width: 30pt;
}
.symbol.large { width: 40px; height: 40px; }
.large_hover .large { stroke: rgb(100,0,0) }
.large_select .large { stroke: rgb(200,0,0); box-shadow: 0 0 5px 5px #FF0000;}
.xlarge {
background-color: rgb(0, 89, 190);
fill: rgb(0, 89, 190);
stroke: rgb(0, 89, 190);
stroke-width: 45pt;
opacity: 0.25;
}
.symbol.xlarge { width: 70px; height: 70px; }
.xlarge_hover .xlarge { stroke: rgb(100,0,0) }
.xlarge_select .xlarge { stroke: rgb(200,0,0); box-shadow: 0 0 5px 5px #FF0000;}
.xxlarge {
background-color: rgb(0, 89, 190);
stroke: rgb(0, 89, 190);
fill: rgb(0, 89, 190);
fill-opacity: 1;
stroke-width: 70pt;
stroke-opacity: 1;
opacity: 0.12;
}
.symbol.xxlarge{ width: 90px; height: 90px; }
.xxlarge_hover .xxlarge { stroke: rgb(100,0,0) }
.xxlarge_select .xxlarge { stroke: rgb(200,0,0); box-shadow: 0 0 5px 5px #FF0000;}
/* Interaction */
#map .symbol:hover {
opacity: 0.9;
}
#legend .symbol.active, #legend .symbol:hover {
box-shadow: 0 0 5px 5px #FF0000;
}
</style>
<script type="text/javascript" src="//js.arcgis.com/3.7/"></script>
<script>
require([
"esri/map",
"esri/layers/FeatureLayer",
"dojo/_base/array",
"dojo/dom-class",
"dojo/dom",
"dojo/number",
"dojo/on",
"dojo/parser",
"dojo/ready"
], function (Map, FeatureLayer, array, domClass, dom, number, on, parser, ready) {
parser.parse();
ready(function () {
var dataStore = [];
var map = new Map("map", {
basemap:"gray",
center:[-77, 38.907192],
zoom:12
});
var featureLayer = new FeatureLayer("https://maps2.dcgis.dc.gov/dcgis/rest/services/DCGIS_DATA/Education_WebMercator/MapServer/5", {
id:"featureLayer",
styling:false,
dataAttributes:["NAME", "FACUSE", "CAPACITY", "YEAR_BUILT"]
});
if (featureLayer.surfaceType === "svg") {
on(featureLayer, "mouse-over", function (evt) {
var attributeCount = evt.graphic.attributes.CAPACITY;
dom.byId("school").innerHTML = evt.graphic.attributes.NAME + "<br />" +
evt.graphic.attributes.FACUSE + "<br />Enrollment: " +
number.format(attributeCount, { places:0 }) + "<br />";
domClass.add("legend_" + evt.graphic.attributes.SIZE, "active");
});
on(featureLayer, "mouse-out", function (evt) {
domClass.remove("legend_" + evt.graphic.attributes.SIZE, "active");
});
on(featureLayer, "graphic-draw", function (evt) {
var attributeCount = evt.graphic.attributes.CAPACITY;
var name = evt.graphic.attributes.NAME;
var enrollmentSize;
if (attributeCount < 1) {
enrollmentSize = "nodata";
} else if (attributeCount > 0 && attributeCount < 300) {
enrollmentSize = "small";
} else if (attributeCount >= 300 && attributeCount < 600) {
enrollmentSize = "medium";
} else if (attributeCount >= 600 && attributeCount < 900) {
enrollmentSize = "large";
} else if (attributeCount >= 900 && attributeCount < 1200) {
enrollmentSize = "xlarge";
} else if (attributeCount >= 1200) {
enrollmentSize = "xxlarge";
}
evt.graphic.attributes.SIZE = enrollmentSize;
// set the data attribute for the feature
evt.node.setAttribute("class", enrollmentSize + " symbol");
});
}
map.addLayer(featureLayer);
var symbols = dojo.query("#legend .symbol");
symbols.on("mouseover", function(evt) {
dojo.addClass("body", evt.target.getAttribute("data-size") + "_hover")
})
symbols.on("mouseout", function(evt) {
dojo.removeClass("body", evt.target.getAttribute("data-size") + "_hover")
});
symbols.on("click", function(evt) {
dojo.toggleClass("body", evt.target.getAttribute("data-size") + "_select")
});
});
});
</script>
</head>
<body id="body">
<div id="map"></div>
<div id="legend">
<div id="title">School Population</div>
<div id="school"></div>
<ul>
<li>+1,200 <span id="legend_xxlarge" data-size="xxlarge" class="symbol xxlarge"></span></li>
<li>1,200-900 <span id="legend_xlarge" data-size="xlarge" class="symbol xlarge"></span></li>
<li>899 - 6,00 <span id="legend_large" data-size="large" class="symbol large"></span></li>
<li>599 - 300 <span id="legend_medium" data-size="medium" class="symbol medium"></span></li>
<li>299 - 0 <span id="legend_small" data-size="small" class="symbol small"></span></li>
<li>No data <span id="legend_nodata" data-size="nodata" class="symbol nodata"></span></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment