topic Re: debug map object css styling in ArcGIS JavaScript Maps SDK Questions

debug map object css styling

DavidMarquardt — Tue, 02 Jun 2015 17:39:02 GMT

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:

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

</div>

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

Re: debug map object css styling

ChrisSmith7 — Tue, 02 Jun 2015 20:14:18 GMT

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.

Re: debug map object css styling

DavidMarquardt — Tue, 02 Jun 2015 20:20:55 GMT

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

Re: debug map object css styling

YousefQuran — Wed, 03 Jun 2015 06:29:45 GMT

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

Re: debug map object css styling

ChrisSmith7 — Wed, 03 Jun 2015 14:01:26 GMT

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.

Re: debug map object css styling

ChrisSergent — Sun, 12 Dec 2021 02:50:54 GMT

If you are saying that the legend and other elements are covered by the map because the map takes up the entire space, you can set a z-index:0; in your css for the map like so:

#map
{
     z:index:0;
}

#legend
{
     z:index:50;
}

This will place your legend on top of the map. If the legend is not where you want it, you may want to use absolute positioning.

Re: debug map object css styling

DavidMarquardt — Wed, 03 Jun 2015 17:14:13 GMT

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.

Re: debug map object css styling

DavidMarquardt — Wed, 03 Jun 2015 17:23:02 GMT

Chris,

Thanks, this is helpful. while I had the legend, and other objects with a high z-index, i had the map set at -1 value,because of other issues (popups). Once I changed the z value to a positive value, the map was clickable.

Re: debug map object css styling

DavidMarquardt — Wed, 03 Jun 2015 17:29:43 GMT

here's an attached example. If you change the z-index to -1, you can click on the map as long as the css style position is absolute. As soon as you change it to relative and position child elements according to the parent, the map itself becomes un-clickable. Make the maps z-index positive, though, and this problem goes away.

Also, am wondering how to have a child positioned to the parent, but outside the object (such as just below it). If i change the text in my example (#message) to be below the map object (bottom:-40, for example) it is hidden. Any thoughts on how to solve this?

David

Re: debug map object css styling

ChrisSmith7 — Wed, 03 Jun 2015 17:31:39 GMT

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.

Re: debug map object css styling

DavidMarquardt — Wed, 03 Jun 2015 17:53:03 GMT

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.

Re: debug map object css styling

ChrisSmith7 — Sun, 12 Dec 2021 02:50:57 GMT

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.

Re: debug map object css styling

DavidMarquardt — Wed, 03 Jun 2015 19:41:41 GMT

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