JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>

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

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

</html>

CSS

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

JavaScript

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/widgets/LayerList"
], function(Map, MapView, FeatureLayer,LayerList ) {

  var map = new Map({
    basemap: "streets"
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [36.6, 50.6], // longitude, latitude
    zoom: 8,
  });

  var popupFields = {
    "title": "{name}",
    "content": ` {resource_id} `,
  }
  // Trails feature layer (lines)


  /*RENDERER*/

  const defaultSym = {
    type: "simple-fill", // autocasts as new SimpleFillSymbol()
    style: "solid",
    color: [0, 255, 0, 0.4],
    outline: {
      // autocasts as new SimpleLineSymbol()
      color: [255, 0, 0, 0.1],
      width: 1
    }
  };



  var PO_LIST = [{
      "name": "Все ПО",
      "code": 'all'
    },
    {
      "name": "СХБК ПО Кшенское",
      "code": 15031
    },
    {
      "name": "СХО ПО Мценск",
      "code": 15035
    },
    {
      "name": "СХО ПО Нечаево",
      "code": 15037
    },
    {
      "name": "СХП ПУ Ширяевский",
      "code": 15039
    },
    {
      "name": "СХП ПО Степнянское",
      "code": 15041
    },
    {
      "name": "СХП ПУ Турий Рог",
      "code": 15043
    },
    {
      "name": "СХП ПО Поповское",
      "code": 15045
    },
    {
      "name": "СХТ ПО Жердевское",
      "code": 15049
    },
    {
      "name": "СХТ ПО Саратовское",
      "code": 15051
    },
    {
      "name": "СХТ ПО Дмитриевское",
      "code": 15053
    },
    {
      "name": "СХТ ПО Тамбовское",
      "code": 15055
    },
    {
      "name": "СХТ ПО Знаменское",
      "code": 15059
    },
    {
      "name": "СХБК ПО Чернянское",
      "code": 15069
    },
    {
      "name": "СХБК ПО Истобнянское",
      "code": 15071
    },
    {
      "name": "СХБ ПО Закутское",
      "code": 15075
    },
    {
      "name": "СХБ ПО Казинское",
      "code": 15079
    },
    {
      "name": "СХБ ПО Белоколодезянское",
      "code": 15081
    },
    {
      "name": "СХБ ПО...