Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>Generate classed color breaks renderer</title>
   <link rel="stylesheet" href="//js.arcgis.com/3.14/dijit/themes/tundra/tundra.css">
   <link rel="stylesheet" href="//js.arcgis.com/3.14/esri/css/esri.css">
​
   <script src="//js.arcgis.com/3.14/"></script>
</head>
​
<body class="tundra">
   <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
         <div id="feedback">
            <h3>Washington State</h3>
            <div id="info">
             Select a field to use to create a renderer for the counties in Washington state.
            </div>
            <div id="legendWrapper"></div>
            <div id="fieldWrapper">
               Currently selected attribute:
            </div>
         </div>
      </div>
   </div>
</body>
​
</html>
​
​
​
 
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#map {
  margin: 0;
  padding: 0;
}
#feedback {
  position: absolute;
  height: 410px;
  font-family: arial;
  margin: 5px;
  padding: 10px;
  z-index: 40;
  background: #fff;
  color: #444;
  width: 300px;
  left: 30px;
  top: 30px;
  box-shadow: 0 0 5px #888;
}
​
#legendWrapper {
  padding: 20px 0 0 0;
}
#note {
  font-size: 80%;
  font-weight: 700;
  padding: 0 0 10px 0;
}
h3 {
  margin: 0 0 5px 0;
  border-bottom: 1px solid #444;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
odoepro
0viewers