nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

&lt;DIV&gt; extent

JorgeVinagre

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

Finde mehr Beiträge mit dem Tag

Accepted answers

JasonGreenlaw

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.

All comments

JorgeVinagre

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

JorgeVinagre

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

JasonGreenlaw

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.

BrettGreenfield__DNR_

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.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.