JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Load a basic WebMap - 4.0</title>

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

  <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/calcite/calcite.css">

  <script src="https://js.arcgis.com/4.0/"></script>

  <script>
    require([
      "esri/widgets/Search",
      "esri/views/MapView",
      "esri/WebMap",
      "dojo/domReady!"
    ], function(
      Search, MapView, WebMap
    ) {

      /************************************************************
       * Creates a new WebMap instance. A WebMap must reference
       * a PortalItem ID that represents a WebMap saved to
       * arcgis.com or an on-premise portal.
       *
       * To load a WebMap from an on-premise portal, set the portal
       * url in esriConfig.portalUrl.
       ************************************************************/
      var webmap = new WebMap({
        portalItem: { // autocasts as new PortalItem()
          id: "df458c1c4c7b40a8a38357c8af318ea7"
        }
      });

      /************************************************************
       * Set the WebMap instance to the map property in a MapView.
       ************************************************************/
      var view = new MapView({
        map: webmap,
        container: "viewDiv"
      });
      
      var searchWidget = new Search({
          view: view
      });
        // Adds the search widget below other elements in
        // the top left corner of the view
      view.ui.add(searchWidget, {
        position: "top-left",
        index: 2
      });
              
      
    });
  </script>
</head>

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

</html>