JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html lang="en">
<head>
<meta 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></title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{ margin: 0; padding: 0; }
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.3"></script>
</head>
<body class="tundra">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>
JavaScript
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
var map;
function init() {
initLayer();
var ext = new esri.geometry.Extent({"xmin":-13118581,"ymin":3964406,"xmax":-13103905,"ymax":3974190,"spatialReference":{"wkid":102100}});
bmUrl = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
bm = new esri.layers.ArcGISTiledMapServiceLayer(bmUrl);
map = new esri.Map("map", {
"extent": ext,
"lods": [
{"level":7,"resolution":1222.99245256249,"scale":4622324.434309},
{"level":8,"resolution":611.49622628138,"scale":2311162.217155},
{"level":9,"resolution":305.748113140558,"scale":1155581.108577},
{"level":10,"resolution":152.874056570411,"scale":577790.554289},
{"level":11,"resolution":76.4370282850732,"scale":288895.277144},
{"level":12,"resolution":38.2185141425366,"scale":144447.638572},
{"level":13,"resolution":19.1092570712683,"scale":72223.819286},
{"level":14,"resolution":9.55462853563415,"scale":36111.909643},
{"level":15,"resolution":4.77731426794937,"scale":18055.954822},
{"level":16,"resolution":2.38865713397468,"scale":9027.977411}
]
});
map.addLayer(bm);
// show data from http://rootmetrics.com/
var rmLayer = new RootMetricsLayer();
map.addLayer(rmLayer);
}
function initLayer(){
dojo.declare("RootMetricsLayer", esri.layers.TiledMapServiceLayer, {
constructor: function() {
// full extent from the ocean base map service:
// http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer
var ext = new esri.geometry.Extent({"xmin":-22041259,"ymin":-33265069,"xmax":22041259,"ymax":33265069,"spatialReference":{"wkid":102100}});
this.spatialReference = new esri.SpatialReference({ wkid: 102100 });
this.initialExtent = this.fullExtent = ext;
this.tileServers = [
...