Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
  <script>
    var dojoConfig = {
      packages: [{
        name: 'dbind',
        location: 'https://rawgit.com/kriszyp/dbind/master'
      }]
    };
  </script>
<script src="http://js.arcgis.com/3.12/"></script>
  <title>JS Bin</title>
</head>
<body>
  <div id="map-div"></div>
  <div id="lbl-div"></div>
</body>
</html>
 
html, body, #map-div {
      width:   100%;
      height:  100%;
      margin:  0;
      padding: 0;
    }
​
#lbl-div {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1001;
  height: 25px;
  width: 200px;
  background-color: #fff;
  color: #000;
}
 
require([
  "dojo/_base/declare",
  "dojo/dom",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dbind/bind",
  "esri/map",
  "esri/layers/FeatureLayer",
  "dojo/domReady!"
], function(
    declare, dom, _WidgetBase, _TemplatedMixin,
    bind,
    Map, FeatureLayer
) { 
  var map = new Map("map-div", {
    center: [-118, 34.5],
    zoom: 5,
    basemap: "topo"
  });
  
  var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5';
  
  var layer = new FeatureLayer(url, { outFields: ['*'] });
  map.addLayer(layer);
  
  var template = '<div class="label-container"><span data-dojo-attach-point="lblNode">${STATE_NAME}</span></div>';
  
  var LabelContainer = declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    constructor: function() {
      this.set('STATE_NAME', 'Hover States');
    },
    postCreate: function() {
      bind(this.lblNode).to(this, 'STATE_NAME');
    }
  });
  
  var lblContainer = new LabelContainer(null, dom.byId('lbl-div'));
  
  layer.on('mouse-over', function(e) {
    lblContainer.set('STATE_NAME', e.graphic.attributes.STATE_NAME);
  });
  
});
Output

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

Dismiss x