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 charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Get started with graphics - 4.4</title>
​
  <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
  <script src="https://js.arcgis.com/4.4/"></script>
​
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
​
  <script>
    require([
      "esri/Map",
      "esri/geometry/support/webMercatorUtils",
      "esri/geometry/geometryEngine",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/geometry/Point",
      "esri/geometry/Polyline",
      "esri/geometry/Polygon",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "dojo/domReady!"
    ], function(
      Map, webMercatorUtils, geoEngine, MapView,
      Graphic, Point, Polyline, Polygon,
      SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol
    ) {
​
      var map = new Map({
        basemap: "hybrid"
      });
​
      var view = new MapView({
        center: [-80, 35],
        container: "viewDiv",
        map: map,
        zoom: 3
      });
​
      /**********************
       * Create a point graphic
       **********************/
​
      // First create a point geometry (this is the location of the Titanic)
      var point = new Point({
        longitude: -49.97,
        latitude: 41.73
      });
​
      // Create a symbol for drawing the point
      var markerSymbol = new SimpleMarkerSymbol({
        color: [226, 119, 40],
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 2
        }
      });
​
      var pointGraphic;
      // in pixels
      var snapDistance = 10;
      
      view.on('pointer-move', e => {
        if (pointGraphic) view.graphics.remove(pointGraphic);
        
        let point = view.toMap(e);
        let metersToPixels = view.extent.width / view.width;
        
        if (point){
          let coordResult = geoEngine.nearestCoordinate(polyline, point);
          if (coordResult.distance / metersToPixels < snapDistance){
            point = coordResult.coordinate;
          }
          pointGraphic = new Graphic({
            geometry: point,
            symbol: markerSymbol
          });
          view.graphics.add(pointGraphic);
        }
        
      });
​
      /*************************
       * Create a polyline graphic
       *************************/
​
      // First create a line geometry (this is the Keystone pipeline)
      var polyline = webMercatorUtils.geographicToWebMercator(new Polyline({
        paths: [
          [-111.30, 52.68],
          [-98, 49.5],
          [-120, 29.89]
        ]
      }));
​
      // Create a symbol for drawing the line
      var lineSymbol = new SimpleLineSymbol({
        color: [226, 119, 40],
        width: 4
      });
​
​
      /*******************************************
       * Create a new graphic and add the geometry,
       * symbol, and attributes to it. You may also
       * add a simple PopupTemplate to the graphic.
       * This allows users to view the graphic's
       * attributes when it is clicked.
       ******************************************/
      var polylineGraphic = new Graphic({
        geometry: polyline,
        symbol: lineSymbol
      });
​
​
      // Add the polyline graphic to the view's graphics layer
      view.graphics.add(polylineGraphic);
    });
  </script>
</head>
​
<body>
  <div id="viewDiv"></div>
</body>
​
</html>
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers