How to add navbar to a leafletjs map using bootstrap?

[Luca Moiana]

What I’d like to do is to have a full width map with a fixed navbar and a sticky footer.

I came up with this: http://lucamoiana.github.io/valmorea/test.html (jsfiddle: http://jsfiddle.net/lucamoiana/hya12e0b/)

But

1 I can’t go full width

2 I can’t get the pop up on markers to open up

3 I can’t get the sticky footer to work

thanks a lot for your help

[Alpert]

Hi Luca,

Did you try this : https://github.com/bmcbride/bootleaf ?

A.

[Luca Moiana]

Hi,

Thanks for the reply. 

I know bootleaf but it's too complicated for my purpose and I'm not good enough to simplify. 

L

--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/b9hLU8h5MBY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Rowan Winsemius]

Hi Luca,

1. Instead of div class="container" you should use div class="container-fluid" to get the full width
see http://getbootstrap.com/css/#overview-container

3. THere is a good example of the css required for a sticky footer here, just check out the page source

Sorry I dont have time to diagnose number 2 but I'll check back in in a couple of days if it isn't fixed.

Cheers

Rowan

---

This message is intended for the addressee named and may contain confidential information. If you are not the intended recipient, please delete it and notify the sender. Views expressed in this message are those of the individual sender, and are not necessarily the views of their organisation.

[Luca Moiana]

thanks that help me get the full width, but still I have to specify the height of the map.

thanks

--

If we helped convince you not to print this email, go to www.printgreener.com/saveatree.php.

[Rowan Winsemius]

You should be able to do something like this in your css

<style> body {margin:0;padding:0;} #map {position: absolute;top:0;bottom:0;right:0;left:0;} </style>

That's the general idea anyway, you'll need to tweak it for your code but that should get you started.

Cheers

Rowan

[Bryan McBride]

Something like this: http://jsfiddle.net/bmcbride/hL4rhjcr/?

[Luca Moiana]

you are the man!!

THANKS A LOT FOR THE GREAT SW YOU ARE SHARING

--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/b9hLU8h5MBY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Luca Moiana]

I got the map on github lucamoiana.github.io/valmorea

and I'm costumizing it.

But why aren't my pop-up showing?

In this the reason: http://stackoverflow.com/questions/27161202/bootstrap-popover-not-working-inside-of-leaflet-popup

thnx

[Bryan McBride]

Since you are using Mapbox, you should remove the leaflet.js and leaflet.css references. You'll also need to change layer.bindPopup(feature.properties.Name); to layer.bindPopup(feature.properties.name); Notice the case change on the name property.

-Bryan

[Luca Moiana]

THNX