JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<script src="https://js.arcgis.com/3.16"></script>

    <script>var dojoConfig = { parseOnLoad: true };</script>
  <body >
    <div id="map"></div>
  </body>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.esriScalebar {
  padding: 20px 20px;
}

#map {
  padding: 0;
}

JavaScript

var map;
require([
  "esri/map",
  "esri/layers/FeatureLayer",
  "esri/dijit/PopupTemplate",
  "esri/request",
  "esri/geometry/Point",
  "esri/graphic",
  "dojo/on",
  "dojo/_base/array",
  "dojo/domReady!"
], function(
  Map,
  FeatureLayer,
  PopupTemplate,
  esriRequest,
  Point,
  Graphic,
  on,
  array
) {

  var featureLayer;

  map = new Map("map", {
    basemap: "satellite",
    center: [-46, 32.553],
    zoom: 3
  });

  //hide the popup if its outside the map's extent
  map.on("mouse-drag", function(evt) {
    if (map.infoWindow.isShowing) {
      var loc = map.infoWindow.getSelectedFeature().geometry;
      if (!map.extent.contains(loc)) {
        map.infoWindow.hide();
      }
    }
  });

  //create a feature collection for the flickr photos
  var featureCollection = {
    "layerDefinition": null,
    "featureSet": {
      "features": [],
      "geometryType": "esriGeometryPoint"
    }
  };
  featureCollection.layerDefinition = {
    "geometryType": "esriGeometryPoint",
    "objectIdField": "ObjectID",
    "drawingInfo": {
      "renderer": {
        "type": "simple",
        "symbol": {
          "type": "esriPMS",
          "url": "https://developers.arcgis.com/javascript/3/samples/fl_featureCollection/images/flickr.png",
          "contentType": "image/png",
          "width": 15,
          "height": 15
        }
      }
    },
    "fields": [{
      "name": "ObjectID",
      "alias": "ObjectID",
      "type": "esriFieldTypeOID"
    }, {
      "name": "description",
      "alias": "Description",
      "type": "esriFieldTypeString"
    }, {
      "name": "title",
      "alias": "Title",
      "type": "esriFieldTypeString"
    }]
  };

  //define a popup template
  var popupTemplate = new PopupTemplate({
    title: "{title}",
    description: "{description}"
  });

  //create a feature layer based on the feature collection
  featureLayer = new FeatureLayer(featureCollection, {
    id: 'flickrLayer',
    infoTemplate: popupTemplate
  });

 ...