JSFiddle - React, Tailwind, and code Playground

by schlomm

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Mobile Popup</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
    
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      #someButton {
        bottom: 20px;
        position: absolute;
        right: 20px;
        z-index: 10;
      }
    </style>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2compact"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.arcgis.utils");
      dojo.require("esri.dijit.PopupMobile");
      
      var map,popup;
      
      function init() {
        //create a mobile popup
        popup = new esri.dijit.PopupMobile(null, dojo.create("div"));
        
        var mapDeferred = esri.arcgis.utils.createMap("661826977c5948eca3c55276fa1b0960", "map", {
          mapOptions: {
            slider: true,
            infoWindow:popup,
            logo: false
          }
        });
        
        mapDeferred.addCallback(function(response) {
          map = response.map;  
          //resize the map when the browser resizes
          dojo.connect(window, "resize", map, map.resize);
          
          map.setExtent(new esri.geometry.Extent({"xmin":-52909106,"ymin":935889,"xmax":-40483503,"ymax":7451993,"spatialReference":{"wkid":102100}}));
        });
        mapDeferred.addErrback(function(error) {
          console.log("Map creation failed: ", dojo.toJson(error));
        });
      }
      dojo.ready(init);
    </script>
  </head>
  
  <body class="tundra">
    <div id="map">
      <button id="someButton">Clicky</button>
   ...