2

Trying to use integrate a simple leaflet map within Bootstrap grid / column. While I am trying to follow tutorials and templates, for some reason the <div> id="map"</div>does not seem to be nesting within the column. The column only seems to be 1px in height. In fact, when looking at Firefox Inspector, the full extent of the map window doesn't even appear to be registering as part of the body (apologies for any dubious terminology - very much starting out and probably running before I can walk).

My simple code is as follows:

    <!-- Title 
================================================= -->

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h1>Simple Mapping Page</h1>
            <p class="lead">Some witty lead in text...</p>
        </div>
    </div>
</div>

<!-- Map Element 
================================================= -->

<div class="container">  
    <div class="row">
        <div class="col-md-6">  
            <div id="map"></div>
            <script>
            var map = L.map('map').setView([-41.2858, 174.78682], 14);
            mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';               
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data &copy; '+ mapLink , maxZoom: 24,}).addTo(map);
            </script>
        </div>
        <div class="col-md-6">
            <p>Some test text</p>
        </div>
    </div>
</div>

I also apply the following CSS:

#map {
width: 100%;
position: absolute;
height: 600px;
margin:0;
padding:0; 
border: 1px solid black;
border-radius: 8px;
}

While the second column appears to the right of the map, there is no padding etc.

  • I realise this is a sample written for Stack Exchange, but since you mentioned you're only just starting out I thought I'd offer this tip... rather than putting the JS code in-line on the HTML page, a more robust approach is to place it in a separate js file and reference this using <script src="xyz.js"></script> – Stephen Lead Aug 28 '14 at 23:56
1

I'm not entirely sure what is not working for you, but at a minimum your markup seems to be missing a L.tileLayer( declaration just before the open street layer tiles (around line 23)

That line should look like this: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data &copy; '+ mapLink , maxZoom: 24,}).addTo(map);

working version here: JSFiddle

Note: depending on your screen resolution, you may have to expand the map window in JSFiddle to see the two columns. As an alternative, you could use small columns (col-sm-$), or different column widths e.g. 8/4

  • Thanks for this. I think that line somehow got deleted or missed when I was messing about cutting and pasting code from different files. However, I think your fiddle nicely demonstrates the problem. The text from column 2 is sitting on to top of the map (looking at it on my ipad) which I assume it shouldn't be if it was working properly (or have I misunderstood how columns are supposed to work? Guess I should try to learn the basics first! Thanks again, much appreciated. – Steven Lee Aug 29 '14 at 6:56
  • Sorry, just noticed yor edit about column sizes... – Steven Lee Aug 29 '14 at 8:15
0

I had a similar problem and I managed to fix it by changing the div height with JavaScript. My code looks something like this:

function stuffToRezie(){
        var h_window = $(window).height();
        var h_map = h_window - 125;
        $('#map_canvas').css('height', h_map);
}

$(window).on("resize", stuffToRezie).trigger('resize'); 

In my case I had to calculate the map height. Another approach that should work is if you define a height of a parent div or the body.

0

Thanks for the suggestions. I tried adding height to the <div> and this worked in a fashion. However, I also simply changed position: absolute; to position: inherited; in the CSS file and this seems to have sorted it too! I'm not quite sure why, but it worked anyway.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.