debug map object css styling

[DavidMarquardt]

Hello,

I have an app that runs in a small space - 400 x 500 px.  In order to do this, I'm having the map object cover the entire space, and all other elements sit on top of it (title, text and legend).  My legend is created outside of of the default map legend. When I change the map object styling - in this case position:relative - I loose the ability to have a click event on the map (in debugging, added a click event that works only when position is absolute).  If I keep it absolute (and the child elements position themselves according to the window instead of map), then I am able to click on map. 

I want to figure out what could be 'covering' the map object, making it unclickable. Or, find out if the map object just looses functionality when changing the position to relative.

Here's what the app looks like:

the map creation script looks like this:

app.map = new esri.Map("map", {

     extent : ext,

     showAttribution : false,

     logo : false,

     navigationMode : "classic"

});    

The html looks like this:

<div id = "map">

     <div id = "TitleLayer">

          <span id = "title"> ERS ATLAS</span>

     </div>

     <div id= "legend">

          <div id= "units" ></div>

          <table id = "legend" border = '1'>

                <tbody id = "tabBody1">

               </tbody>

          </table>

     </div>

     <div class="note" > Click map to zoom <br>To pan, click and hold while moving pointer>

</div>

On the css side, the legend, title and notes all have a position of 'absolute' and the map object has a position of 'relative'

I'm guessing that some object, while map is in relative mode, is covering it up.  While debugging elements in the browser, it seems like these three children objects don't cover a larger space than what is shown in the illustration above. 

Anybody had a similar issue?  Any ideas on how to better debug this situation?

David

P.S., I'm using the js api 3.10.

[ChrisSmith7]

Do you by chance have this publicly accessible anywhere? I embed several maps on pages and have run into similar issues due to lack of real-estate.

[DavidMarquardt]

Chris,

Unfortunately, I don't have it publicly available.  There's a lot of extraneous script and styling attached, but was hoping that, since changing the position from relative to absolute made the difference, the description would be enough to get a discussion going.  I'll see if I can get a short example on here to illustrate the point...

David

[YousefQuran]

Hi,

you can but the legend out side of map DIV without need of be inside of map.. anyways there is more flexible solution in such small places like the legend in this sample .. Hope this help you.

Regards,
Yusuf

[ChrisSmith7]

Is David for sure having a problem with the legend? It sounds like he isn't certain what's causing the problem - I was hoping to have a look at it live to get a better feel for what's going on.

[DavidMarquardt]

Thanks!  this is great to know.  I'm having issues with positioning (relative, absolute) of these objects.  But I might use this in the future, thanks.

[ChrisSmith7]

David,

I had problems with legend placement - I ended up attaching it to a node below the map, then massaged the returned object in jQuery. Basically, I transposed the table horizontally and applied some styling overrides, so it ended-up looking like this:

It removed any clutter I had with the standard legend overlaying the map.

[DavidMarquardt]

So, if I understand correctly, you have a parent object of some sort, and the map and the legend are its two children.  Correct?

Would love to see the .js you used to construct the horizintal legend (new column for each value).  I've been working outside of ESRI legend tools, and making my own.  All I can do at this point is add a row with swatch image and value, such as in the attached file. 

[ChrisSmith7]

Basically, I have the map container, and below it, placeholder divs for stuff I don't want on the map, such as the legend. I create the legend like you would normally:

              var legend = new Legend({
                  map: map,
                  layerInfos: [{ "layer": mapLayer, "title": mapTitle}],
                  autoUpdate: false
              }, ",phMapLegend");
              legend.startup();

I attach to some map events, so after the maps loads and all of the category rendering is done, and the legend is created, I call up a custom map module to massage the legend that the API created from whatever is currently displayed.

I actually end-up doing a bit of massaging on the labels, and then on the transposition - I started with this from Stack Overflow:

javascript - How to invert the rows and columns of an HTML table? - Stack Overflow

Which got the basic transposition to work, pretty much without a lot of modification, though I did need to point it to the right object:

$("table", $('#phMapLegend_featLayer')).each(function () {...

I have a lot of custom stuff for our purpose I'd need to pull out before I can get something I can post as far as a full working demo. But, in hindsight, this might not be the greatest idea since you're tied to the API... if it changes, like during a version upgrade, it could (and probably will) break the custom handling in place. I am actually looking at just creating my own legend class, so I don't need the API legend object.

[DavidMarquardt]

Well, trying to get away from the API.  The only real ESRI module I'm using at this point for the legend creation is ESRI request.  Everything else is dojo.  If you've got some more examples, snippets, feel free to share.

David