JSFiddle - React, Tailwind, and code Playground

by kenbuja

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>CreateLayer</title>
        <script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
        <script src="https://js.arcgis.com/4.15/"></script>
        <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css"/>
    </head>
    <body>
        <div id = "ViewMap_div"></div>
    </body>
</html>

CSS

html,
body,
#ViewMap_div {
  margin: auto;
  height: 100%;
  width: 100%;
}

JavaScript

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/Graphic",
  "esri/layers/FeatureLayer"
], function(Map, MapView, Graphic, FeatureLayer){
  var total = 125380;
  var points = turf.randomPoint(total, {bbox: [-130, 20, -90, 40]});
  var pointRenderer = {
    type: "simple",  // autocasts as new SimpleRenderer()
    symbol: {
      type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
      size: 5,
      color: "blue",
      outline: {  // autocasts as new SimpleLineSymbol()
        width: 0.5,
        color: "white"
      }
    }
  };
  var features = [];
  turf.featureEach(points, function (currentFeature, featureIndex) {
    features.push({
      geometry: {
        type: "point", // autocasts as new Point()
        x: currentFeature.geometry.coordinates[0],
        y: currentFeature.geometry.coordinates[1]
      }
    }); 
  });
  var fl = new FeatureLayer({
    source: features,
    renderer: pointRenderer,
    objectIDField: "ObjectID",
    fields: [
      {
        name: "ObjectID",
        alias: "ObjectID",
        type: "oid"
      },
      {
        name: "ProjectName",
        alias: "ProjectName",
        type: "string"
      },
      {
        name: "SiteName",
        alias: "SiteName",
        type: "string"
      }
    ]
  });

  // create the map view
  var map = new Map({
    basemap: 'gray',
    layers: [fl]
  });

  var view = new MapView({
    container: "ViewMap_div",
    map: map,
    center: [-110, 30],
    zoom: 5
  });

});