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.
You where right , thanks.Let me post the code:<!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>In fact this is only the first part of my problem; the other one is that i need to "center and zoom" a geometry to the center of this new extent but the "real" map extent must be unchanged. I will have to investigate on this further...Thanks again
