topic &lt;DIV&gt; extent in ArcGIS JavaScript Maps SDK Questions

<DIV> extent

JorgeVinagre — Fri, 21 Feb 2014 17:46:48 GMT

Hi there

I have a question about conversion from and to map coordinates and screen coordinates(pixels)
I'm going to try to explain and i hope not to confuse.
It's like this:
Suppose we have a <div> that contains a map(no matter the size), and we have another div inside that sometimes
presents information to the user.
This second div has the same with as the map div, but has 40% of its heigth and its "glued" to the bottom of the map div.
So, this leaves about 60% of the map visible.
Now, what I need and can't calculate is the extent of that 60% in map coordinates.

I hoope I did I made myself clear

Thanks

Re:
extent

BrettGreenfield__DNR_ — Fri, 21 Feb 2014 18:03:17 GMT

If you have Firebug installed, once you open the map you can go into the Firebug console and type map.extent; this will return the extent of the visible portion of the map.

Re:
extent

JasonGreenlaw — Fri, 21 Feb 2014 19:49:10 GMT

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.

Re:
extent

JorgeVinagre — Fri, 21 Feb 2014 21:26:28 GMT

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 will check on your tip

Re:
extent

JorgeVinagre — Sat, 11 Dec 2021 14:32:28 GMT

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

topic &amp;lt;DIV&amp;gt; extent in ArcGIS JavaScript Maps SDK Questions

&lt;DIV&gt; extent

Re: extent

Re: extent

Re: extent

Re: extent

topic <DIV> extent in ArcGIS JavaScript Maps SDK Questions

<DIV> extent

Re:
extent

Re:
extent

Re:
extent

Re:
extent