Solved! Go to Solution.
I think the following should work, although I have not tested it:
- Determine the screen coordinates of the upper-left and upper-right corners of your inner div. You can do this by using the position() function of dojo/dom-geometry
- Convert these screen coordinates into esri/geometry/ScreenPoint objects by subtracting the x/y position of the map div's origin (upper-left corner of the map, in screen coordinates)
- Convert these ScreenPoints into map points using the toMapGeometry(...) function of esri/geometry/screenUtils
- The desired extent can be constructed using the map's top-left (map.extent.xmin, map.extent.ymax) and top-right (map.extent.xmax, map.extent.ymax) map coordinates along with the newly-calculated coordinates.
I think the following should work, although I have not tested it:
- Determine the screen coordinates of the upper-left and upper-right corners of your inner div. You can do this by using the position() function of dojo/dom-geometry
- Convert these screen coordinates into esri/geometry/ScreenPoint objects by subtracting the x/y position of the map div's origin (upper-left corner of the map, in screen coordinates)
- Convert these ScreenPoints into map points using the toMapGeometry(...) function of esri/geometry/screenUtils
- The desired extent can be constructed using the map's top-left (map.extent.xmin, map.extent.ymax) and top-right (map.extent.xmax, map.extent.ymax) map coordinates along with the newly-calculated coordinates.
<!DOCTYPE html> <html lang="en"> <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"> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"> <style type="text/css"> html,body,#mapDiv{ width: 100%; height: 100%; padding: 0px; margin: 0px; } .headerDiv{ position: absolute; top: 0; height: 15%; width: 100%; border: 1px solid black; } .outterDiv{ position:absolute; width: 80%; height: 84%; border: 1px solid black; bottom: 0; right: 0; top:auto; } .innerDiv{ position: absolute; width: 100%; height: 40%; border: 0px solid black; bottom: 0; } </style> </head> <body> <div class="headerDiv"> Header </div> <div class="outterDiv"> <div id="mapDiv"></div> <div id="inner" class="innerDiv"> <span>Some content</span> </div> </div> <script src="http://js.arcgis.com/3.8compact/"></script> <!--script src="//code.jquery.com/jquery-1.10.2.js"></script--> <script type="text/javascript"> var map; require([ "esri/map", "esri/geometry/Extent", "esri/dijit/Popup", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/geometry/screenUtils", "esri/geometry/ScreenPoint", "esri/graphic", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/geometry/Point", "dojo/dom-geometry", "dojo/dom", "dojo/domReady!" ], function( Map, Extent, Popup, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, screenUtils, ScreenPoint, Graphic, SimpleFillSymbol, SimpleMarkerSymbol, Point, domGeometry, dom ) { var initExtent = new Extent({ xmin: -13443133.0385669, ymin: -4931105.568731996, xmax: 17865473.74703294, ymax: 9373014.156438931, spatialReference: { wkid: 102100 } }); map = new Map("mapDiv", { extent:initExtent, zoom:5, infoWindow: new Popup(null, dojo.create("div")) }); var layers = []; var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer"); layers.push(basemap); /** var wellsLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", { "opacity" : 0.5 }); layers.push(wellsLayer); */ map.addLayers(layers); map.on("layers-add-result",function(results){ console.log("Layers added"); var mapDivNode = dom.byId("mapDiv"); var mapDivNodePos = domGeometry.position(mapDivNode,false); var innerDivNode = dom.byId("inner"); var pos = domGeometry.position(innerDivNode,false); console.log("inner upper left:" + JSON.stringify(pos)); var screenPointUpperLeft =new ScreenPoint(pos.x - mapDivNodePos.x,pos.y - mapDivNodePos.y); console.log("screenPointX" + JSON.stringify(screenPointUpperLeft)); var screenPointUpperRight =new ScreenPoint(pos.x + pos.w - mapDivNodePos.x,pos.y - mapDivNodePos.y); console.log("screenPointY" + JSON.stringify(screenPointUpperRight)); var upperLeftPoint = map.toMap(screenPointUpperLeft); var upperRightPoint = map.toMap(screenPointUpperRight); console.log("onePoint" + JSON.stringify(upperLeftPoint)); /** * Upper left point of inner div */ var p1 = new Point(upperLeftPoint.x,upperLeftPoint.y, map.spatialReference); /** * Upper right point of inner div - not needed for new extent calculation */ var p2 = new Point(upperRightPoint.x,upperRightPoint.y, map.spatialReference); /** * Let us see these point.... */ var markerSymbol = new SimpleMarkerSymbol(); map.graphics.add(new Graphic(p1, markerSymbol)); map.graphics.add(new Graphic(p2, markerSymbol)); /** * Create new extent - the lower left point of the envelope is the upper inner div left point */ var newExtent = new Extent(upperLeftPoint.x,upperLeftPoint.y,map.extent.xmax,map.extent.ymax,map.spatialReference); /** * Extent geometry */ var fillSymbol = new SimpleFillSymbol(); map.graphics.add(new Graphic(newExtent, fillSymbol)); }); }); </script> </body> </html>