JSFiddle - React, Tailwind, and code Playground
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" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/Nihilo/Nihilo.css">
<style type="text/css">
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
body{
background-color:white; overflow:hidden;
}
#mapLeft {
width: 50%;
}
</style>
<script type="text/javascript">var djConfig = { parseOnLoad: true };</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
function init() {
var initialExtent = new esri.geometry.Extent({"xmin":-13203273,"ymin":4024109,"xmax":-13158022,"ymax":4048033,"spatialReference":{"wkid":102100}});
mapRight = new esri.Map("mapRight", {
extent: initialExtent
});
mapLeft = new esri.Map("mapLeft", {
extent: initialExtent
});
dojo.connect(mapRight, 'onLayersAddResult', function(e) {
console.log('RIGHT: ', e);
});
dojo.connect(mapLeft, 'onLayerAddResult', function(e) {
console.log('LEFT: ', e);
});
var url = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer";
var tiledLayer1 = new esri.layers.ArcGISTiledMapServiceLayer(url);
mapRight.addLayers([ tiledLayer1 ]);
var tiledLayer2 = new esri.layers.ArcGISTiledMapServiceLayer(url);
mapLeft.addLayers([tiledLayer2]);
...