How to add inset box-shadow to mapbox-div?

Question

I am trying to add an inset box-shadow to a mapbox-div in a Bootstrap3 website. The problem is that the shadow is showing up for 1 second when the page is loading and then disappearing behind the map.

Any idea how to push the shadow to the front?

Here is my CSS:

#section1-wrapper {

    position:relative;
    height: 400px;  
}

#section1-container {

    background-color:black;
    background: rgba(0, 0, 0, 0.5);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);

    margin-top: 50px;

    color: #fff;
    height: 300px;
    position:relative;
    z-index: 1;
}

#map { 
    position: absolute;
    top:0;
    bottom:0;
    height: 100%;
    width:100%;
    z-index:0;

    -webkit-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
}

HTML:

<!-- Section1 -->

    <div class="row" id="section1-wrapper">    

        <div id="map"></div> 

        <div class="container" id="section1-container">

            <div class="col-xs-12 col-sm-12 col-md-12">

                <br />
                <br />

                <h1 class="text-center">Ipsum Lorum. <br /><br /> Ipsum Lorum.</h1>

                <br />
                <br />

            </div>

            <div class="row text-center">

                <div class="col-xs-12 col-md-4">
                    <address>
                        <strong><abbr title="Telefono">T:</abbr> 777777777</strong
                    </address>
                </div>
                <div class="col-xs-12 col-md-4">
                    <address>
                        <strong><abbr title="Mail">M:</abbr> <a href="mailto:#">info@eample.com</a></strong
                    </address>
                </div>
                <div class="col-xs-12 col-md-4">
                <address>
                        <strong><abbr title="Dirrecion">D:</abbr> any street</strong
                    </address>
                </div>


                <br />
                <br />
                <br />
                <br />

            </div>
        </div>

    <!-- Section1 End -->
    </div>

JavaScript:

<script src="//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js"></script>

     <script>
        var map = L.mapbox.map('map', 'examples.map-9ijuk24y', {
        scrollWheelZoom: false,
        zoomControl: false})
        .setView([40, -74.50], 9);

    </script>

There is a similar question already. Look at the answer by VisioN with additional div elements. http://stackoverflow.com/questions/11264240/add-inset-box-shadow-on-google-maps-element — jonasnas, Dec 21 '13 at 20:45
I already had a look at the suggested solutions: z-index variation, additional map-container and javascript-class are unfortunately not working in my case. — , Dec 21 '13 at 21:05

score 1 · Accepted Answer · answered Dec 21 '13 at 21:38

Add the shadow to a :before pseudo element or an empty div. For foolproof z-index you can also wrap the map in an additional div.

#map {
   position: relative;
   z-index: 0;
}

#map > .map-wrapper {
    position: relative;
    z-index: 5;
}

#map:before {
    content: '';
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 10;
    pointer-events: none;

    -webkit-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
}

This uses pointer-events: none; which means that it won't work below IE11. But there's really no way to add an element above another in a way that wont block click events. You could split the shadow in four different containers and place them top, left, right and bottom. But the area under the shadow will still be un-clickable without pointer-events none.

You could use a libary like Modernizr to check for the functionality and only add the shadow then. But it's a bit exessive to add another library just for that.

Straight forward solution. Works perfectly. Thanks a lot. – Dec 21 '13 at 21:59 — , Dec 21 '13 at 21:59

score 0 · Answer 2 · answered Jul 27 '16 at 09:51

it is not the best solution but worked for me

to set inset shadow in map

document.getElementById('map').childNodes[0].childNodes[0].childNodes[2].style.boxShadow='inset 0 0 150px #000000';

in all browser google map API generate map div in above fashion

How to add inset box-shadow to mapbox-div?

2 Answers2