JSFiddle - React, Tailwind, and code Playground

by kenbuja

HTML

<!DOCTYPE html>
<title>Simple Map</title>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
<script type="text/javascript">
  dojo.require("esri.map");
  dojo.require("esri.dijit.Scalebar");
  dojo.require("esri.arcgis.utils");

  var map, startExtent;
  var GISLayer;

  function init() {
    startExtent = new esri.geometry.Extent(-27471128, -11652400, 4072293, 15507815, new esri.SpatialReference({ wkid: 3857}));
    map = new esri.Map("map", {
        logo: false,
        extent: startExtent,
        wrapAround180: true
    });
    dojo.connect(map, 'onLoad', function(mapLayout) {
      var scalebar = new esri.dijit.Scalebar({
        map: map,
        scalebarUnit: 'english'
      });
    });

    // add layers to map
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer");
    map.addLayer(basemap);

    var imageParameters = new esri.layers.ImageParameters();
    imageParameters.layerIds = [5,9];
    imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
    GISLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://service.ncddc.noaa.gov/arcgis/rest/services/OceanExploration/regatlasSATL/MapServer", { "imageParameters": imageParameters });
    map.addLayer(GISLayer);

    //1. set map extent example
    //map.setExtent(map.extent);

    //2. set map extent via esri.request
    //esri.request({
    //  url: "http://service.ncddc.noaa.gov/arcgis/rest/services/OceanExploration/regatlasSATL/MapServer/5",
    //  content: {
    //    f: "json"
    //  },
    //  handleAs: "json",
    //  callbackParamName: "callback"
    //  }).then(function (jsonLayer) {
    //    map.setExtent(new esri.geometry.Extent(jsonLayer.extent));
    //});

    //3. set map extent via esri.graphicsExtent
    //var zoomExtent = esri.graphicsExtent(GISLayer);
    //map.setExtent(zoomExtent, true)
    
    queryTask = new...

CSS

<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.csshttp://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/Soria/Soria.css"> <style> html, body, #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #FFF;
            overflow: hidden;
            font-family:"Trebuchet MS";
        }
        </style>