JSFiddle - React, Tailwind, and code Playground

by schlomm

HTML

<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<script src="http://js.arcgis.com/3.14/"></script>
<div id="map"></div>

CSS

html, body, #map {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
      }
      body {
          background-color: #FFF;
          overflow: hidden;
          font-family:"Trebuchet MS";
      }

JavaScript

var map;
var graphicsArray = [];
require(["esri/map",
    "esri/geometry/Geometry",
    "esri/geometry/Point",
    "esri/geometry/Polyline",
    "esri/geometry/Polygon",
    "esri/graphic",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/Color",
    "esri/InfoTemplate",
    "dojo/domReady!",
    "esri/geometry"], function (Map,

Geometry,
Point,
Polyline,
Polygon,
Graphic,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Color,
InfoTemplate) {
    map = new Map("map", {
        basemap: "topo",
        center: [-106.61, 35.1107],
        zoom: 13
    });
    
    map.on("load", addSomeGraphics);
   
    
    var point = new Point(-106.61, 35.1107);
    var pointSymbol = new SimpleMarkerSymbol();
    var pointAttributes = { city: "Albuquerque", state: "New Mexico" };
    var pointInfoTemplate = new InfoTemplate("Albuquerque");
    var pointGraphic = new Graphic(point, pointSymbol, pointAttributes).setInfoTemplate(pointInfoTemplate);
    
    
    
    var point2 = new Point(-106.61, 35.1107);
    var pointSymbol2 = new SimpleMarkerSymbol();
    var pointAttributes2 = { city: "COOL", state: "COOL" };
    var pointInfoTemplate2 = new InfoTemplate("COOL");
    var pointGraphic2 = new Graphic(point2, pointSymbol2, pointAttributes2).setInfoTemplate(pointInfoTemplate2); 


    graphicsArray.push(pointGraphic2);
    graphicsArray.push(pointGraphic);
    function addSomeGraphics() {
	    for (i = 0; i < graphicsArray.length; ++i) {
    	    map.graphics.add(graphicsArray[i]);
	    }
    }
});