Skip to content

Instantly share code, notes, and snippets.

@ajturner

ajturner/Readme.md

Created September 28, 2013 04:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ajturner/6738445 to your computer and use it in GitHub Desktop.
Save ajturner/6738445 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Legend Interaction
Raw
Readme.md

CSS styling with more styling and less hard-coded SVG.

Click on the legend to toggle highlights.

Needs to be cleaned up some more.

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:[-72, 42.028175],
zoom:9
});
var featureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/colleges/FeatureServer/0", {
id:"featureLayer",
styling:false,
dataAttributes:["COLLEGE", "UNDERGRAD", "GRAD", "CITYST"]
});
if (featureLayer.surfaceType === "svg") {
on(featureLayer, "mouse-over", function (evt) {
var underGradCount = evt.graphic.attributes.UNDERGRAD;
dom.byId("school").innerHTML = evt.graphic.attributes.COLLEGE + "<br />" +
evt.graphic.attributes.CITYST + "<br />Enrollment: " +
number.format(underGradCount, { 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 underGradCount = evt.graphic.attributes.UNDERGRAD;
var name = evt.graphic.attributes.COLLEGE;
var enrollmentSize;
if (underGradCount < 1) {
enrollmentSize = "nodata";
} else if (underGradCount > 0 && underGradCount < 3000) {
enrollmentSize = "small";
} else if (underGradCount >= 3000 && underGradCount < 6000) {
enrollmentSize = "medium";
} else if (underGradCount >= 6000 && underGradCount < 9000) {
enrollmentSize = "large";
} else if (underGradCount >= 9000 && underGradCount < 12000) {
enrollmentSize = "xlarge";
} else if (underGradCount >= 12000) {
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">2012 Undergraduate Enrollment</div>
<div id="school"></div>
<ul>
<li>+12,000 <span id="legend_xxlarge" data-size="xxlarge" class="symbol xxlarge"></span></li>
<li>12,000-9,000 <span id="legend_xlarge" data-size="xlarge" class="symbol xlarge"></span></li>
<li>8,999 - 6,000 <span id="legend_large" data-size="large" class="symbol large"></span></li>
<li>5,999 - 3,000 <span id="legend_medium" data-size="medium" class="symbol medium"></span></li>
<li>2,999 - 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