mySecondAppStep6.html

by siennaemery

HTML

<head>
  <title>ArcGIS Maps Example</title>
  <!-- Styles for example -->
  <link rel="stylesheet" href="https://playground.fmeserver.com/css/FMEServerExamples.css" type="text/css" />
  <!-- Include FMEServer.js -->
  <script type="text/javascript" src="https://api.fmeserver.com/js/v3/FMEServer.js"></script>
  <!-- The following are Required for ArcGIS Maps -->
  <link rel="stylesheet" href="https://js.arcgis.com/3.8/js/esri/css/esri.css" />
  <script type="text/javascript" src="https://js.arcgis.com/3.8/"></script>
</head>

<body>
  <h4>This example clips an area selected by the user to BC Traffic Data.</h4>
  <form id="exampleForm">
    <label><b>Step 1</b> - Draw the Polygon: </label>
    <input id="draw" type="button" value="Draw" />
    <input id="reset" type="button" value="Reset" /><br />
    <div id="mapDiv"></div>
    <label><b>Step 2</b> - Submit the Request to FME Server: </label>
    <input type="button" onclick="processClip();" value="Clip Data To Area" />
  </form>
</body>

JavaScript

var map, toolbar, clippingGeometry;

window.onload = function() {
  require([
    "esri/map", "esri/toolbars/draw",
    "esri/graphic", "esri/geometry/webMercatorUtils",
    "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
    "dojo/_base/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
  ], function(
    Map, Draw,
    Graphic, webMercatorUtils,
    SimpleLineSymbol, SimpleFillSymbol,
    Color, dom, on
  ) {
    map = new Map("mapDiv", {
      basemap: "streets", //Select the basemap
      center: [-123.114166, 49.27], //Enter the coordinates to center the map
      zoom: 7, //Set the default zoom
      minZoom: 4, //Set the minimum zoom level 
      smartNavigation: false
    });

    map.on("load", function() {
      toolbar = new Draw(map);

      dojo.connect(toolbar, "onDrawEnd", addToMap);

      on(dom.byId("draw"), "click", drawPolygon);
      on(dom.byId("reset"), "click", drawReset);
    });

    function addToMap(geometry) {
      var symbol = new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_SOLID,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_DASHDOT,
          new Color([255, 0, 0]), 2
        ),
        new Color([255, 255, 0, 0.25])
      );
      geometry = webMercatorUtils.webMercatorToGeographic(geometry);
      var graphic = new Graphic(geometry, symbol);
      map.graphics.clear();
      map.graphics.add(graphic);
      toolbar.deactivate(Draw.POLYGON);
      clippingGeometry = geometry.rings[0];
    }

    function drawPolygon() {
      drawReset();
      toolbar.activate(esri.toolbars.Draw.POLYGON);
    }

    function drawReset() {
      toolbar.deactivate(esri.toolbars.Draw.POLYGON);
      map.graphics.clear();
    }
  });

  FMEServer.init({
    server: "https://demos-safe-software.fmecloud.com", //Update with your Server hostname - on FME training machines this is https://localhost:8443
    token: "568c604bc1f235bbe137c514e7c61a8436043070" //Update to your fmetoken
  });
};

/*function...