Map that fills browser area

5,254 views
Skip to first unread message

Dr. YSG

unread,
May 21, 2012, 4:20:05 PM5/21/12
to leafl...@googlegroups.com
The following CSS code allows the Leaflet map to fill all of area of <body>. But now I would like to put in some fixed sized elements and have the map div take up the rest (without causing scroll bars in FireFox).

<body>

<div id="wrap">

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

html {
    margin: 0px;
    height: 100%;
}

body { margin: 0px;
    height: 100%;}

#wrap {
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;

}
#map {
    padding: 0px;
    height: 100%;
}
Message has been deleted

Dr. YSG

unread,
May 21, 2012, 4:32:27 PM5/21/12
to Leaflet

I.e. I want to add a <div> right after the #map div.

But I want the user to be able to grow the browser window and not see
the scroll bars, but have the map fill the browser.

Thomas Butler

unread,
May 21, 2012, 4:35:34 PM5/21/12
to leafl...@googlegroups.com
Use jQuery .append to add the div after the map is drawn

Thomas Butler

unread,
May 21, 2012, 4:39:48 PM5/21/12
to leafl...@googlegroups.com
#mappage {
    position: relative;
    height: 100% !important;
    width: 100%;
    z-index: 1 !important;
    overflow: hidden !important;
}

#mymap, #mapcontainer {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 425px !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

<div id="maps">
    <div id="mappage">
        <div id="mymap"></div>
    </div>
</div>

The map container  <div id="mapcontainer"></div> gets populated and inserted with a jQuery ajax call... but this works in jQuery mobile with Leaflet and in Firefox, Chrome and IE on a standard computer

Thomas Butler

unread,
May 21, 2012, 4:41:10 PM5/21/12
to leafl...@googlegroups.com
Mostly, I think you're missing the overflow: hidden

Thomas Butler

unread,
May 21, 2012, 4:43:30 PM5/21/12
to leafl...@googlegroups.com
now, you can add other <divs> inside the mapcontainer and give them a z-index that would float above the map data :)  Hope that helps

Vladimir Agafonkin

unread,
May 23, 2012, 5:57:19 AM5/23/12
to leafl...@googlegroups.com
Hi,

Instead of using the height: 100% trick, you can use position: absolute along with top/bottom/left/right properties, like this:

#map {
    position: absolute;
    top: 200px; /* if you have a 200px block at the top */
    left: 0;
    right: 0;
    bottom: 0;
}

It won't work in older IE but there are workaround like using CSS expressions or tracking window resize event with JS.

2012/5/21 Dr. YSG <ygutf...@gmail.com>

Gabriele

unread,
May 23, 2012, 5:48:46 PM5/23/12
to Leaflet
On 23 Mag, 11:57, Vladimir Agafonkin <agafon...@gmail.com> wrote:
> Hi,
>
> Instead of using the height: 100% trick, you can use position: absolute
> along with top/bottom/left/right properties, like this:
>
> #map {
>     position: absolute;
>     top: 200px; /* if you have a 200px block at the top */
>     left: 0;
>     right: 0;
>     bottom: 0;
>
> }
>
> It won't work in older IE but there are workaround like using CSS
> expressions or tracking window resize event with JS.


Hello Vladimir,

would it work using 'background:cover' ? I'm wondering how to put the
map as the background image...

Gabriele

Vladimir Agafonkin

unread,
May 24, 2012, 5:02:11 AM5/24/12
to Leaflet
Hi Gabriele,

No, background: cover only works for one image, not for interactive
maps.
To pu the map as a background, make it position: fixed and put all the
other content "over" it by making it also positioned (position:
relative or absolute) and with a higher z-index.

shame...@gmail.com

unread,
Mar 2, 2013, 6:07:11 PM3/2/13
to leafl...@googlegroups.com
I have been following this thread and nothing seems to work completely. I get the best results when I use the following CSS fragment:

html, body {padding: 0; margin: 0; width: 100%; height: 100%;}
.pagemap, .contentmap, .ui-content, #map {width: 100%; height: 100%;}
#map { height: 100%; min-height: 100%; margin: -15px;}   
.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { display: block !important;}

With footer and header set this way:

<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-fullscreen="false">

But even then the map is centered approx 30px lower than it should be and there is a vertical scroll-bar.
Any further suggestions?

Romke

Dr. YSG

unread,
Mar 2, 2013, 9:08:56 PM3/2/13
to leafl...@googlegroups.com
I have a jsbin which works with all the browsers I have tested (I have not tested mobile browsers).

http://jsbin.com/ojupus/4/edit





shame...@gmail.com

unread,
Mar 3, 2013, 4:08:32 AM3/3/13
to leafl...@googlegroups.com
Thanks. It'll be a while before I can try it out with Cloudmade as map server. But I fear the worst, because it ignores the fact that the problrm is a js conflict between leaflet and jquery.mobile. This adds to the js instead of circumventing it with css. But like I said, I'll try it out along side of jquery.mobile on a mobile device.
Thanks again.

Dr. YSG

unread,
Mar 3, 2013, 10:43:38 AM3/3/13
to leafl...@googlegroups.com
My example does use the cloudmade layers (see the layer control on the right side).

I also create for mobile. But I use the KendoUI widgets (Jquery based). I have no problems with full screen on tablets. Not sure if you want to go to smart phones (it is too small for most maps we would use). But they also have a mobile set of gui widgets that mimic phone widgets.






shame...@gmail.com

unread,
Mar 3, 2013, 4:28:42 PM3/3/13
to leafl...@googlegroups.com
I just added:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

to your jsbin and it tried endlessly (and unsuccessfully) to load. Once again, I think jquery.mobile is the guilty one.

shame...@gmail.com

unread,
Mar 7, 2013, 2:46:03 PM3/7/13
to leafl...@googlegroups.com
To answer my own question, the css should read:

body {padding: 0; margin: 0; height: 100%; width: 100%;}
#map { position: absolute; top: 0; left: 0; height: 100%; width: 100%;}
Reply all
Reply to author
Forward
0 new messages