JSFiddle - React, Tailwind, and code Playground

Blueimp jsloader approach for images

by Bryan McIntosh

HTML

<script src="https://rawgit.com/blueimp/JavaScript-Load-Image/master/js/load-image.all.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Flickr</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
    <style>
      html, body, #map {height:100%; width:100%; margin:0; padding:0;}
      .esriScalebar{padding: 20px 20px;}
      #map{padding:0;}
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="https://js.arcgis.com/3.24/"></script>
    <script>
      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: [ -80.429517, 43.543426],
          zoom: 8
        });

        //create a feature collection for the photos
        var featureCollection = {
          "layerDefinition": null,
          "featureSet": {
            "features": [],
            "geometryType": "esriGeometryPoint"
          }
        };
        featureCollection.layerDefinition = {
          "geometryType": "esriGeometryPoint",
          "objectIdField": "ObjectID",
          "drawingInfo": {
            "renderer": {
              "type": "simple",
              "rotationExpression": "[imgdir]",
              "rotationType": "geographic",
              "symbol": {
                "type": "esriPMS",
                "url": "471E7E31",
                "imageData":...