JSFiddle - React, Tailwind, and code Playground

by cmclellan

HTML

<head>
    <title>Alaska Project Tool</title>
    <!-- Styles for example -->
    <link rel="stylesheet" href="http://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="http://js.arcgis.com/3.8/js/esri/css/esri.css" />
    <script type="text/javascript" src="http://js.arcgis.com/3.8/"></script>
	<!-- <script type="text/javascript" src="jquery-3.3.1.js"></script> -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="Javascript/Alaskajs.js"></script>
</head>

<body>
    <h4>Create a new CTD Project.</h4>
    <form id="exampleForm">
        <label><b>Step 1</b> - Draw the Wellstick: </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> - Fill out the Project Attributes. </label>
        <input type="button" onclick="processSend();" value="Submit" />
    </form>
</body>

JavaScript

var map, toolbar, storedGeometry, host, token;

window.onload = function()
{
	debugger;

    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: "hybrid", //Select the basemap
            center: [-155.114166, 70.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", drawPolyline);
            on(dom.byId("reset"), "click", drawReset);
        });

        function addToMap(geometry)
        {
            var symbol = new SimpleFillSymbol(
                SimpleFillSymbol.STYLE_NULL,
                new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    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.POLYLINE);
            storedGeometry = geometry.paths[0];
        }

        function drawPolyline()
        {
            drawReset();
            toolbar.activate(esri.toolbars.Draw.POLYLINE);
            

        }

        function drawReset()
        {
           ...