Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/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.13/"></script>
  <title>JS Bin</title>
</head>
<body>
  <div id="map-div"></div>
  <div id="lbl-div"></div>
</body>
</html>
 
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"><div>X: <span data-dojo-attach-point="xNode">${x}</div><div>Y: <span data-dojo-attach-point="yNode">${y}</div></div>';
  
  var LabelContainer = declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    constructor: function() {
      this.set('x', 0);
      this.set('y', 0);
    },
    postCreate: function() {
      bind(this.xNode).to(this, 'x');
      bind(this.yNode).to(this, 'y');
    }
  });
  
  var lblContainer = new LabelContainer(null, dom.byId('lbl-div'));
  
  map.on('mouse-move', function(e) {
    lblContainer.set('x', e.mapPoint.x);
    lblContainer.set('y', e.mapPoint.y);
  });
  
});
Output

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

Dismiss x
public
Bin info
odoepro
0viewers