topic Re: OverView map floats over corner of page not corner of map in ArcGIS JavaScript Maps SDK Questions

OverView map floats over corner of page not corner of map

JamesB — Tue, 28 Sep 2010 10:25:35 GMT

I am following http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jssamples/map_overviewmap.html

And the overview map functions properly but it appears in the top right hand corner of the entire web page, not the map. This happens in IE, Chrome and FireFox. Has anyone come across this before?

One thing is I am not using the dojotype dijit.layout.* tags, I have my own div I am styling directly. But it must be possible to get this sample working without such tags?

Thanks,
James

Re: OverView map floats over corner of page not corner of map

JamesB — Sat, 11 Dec 2021 06:49:16 GMT

Looking at that sample, if I take the dojo markup out so the body tag goes:

  <body class="claro">
    <div style="width: 400px; height: 400px; margin: 0;">
      <div id="map">
      </div>
    </div>
  </body>

The overview box still appears over the top right of the page not the map. Is this how it's meant to work?

Re: OverView map floats over corner of page not corner of map

HeribertoMantilla_Santamaría — Sat, 11 Dec 2021 06:49:19 GMT

If you need put your OverviewMap in Special Div check out this example http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/map_overviewmap.html

Only add

// add the overview map
overviewMapDijit = new esri.dijit.OverviewMap({
    map: map
}, dojo.byId('overviewMapDiv'));

Re: OverView map floats over corner of page not corner of map

KellyHutchins — Sat, 11 Dec 2021 06:49:22 GMT

You can resolve this issue by adding "position:relative" to the map div's style. This is necessary because the overview map is absolutely positioned and its containing block will be the closest positioned ancestor element. Setting the position of the map's div to relative will make it the overview map's container. Details on this behavior can be found in this article:
http://www.brainjar.com/css/positioning/default4.asp

Here's a sample that shows how this works.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>
      Overview Map
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1">
    </script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.dijit.OverviewMap");
      var map;

      function init() {
        map = new esri.Map("mapDiv");
        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) {
          //add the overview map 
          var overviewMapDijit = new esri.dijit.OverviewMap({
            map: map,
            visible:true
          });
          overviewMapDijit.startup();
        });
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
      <div style="height:100px;">
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </div>
      <div id="mapDiv" style="border-style:solid; border-width:4px; border-color:green;width:400;height:500;position:relative;">
      </div>
  </body>

</html>

Re: OverView map floats over corner of page not corner of map

HeribertoMantilla_Santamaría — Tue, 28 Sep 2010 20:20:45 GMT

In this case if you use a Div with dojoType dijit.layout.BorderContainer and inside a map's Div Relative Position doesn't work.

Re: OverView map floats over corner of page not corner of map

JamesB — Thu, 30 Sep 2010 09:57:06 GMT

Setting position:relative worked for me, thank you