mySecondAppStep10.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();
...