<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
#map1Div ,#map2Div,#splitDiv{
float:left;
}
#splitDiv{
2px;
background:solid 2px green;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var map1,map2;
require(["esri/map", "dojo/_base/connect", "dojo/domReady!"], function(Map, connect) {
map1 = new Map("map1Div", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
map2 = new Map("map2Div", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
var panStatus = {source:map1,panning:false,startMap:null,endMap:null};
connect.connect(map1,"onPanStart",function(){
panStatus.panning = true;
});
connect.connect(map1,"onMouseDragStart",function(){
panStatus.source = map1;
});
connect.connect(map1,"onMouseDragEnd",function(){
sameExtent(panStatus.startMap, panStatus.source!=panStatus.startMap);
});
connect.connect(map1,"onExtentChange",function(){
sameExtent(map1);
});
connect.connect(map2,"onPanStart",function(){
panStatus.panning = true;
});
connect.connect(map2,"onMouseDragStart",function(){
panStatus.source = map2;
});
connect.connect(map2,"onMouseDragEnd",function(){
sameExtent(panStatus.startMap, panStatus.source!=panStatus.startMap);
});
connect.connect(map2,"onExtentChange",function(){
sameExtent(map2);
});
function sameExtent(mm,changed){
if((changed||panStatus.source==mm)&&mm==map1){
map2.setExtent(map1.extent,true);
}else if((changed||panStatus.source==mm)&&mm==map2){
map1.setExtent(map2.extent,true);
}
}
});
</script>
</head>
<body>
<div id="map1Div"></div>
<div id="splitDiv"></div>
<div id="map2Div"></div>
</body>
</html>