JSFiddle - React, Tailwind, and code Playground

by Laban Ndungo

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<script src="https://js.arcgis.com/3.17/"></script>
<body class="claro">
  <div id="mapDiv">
    <div id="btnTemplates" class="roundedCorner" style="position: absolute; margin-top: 24px; color: #45484D; cursor: pointer; right: 5px; padding: 4px;z-index:999;">
    <span id="downloadbtn">Flash a point</span>
    </div>
  </div>
  
</body>

CSS

html, body, #mapDiv {
    padding: 0;
    margin: 0;
    height: 100%;
  }
  
  .roundedCorner {
    background-color: #FFFFFF;
    border: 1px solid #066DAB;
    border-radius: 4px 4px 4px 4px;
  }

JavaScript

require(["esri/map", "esri/layers/FeatureLayer", "esri/graphic", "esri/Color", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/InfoTemplate", "dojo/Deferred", "dojo/_base/lang", "dojo/fx", "dojo/_base/fx", "dojo/fx/easing", "dojo/on", "dojo/dom", "dojo/domReady!"], function(Map, FeatureLayer, Graphic, Color, Point, SimpleMarkerSymbol, SimpleLineSymbol, InfoTemplate, Deferred, lang, coreFx, fx, easing, on, dom) {
	map = new Map("mapDiv", {
    center: [36.860, -1.292],
    zoom: 12,
    basemap: "streets"
  });
  
  var layerURL = "https://services6.arcgis.com/HwQk19ysBarANM17/ArcGIS/rest/services/NairobiHealthFacilities/FeatureServer/0";
  
  var cnt = 0;
	var fivecnt = 0;
	var go = false;
  
  var infoTemplate = new InfoTemplate("${F_NAME}", "");
  var cityPoints = new FeatureLayer(layerURL, {
    mode: FeatureLayer.MODE_DEMAND,
    infoTemplate: infoTemplate,
    outFields: ["*"]
  });
  
  map.addLayer(cityPoints);
  
  on(dom.byId("btnTemplates"), "click", function (event) {
 			graphicCount = cityPoints.graphics.length;
      
      var featureFlashed = Math.floor((Math.random() * graphicCount) + 0);
      
      var pt = new Point(cityPoints.graphics[featureFlashed].geometry.x,cityPoints.graphics[featureFlashed].geometry.y,cityPoints.graphics[featureFlashed].geometry.spatialReference);
      
      var symbol = new SimpleMarkerSymbol(
        SimpleMarkerSymbol.STYLE_CIRCLE, 
        12, 
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SOLID,
          new Color([210, 105, 30, 0.5]), 
          8
        ), 
        new Color([210, 105, 30, 0.9])
      );
    graphic = new Graphic(pt, symbol);
    
    map.graphics.add(graphic);
    
    animateGraphic(graphic);
 	});
  
  
  function animateGraphic(graphicFlash) { 
  		var shape = graphicFlash.getDojoShape().getNode();
      
      var animA = fx.fadeOut({ 
      	node:shape,
        duration: 700,
        easing: easing.linear
      });
     ...