topic Re: Map shadow in ArcGIS JavaScript Maps SDK Questions

Map shadow

AlexGole — Tue, 26 Aug 2014 18:46:12 GMT

Hi all,

I am looking to add some show between the west and east panels (JQuery UI layout). I tried adding box-shadow: inset but dont get any positive results except in Firebug when I change the SVG map-gc.

End result should look like this:

As I have it, only the header box-shadow shows:

Re: Map shadow

RiyasDeen — Wed, 27 Aug 2014 07:44:35 GMT

Hi Alex,

Is this what you are after?

Edit fiddle - JSFiddle

Re: Map shadow

AlexGole — Wed, 27 Aug 2014 15:43:46 GMT

Riyas,

This is exactly what I am after. The only problem with this is that I am using JQuery UI Layout not dojo. the box-shadow: inset.... works great for this layout too but when I add the map to the center pane then the map it self hides the inset shadow. Playing around with Firefox, I saw that it could work if I add some css to "map.gc" SVG...

Now when adding some code "box-shadow: inset....!important" in my script, it does not do anything. Any idea?

By the way I really like the shadow you added to the slider!

Alex

Re: Map shadow

RiyasDeen — Wed, 27 Aug 2014 16:00:09 GMT

Hi ALex,

My knowledge on JQuery Layout is limited. If you look at my code.

Below span tag

<span id="shadow" style="height: 100%; width: 100%;"></span>

And below CSS style are the one's which is creating the map shadow.

#shadow {
         -moz-box-shadow:    inset 0 0 10px #000000;
         -webkit-box-shadow: inset 0 0 10px #000000;
         box-shadow:         inset 0 0 10px #000000;
  z-index: 10000;
  background: transparent;
  position: absolute;
  left: 0px;
  top: 0px;
}

The span tag is placed within the map container, as long as you place the span tag inside your map container div and have the CSS class you should get the shadow.

Re: Map shadow

AlexGole — Wed, 27 Aug 2014 17:23:50 GMT

It is not working with JQuery layout UI but it looks great in dojo. Thank you for sharing! I will need to find a fix in Jquery.

Re: Map shadow

AlexGole — Wed, 27 Aug 2014 22:37:25 GMT

Riyas and anyone else encountering the same issue as mine,

I found the solution to my problem. It seems like it is one of the issues that exist when working with dojo and JQuery at the same time. The fix is the following:

CSS:

svg#map_gc {

box-shadow: inset 0 0 20px black;

}

Thank you,

Alex