JSFiddle - React, Tailwind, and code Playground

by ragnar123

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
        <title></title>
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/tundra/tundra.css">

    <script>var dojoConfig = { parseOnLoad: true };</script>
        <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script>
    </head>
    
    <body class="tundra">
        <div data-dojo-type="dijit.layout.BorderContainer" 
        data-dojo-props="design:'headline',gutters:false" 
        style="width: 100%; height: 100%; margin: 0;">
            <div id="map" 
            data-dojo-type="dijit.layout.ContentPane" 
            data-dojo-props="region:'center'"> 
                
                <div id="info">
                    <div id="instructions">Click the map to convert the click point to Web Mercator.</div>
                    <div id="results"></div>
                </div>
            </div>
        </div>
  </body>
</html>

CSS

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{ margin: 0; padding: 0; }
#info {
    position: absolute;
    top: 10px; 
    right: 10px;
    width: 160px;
    height: 80px;
    z-index: 40;
    background: #fff;
    padding: 5px;
    color: #000;
    font-family: arial;
}
#results { color: red; }

JavaScript

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.tasks.geometry");

var map, resizeTimer, gsvc;

function init() {
    var initExtent = new esri.geometry.Extent({
        "xmin": 13410892.167988224,
        "ymin": 394170.65114215855,
        "xmax": 13413646.353547676,
        "ymax": 395793.8403501995,
        "spatialReference": {
            "wkt": "PROJCS[\"NAD_1983_StatePlane_Michigan_South_FIPS_2113_IntlFeet\",GEOGCS[\"GCS_North_American_1983\",DATUM[\"D_North_American_1983\",SPHEROID[\"GRS_1980\",6378137.0,298.257222101]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Lambert_Conformal_Conic\"],PARAMETER[\"False_Easting\",13123359.58005249],PARAMETER[\"False_Northing\",0.0],PARAMETER[\"Central_Meridian\",-84.36666666666666],PARAMETER[\"Standard_Parallel_1\",42.1],PARAMETER[\"Standard_Parallel_2\",43.66666666666666],PARAMETER[\"Latitude_Of_Origin\",41.5],UNIT[\"Foot\",0.3048]]"
        }
    });
    map = new esri.Map("map", {
        extent: initExtent
    });
    var basemap = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer");
    map.addLayer(basemap);

    gsvc = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
    dojo.connect(map, 'onClick', projectPoint);

    dojo.connect(map, 'onLoad', function() {
        dojo.connect(dijit.byId('map'), 'resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                map.resize();
                map.reposition();
            }, 500);
        });
    });
}

function projectPoint(evt) {
    // console.log(evt.mapPoint);
    map.graphics.clear();
    map.graphics.add(new esri.Graphic(
    evt.mapPoint, new esri.symbol.SimpleMarkerSymbol()));
    var outSR = new...