Trouble with Map Tiles Scrambled

[Chris]

I tried adding a map to a template the map tiles are all scrambled and could use some help.

http://brizaerial.com/testing/ is the page. I want it to take the whole class="content-wrapper" area.

If someone could please help if would be very much appreciated!

[ghybs]

Hi,

It looks like you import twice the Leaflet JS, but never the corresponding CSS?

Hope this helps.

[chris brisendine]

Oh I probably deleted the css I've been trying to work with it but no luck.

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

[ghybs 1]

Have you tried once the CSS is back?

I know that when it is missing, the map is usually totally messed up, in a somehow similar manner as yours.

Hope this helps.

[chris brisendine]

I Changed everything back it looks like the div is expanding every
tile is still scrambled and not working correctly.

[ghybs 1]

I see that you have now one Leaflet JS, but still no Leaflet CSS?

[chris brisendine]

Got that fixed and the map dissapeared now.

On Fri, Nov 13, 2015 at 11:11 AM, ghybs 1 <ghy...@gmail.com> wrote:
> I see that you have now one Leaflet JS, but still no Leaflet CSS?
>

[Anika Halota]

You can use the code inspector in your browser to help you debug this kind of stuff. I opened it up and was looking around for your map div, it has a height of 0px (but it's there!).

When you set the style of #map { width:100%; height:100%} but didn't set them for body or html, the map is taking up 100% of the "empty" space (because the tiles don't load until after it's built.

Just add above in your style html, body {height: 100%} or change #map {height: 500px;} (or whatever size) and it should work.

[chris brisendine]

Didn't Work.

[Anika Halota]

It doesn't like min-height for some reason. If you set it as just 'height', it appears. 

When using the 100% height property, it propagates up to each container. In your case, your map is nested 2 times I believe, so set "height:100%" for each of it's parent elements, and eventually it will kick in.

By the way, this link https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS has information on using the inspector tool in your browser (Chrome or Safari are similar) to debug your page without having to refresh for each tiny change.

[chris brisendine]

can you send me a code sample, so i can see what your talking about. I
done it with height and it didnt work.
thx