JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<html>

  <head>
    <meta name="description" content="DevLab: Style a feature layer">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>ArcGIS JavaScript Tutorials: Style a feature layer</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
    <script src="https://js.arcgis.com/4.13/"></script>
  </head>



  <body>
    <div id="viewDiv">
      
      
      
    </div>
  </body>

</html>

CSS

/* some css */

JavaScript

var cropColorsById = new Map();
var cropColorsByTxt = new Map();

const crop_color_data = [
    {    "key": "0012",    "color": "RGBA(28 , 117, 16 , 0.85)",   "name": "Пшеница озимая"}, 
    {    "key": "0017",    "color": "RGBA(194, 23 , 17 , 0.85)",   "name": "Сахарная свекла"}, 
    {    "key": "0025",    "color": "RGBA(75 , 169, 227, 0.85)",   "name": "Ячмень"}, 
    {    "key": "0013",    "color": "RGBA(98 , 179, 104, 0.85)",   "name": "Пшеница яровая"}, 
    {    "key": "0022",    "color": "RGBA(230, 230, 44 , 0.85)",   "name": "Соя"}, 
    {    "key": "0015",    "color": "RGBA(31 , 63 , 171, 0.85)",   "name": "Горох"}, 
    {    "key": "0009",    "color": "RGBA(116, 44 , 163, 0.85)",   "name": "Гречиха"}, 
    {    "key": "0001",    "color": "RGBA(40,  61 , 31 , 0.85)",   "name": "Кукуруза на зерно"}, 
    {    "key": "0011",    "color": "RGBA(135, 82 , 0  , 0.85)",   "name": "Подсолнечник"}, 
    {    "key": "0008",    "color": "RGBA(171, 171, 171, 0.85)",   "name": "Горчица"}, 
    {    "key": "0000",    "color": "RGBA(255, 255, 255, 0.85)",   "name": "Нет  в  севообороте"}, 
    {    "key": "0004",    "color": "RGBA(79 , 79 , 79 , 0.85)",   "name": "Многолетние травы"}, 
    {    "key": "0019",    "color": "RGBA(79 , 79 , 79 , 0.85)",   "name": "Сидеральные пары"}, 
    {    "key": "0010",    "color": "RGBA(79 , 79 , 79 , 0.85)",   "name": "Пар"}, 
    {    "key": "0020",    "color": "RGBA(79 , 79 , 79 , 0.85)",   "name": "Сидеральный пар под"},     
    {    "key": "0031",    "color": "RGBA(204, 0  , 102, 0.85)",   "name": "Залужение"}, 
    {    "key": "9999",    "color": "RGBA(0  , 255, 255, 0.85)",   "name": "Отказ (после 2018 г.)"
}];

crop_color_data.forEach(function(element) {
    cropColorsById.set(element.key, element.color);
    cropColorsByTxt.set(element.name, element.color);
});

require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/layers/MapImageLayer",
     ...