<div onMouseOver="map.panleft();">Left</div>
<!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>Topographic Map</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0; } #panMap { position: absolute; left: 10px; bottom: 10px; width: 200px; height: 50px; background-color: #444; color: #fff; z-index: 40; padding: 5px; } </style> <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script> <script type="text/javascript"> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); var map, resizeTimer; function init() { var initExtent = new esri.geometry.Extent({"xmin":-13632648,"ymin":4542594,"xmax":-13621699,"ymax":4546875,"spatialReference":{"wkid":102100}}); map = new esri.Map("map",{extent:initExtent}); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); map.addLayer(basemap); dojo.connect(map, 'onLoad', function(theMap) { dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized clearTimeout(resizeTimer); console.log('resize'); resizeTimer = setTimeout( function() { map.resize(); map.reposition(); }, 500); }); }); dojo.connect(dojo.byId('panMap'), 'onmouseover', function() { map.panLeft(); }); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;"> <div id="panMap"> mouse over to pan left/west </div> </div> </div> </body> </html>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
