JSFiddle - React, Tailwind, and code Playground

by woquendo

HTML

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to SceneView - Create a 3D map - 4.10</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="../ArcGIS/js/nextgen.utilities.js"></script>
</head>

<body>
  Base Map Selector: 
  <select id="ddlBaseMaps">
    <option value="topo">Topo</option>
    <option value="streets">Streets</option>	
    <option value="satellite">Satellite</option>
    <option value="hybrid">Hybrid</option>	
    <option value="terrain">Terrain</option>
    <option value="grays">Gray</option>	
    <option value="dark-gray">Dark Gray</option>
    <option value="oceans">Oceans</option>	
    <option value="national-geographic">National Geographic</option>
    <option value="osm">OSM</option>	
    <option value="dark-gray-vector">Dark Gray Vector</option>
    <option value="gray-vector">Gray Vector</option>	
    <option value="streets-vector">Streets Vector</option>
    <option value="topo-vector">Topo Vector</option>	
    <option value="streets-night-vector">Streets Night Vector</option>
    <option value="streets-relief-vector">Streets Relief Vector</option>	
    <option value="streets-navigation-vector">Streets Navigation Vector</option>
  </select>

  Map Services:
  <select id="ddlServices"></select> 
  <br>
  
  <table style="border-spacing:10px;" cellpadding="5px">
    <tr>
      <td valign="top">
        <div id="toc"></div>	
      </td>
      <td style="border: 1px solid black;">
        <div id="viewDiv" style='height:700px;width:900px;'></div>
      </td>
    <tr>
    <tr>
      <td colspan="2">
        <div...

CSS

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

JavaScript

var map, mapview, layer, mLayer, qResponse, selectedService;
    var eRequest;


    // TODO: 
    // - 1. IE refreshes performed default to topo, not the currently selected basemap on the form. 	

    $(document).ready(function() {
      createBasemapEventListener();   
    });

    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/request",
      "esri/layers/FeatureLayer",
      "esri/layers/MapImageLayer",
      "esri/widgets/Legend",
      "esri/widgets/Search",
      "esri/core/watchUtils",
      "dojo/domReady"], 
      function(Map, MapView, Request, FeatureLayer, MapLayer, Legend, Search) {
  
	eRequest = Request;
        map = new Map({basemap: ddlBaseMaps.options[0].value});
        
        // Map View 
        var viewOptions = {container: "viewDiv", map: map, zoom: 1, center: [ -117.1616394868625, 32.7127455035969] }
        mapview = new MapView(viewOptions);

  	// Legend Widget
        var legend = new Legend({view:mapview});
        mapview.ui.add(legend, "bottom-left");

        // Search Widget
        var search = new Search({view:mapview});
	mapview.ui.add(search, "top-left");

        addLayer(map, mapview, FeatureLayer);
          
 	// SERVICE CALLS ---- Working
        // var url = "http://server.arcgisonline.com/arcgis/rest/services/Reference?f=json";
        // var url = "http://server.arcgisonline.com/arcgis/rest/?f=json";
        var url = "http://sampleserver6.arcgisonline.com/arcgis/rest/services?f=json";
        
	var options = {responseType: "json"};
        
        // Dynamically populate the ArcGIS services DDL
        Request(url, options).then(function(response) {
          var result = response.data;     
          generateServices(result, MapLayer);
        })

        // Execute ArcGIS query
        //getCount(Request, thislayer.id);	

    }); // function(Map, MapView, Request, FeatureLayer, Legend)

    function createBasemapEventListener() {
     ...