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">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Get started with MapView - Create a 2D map - 4.0</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      font-family: 'Source Sans Pro', 'Trebuchet MS', 'Lucida Grande', 'Bitstream Vera Sans', 'Helvetica Neue', sans-serif;
      color: #293c4b;
    }
    .point-count {
      z-index: 999;
      position: absolute;
      top: 0;
      right: 0;
      padding: 1em;
      color: #000;
      font-weight: bold;
    }
  </style>
​
  <link rel="stylesheet" href="https://js.arcgis.com/4.0beta3/esri/css/main.css">
  <script>
    window.dojoConfig = {
      async: true,
      packages: [{
        name: "ramda",
        location: "https://cdnjs.cloudflare.com/ajax/libs/ramda/0.21.0/",
        main: "ramda.min"
      }]
    };
  </script>
​
  <script src="https://js.arcgis.com/4.0beta3/"></script>
</head>
​
<body>
  <div id="viewDiv"></div>
  <h2 class="point-count"></h2>
</body>
</html>
 
require([
  'ramda',
  'dojo/on',
  'esri/Map',
  'esri/Graphic',
  'esri/views/MapView',
  'esri/layers/FeatureLayer',
  'esri/layers/GraphicsLayer',
  'esri/symbols/SimpleFillSymbol',
  'esri/symbols/SimpleMarkerSymbol',
  'esri/tasks/support/Query',
  'esri/tasks/QueryTask',
  'esri/geometry/geometryEngine'
], function(
  R,
  on,
  Map,
  Graphic,
  MapView,
  FeatureLayer, GraphicsLayer,
  SimpleFillSymbol,
  SimpleMarkerSymbol,
  Query,
  QueryTask,
  geomEngine
) {
    const {
      compose,
      map,
      filter,
      not,
      isNil,
      curry,
      bind
    } = R;
​
    const {
      geodesicBuffer: buffer,
      intersect
    } = geomEngine;
​
    const node = document.querySelector('.point-count');
​
    const symbol = new SimpleFillSymbol({
      color: [255, 255, 255, 0.6],
      outline: {
        color: [255, 255, 255],
        width: 1
      }
    });
​
    const marker = new SimpleMarkerSymbol({
      color: [226, 119, 40],
      size: 4,
      outline: {
        color: [255, 255, 255],
        width: 0.5
      }
    });
​
    const qTask = new QueryTask({
      url: 'http://services2.arcgis.com/j80Jz20at6Bi0thr/arcgis/rest/services/BlockCentroids_LA/FeatureServer/0'
    });
​
    let query = new Query();
    query.returnGeometry = true;
​
    let gLayer = new GraphicsLayer();
​
    const _map = new Map({
      basemap: "gray",
      layers: [gLayer]
    });
​
    const view = new MapView({
      container: "viewDiv",
      map: _map,
      zoom: 13,
      center: [-118.25, 34]
    });
​
    const asGeoms = map(({ geometry }) => geometry);
    const isValid = filter(compose(not, isNil));
    const intersected = compose(curry(intersect), asGeoms);
    const updateCount = (xs) => {
      node.innerHTML = `Point count: ${xs.length}`;
      return xs;
    };
    const toGraphics = map(x => new Graphic({ geometry: x, symbol: marker }));
    const addToLayer = compose(bind(gLayer.add, gLayer), updateCount, toGraphics);
​
    view.then(({ extent, spatialReference, container }) => {
      query.outSR = spatialReference;
      query.geometry = extent;
      qTask.execute(query).then(({ features}) => {
        const addBufferFrom = compose(addToLayer, isValid, intersected(features));
        on(container, 'mousemove', ({ clientX: x, clientY: y }) => {
          gLayer.clear();
          let geometry = buffer(view.toMap({ x, y }), 2, 'kilometers');
          let g = new Graphic({ geometry, symbol });
          addBufferFrom(geometry);
          gLayer.add(g);
        });
      });
    });
​
});
Output

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

Dismiss x