OverView map floats over corner of page not corner of map

JamesB · ‎09-28-2010

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

JamesB · ‎09-28-2010

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?

HeribertoMantilla_Santamaría · ‎09-28-2010

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_overviewma...

Only add

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

KellyHutchins · ‎09-28-2010

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>

HeribertoMantilla_Santamaría · ‎09-28-2010

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

JamesB · ‎09-30-2010

Setting position:relative worked for me, thank you