Using Leaflet inside Bootstrap container?

I have problem rendering leaflet map in a webpage using bootstrap. I have two columns col-4, col-8 in a bootstrap container. the col-4 has some text and col-8 has to render the leaflet map. But the map overlaps all other containers. I am not getting the styling right. Below is the html, css and js code.

HTML:

<!DOCTYPE html>

            <html>

            <head>

                <title>Bootstrap Version</title>

                <meta charset="utf-8">

                <meta name"viewport" content="width=device-width, initial-scale=1">

                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

                <link rel="stylesheet" href="css/style.css">





                <script type="text/javascript" src="js/uikit.js"></script>

                <script type="text/javascript" src="js/leaflet.js"></script>





            </head>

            <body>









            <nav class ="navbar navbar-default navbar-fixed-top" role ="navigation">

                        <a class="navbar-brand"  href="#"><img id ="logo" src="image/bootstrap.png">Bootstrap</a>   





                <div class ="container-fluid">

                    <div class ="navbar-header">

                            <button type="button" class ="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">

                                <span class="sr-only">Navigation</span>

                                <span class="icon-bar"></span>

                                <span class="icon-bar"></span>

                                <span class="icon-bar"></span>

                            </button>







                    </div>



                    <div class ="collapse navbar-collapse" id ="navbar-collapse-main">

                        <ul class ="nav navbar-nav navbar-right">

                            <li><a class="active" href="#">Home</a></li>

                            <li><a href="#">About</a></li>

                            <li><a href="#">Services</a></li>

                            <li><a href="#">Contact</a></li>



                        </ul>



                    </div>      



                </div>

            </nav>







            <div class="padding" id ="map-container">

            <div class="container">

                    <div class ="row">

                        <div class="col-md-4">

                            <p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.

                            </p>





                        </div>



                        <div class ="col-md-8">



                            <!--p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.

                            </p-->

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



                        </div>



                        </div>



                    </div>

                </div>



            </div>          

            </body>

            <script type="text/javascript" src="js/main.js"></script>

            </html>

CSS:

html, body{

                        height:100%;

                        width:100%;

                    }



                    .navbar{

                        background-color:#FFFFFF;

                        padding:1% 0;

                        font-size:12px;



                    }



                    .navbar-brand{

                        min-height:60px;

                        padding:0 20px 5px;

                        font-size: 16px



                    }



                    #logo{

                        height:55px;

                        width:55px;

                        margin: 10px 20px 10px 20px;

                        display:inline-block;

                    }





                    .navbar-default .navbar-nav li a {

                        color:#707b7c;

                    }



                    #navbar-collapse-main{

                        margin-right: 30px

                    }



                    #map-container{



                        padding-top:120px;

                        padding-left:10px;



                    }





                    #map {

                    position: absolute;

                    margin:0;

                    padding:0; 

                    border: 1px solid black;

                    border-radius: 8px;

                    }

JS:

console.log("Document ready!");



        // initialize the map on the "map" div with a given center and zoom

        var map = L.map('map', {

            center: [50.99, 10.191],

            zoom: 6,

            minZoom:6,

            maxBounds:[[55.3915921070334,20.610351562500004],[47.17477833929906,1.7138671875000002]]

        });







        var basemap = L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png");

        basemap.addTo(map);

edited 2 days ago

PolyGeo♦

53.7k1781244

asked 2 days ago

Jio

316215

add a comment |

HTML:

<!DOCTYPE html>

            <html>

            <head>

                <title>Bootstrap Version</title>

                <meta charset="utf-8">

                <meta name"viewport" content="width=device-width, initial-scale=1">

                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

                <link rel="stylesheet" href="css/style.css">





                <script type="text/javascript" src="js/uikit.js"></script>

                <script type="text/javascript" src="js/leaflet.js"></script>





            </head>

            <body>









            <nav class ="navbar navbar-default navbar-fixed-top" role ="navigation">

                        <a class="navbar-brand"  href="#"><img id ="logo" src="image/bootstrap.png">Bootstrap</a>   





                <div class ="container-fluid">

                    <div class ="navbar-header">

                            <button type="button" class ="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">

                                <span class="sr-only">Navigation</span>

                                <span class="icon-bar"></span>

                                <span class="icon-bar"></span>

                                <span class="icon-bar"></span>

                            </button>







                    </div>



                    <div class ="collapse navbar-collapse" id ="navbar-collapse-main">

                        <ul class ="nav navbar-nav navbar-right">

                            <li><a class="active" href="#">Home</a></li>

                            <li><a href="#">About</a></li>

                            <li><a href="#">Services</a></li>

                            <li><a href="#">Contact</a></li>



                        </ul>



                    </div>      



                </div>

            </nav>







            <div class="padding" id ="map-container">

            <div class="container">

                    <div class ="row">

                        <div class="col-md-4">

                            <p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.

                            </p>





                        </div>



                        <div class ="col-md-8">



                            <!--p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.

                            </p-->

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



                        </div>



                        </div>



                    </div>

                </div>



            </div>          

            </body>

            <script type="text/javascript" src="js/main.js"></script>

            </html>

CSS:

html, body{

                        height:100%;

                        width:100%;

                    }



                    .navbar{

                        background-color:#FFFFFF;

                        padding:1% 0;

                        font-size:12px;



                    }



                    .navbar-brand{

                        min-height:60px;

                        padding:0 20px 5px;

                        font-size: 16px



                    }



                    #logo{

                        height:55px;

                        width:55px;

                        margin: 10px 20px 10px 20px;

                        display:inline-block;

                    }





                    .navbar-default .navbar-nav li a {

                        color:#707b7c;

                    }



                    #navbar-collapse-main{

                        margin-right: 30px

                    }



                    #map-container{



                        padding-top:120px;

                        padding-left:10px;



                    }





                    #map {

                    position: absolute;

                    margin:0;

                    padding:0; 

                    border: 1px solid black;

                    border-radius: 8px;

                    }

JS:

console.log("Document ready!");



        // initialize the map on the "map" div with a given center and zoom

        var map = L.map('map', {

            center: [50.99, 10.191],

            zoom: 6,

            minZoom:6,

            maxBounds:[[55.3915921070334,20.610351562500004],[47.17477833929906,1.7138671875000002]]

        });







        var basemap = L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png");

        basemap.addTo(map);

edited 2 days ago

PolyGeo♦

53.7k1781244

asked 2 days ago

Jio

316215

add a comment |

HTML:

<!DOCTYPE html>

            <html>

            <head>

                <title>Bootstrap Version</title>

                <meta charset="utf-8">

                <meta name"viewport" content="width=device-width, initial-scale=1">

                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

                <link rel="stylesheet" href="css/style.css">





                <script type="text/javascript" src="js/uikit.js"></script>

                <script type="text/javascript" src="js/leaflet.js"></script>





            </head>

            <body>









            <nav class ="navbar navbar-default navbar-fixed-top" role ="navigation">

                        <a class="navbar-brand"  href="#"><img id ="logo" src="image/bootstrap.png">Bootstrap</a>   





                <div class ="container-fluid">

                    <div class ="navbar-header">

                            <button type="button" class ="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">

                                <span class="sr-only">Navigation</span>

                                <span class="icon-bar"></span>

                                <span class="icon-bar"></span>

                                <span class="icon-bar"></span>

                            </button>







                    </div>



                    <div class ="collapse navbar-collapse" id ="navbar-collapse-main">

                        <ul class ="nav navbar-nav navbar-right">

                            <li><a class="active" href="#">Home</a></li>

                            <li><a href="#">About</a></li>

                            <li><a href="#">Services</a></li>

                            <li><a href="#">Contact</a></li>



                        </ul>



                    </div>      



                </div>

            </nav>







            <div class="padding" id ="map-container">

            <div class="container">

                    <div class ="row">

                        <div class="col-md-4">

                            <p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.

                            </p>





                        </div>



                        <div class ="col-md-8">



                            <!--p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.

                            </p-->

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



                        </div>



                        </div>



                    </div>

                </div>



            </div>          

            </body>

            <script type="text/javascript" src="js/main.js"></script>

            </html>

CSS:

html, body{

                        height:100%;

                        width:100%;

                    }



                    .navbar{

                        background-color:#FFFFFF;

                        padding:1% 0;

                        font-size:12px;



                    }



                    .navbar-brand{

                        min-height:60px;

                        padding:0 20px 5px;

                        font-size: 16px



                    }



                    #logo{

                        height:55px;

                        width:55px;

                        margin: 10px 20px 10px 20px;

                        display:inline-block;

                    }





                    .navbar-default .navbar-nav li a {

                        color:#707b7c;

                    }



                    #navbar-collapse-main{

                        margin-right: 30px

                    }



                    #map-container{



                        padding-top:120px;

                        padding-left:10px;



                    }





                    #map {

                    position: absolute;

                    margin:0;

                    padding:0; 

                    border: 1px solid black;

                    border-radius: 8px;

                    }

JS:

console.log("Document ready!");



        // initialize the map on the "map" div with a given center and zoom

        var map = L.map('map', {

            center: [50.99, 10.191],

            zoom: 6,

            minZoom:6,

            maxBounds:[[55.3915921070334,20.610351562500004],[47.17477833929906,1.7138671875000002]]

        });







        var basemap = L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png");

        basemap.addTo(map);

edited 2 days ago

PolyGeo♦

53.7k1781244

asked 2 days ago

Jio

316215

HTML:

<!DOCTYPE html>

            <html>

            <head>

                <title>Bootstrap Version</title>

                <meta charset="utf-8">

                <meta name"viewport" content="width=device-width, initial-scale=1">

                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

                <link rel="stylesheet" href="css/style.css">





                <script type="text/javascript" src="js/uikit.js"></script>

                <script type="text/javascript" src="js/leaflet.js"></script>





            </head>

            <body>









            <nav class ="navbar navbar-default navbar-fixed-top" role ="navigation">

                        <a class="navbar-brand"  href="#"><img id ="logo" src="image/bootstrap.png">Bootstrap</a>   





                <div class ="container-fluid">

                    <div class ="navbar-header">

                            <button type="button" class ="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">

                                <span class="sr-only">Navigation</span>

                                <span class="icon-bar"></span>

                                <span class="icon-bar"></span>

                                <span class="icon-bar"></span>

                            </button>







                    </div>



                    <div class ="collapse navbar-collapse" id ="navbar-collapse-main">

                        <ul class ="nav navbar-nav navbar-right">

                            <li><a class="active" href="#">Home</a></li>

                            <li><a href="#">About</a></li>

                            <li><a href="#">Services</a></li>

                            <li><a href="#">Contact</a></li>



                        </ul>



                    </div>      



                </div>

            </nav>







            <div class="padding" id ="map-container">

            <div class="container">

                    <div class ="row">

                        <div class="col-md-4">

                            <p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.

                            </p>





                        </div>



                        <div class ="col-md-8">



                            <!--p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.

                            </p-->

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



                        </div>



                        </div>



                    </div>

                </div>



            </div>          

            </body>

            <script type="text/javascript" src="js/main.js"></script>

            </html>

CSS:

html, body{

                        height:100%;

                        width:100%;

                    }



                    .navbar{

                        background-color:#FFFFFF;

                        padding:1% 0;

                        font-size:12px;



                    }



                    .navbar-brand{

                        min-height:60px;

                        padding:0 20px 5px;

                        font-size: 16px



                    }



                    #logo{

                        height:55px;

                        width:55px;

                        margin: 10px 20px 10px 20px;

                        display:inline-block;

                    }





                    .navbar-default .navbar-nav li a {

                        color:#707b7c;

                    }



                    #navbar-collapse-main{

                        margin-right: 30px

                    }



                    #map-container{



                        padding-top:120px;

                        padding-left:10px;



                    }





                    #map {

                    position: absolute;

                    margin:0;

                    padding:0; 

                    border: 1px solid black;

                    border-radius: 8px;

                    }

JS:

console.log("Document ready!");



        // initialize the map on the "map" div with a given center and zoom

        var map = L.map('map', {

            center: [50.99, 10.191],

            zoom: 6,

            minZoom:6,

            maxBounds:[[55.3915921070334,20.610351562500004],[47.17477833929906,1.7138671875000002]]

        });







        var basemap = L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png");

        basemap.addTo(map);

leaflet bootstrapping

edited 2 days ago

PolyGeo♦

53.7k1781244

asked 2 days ago

Jio

316215

edited 2 days ago

PolyGeo♦

53.7k1781244

asked 2 days ago

Jio

316215

edited 2 days ago

PolyGeo♦

53.7k1781244

edited 2 days ago

PolyGeo♦

53.7k1781244

edited 2 days ago

PolyGeo♦

53.7k1781244

asked 2 days ago

Jio

316215

asked 2 days ago

Jio

316215

asked 2 days ago

Jio

316215

add a comment |

2 Answers
2

active

oldest

votes

Your map is missing a width and height. It's also specified as position:absolute, which will get it outside the flow of its container (the .col-md-8).

The critical bit of HTML is:

  <div class="row">

    <div class="col-md-4" style='border: 1px solid red'>

      <p>Lorem ipsum dolor sit amet</p>

    </div>



    <div class="col-md-8" style='border: 1px solid red '>

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

    </div>

  </div>

And the critical bit of CSS is:

#map {

  position: relative;

  border: 1px solid black;

  border-radius: 8px;

  height: 400px;  /* or as desired */

  width: 100%;  /* This means "100% of the width of its container", the .col-md-8 */

}

See an adapted example at this plunkr.

(This is besides your example code missing the Leaflet CSS, as noted by TomazicM)

answered 2 days ago

IvanSanchez

6,1331619

add a comment |

You are missing leaflet.css style link. Since you are using local Leaflet, I suppose it should be:

<link rel="stylesheet" href="css/leaflet.css">

You have also to specify map width and height. Width can be 100%, height has to be specific value in this case.

#map {

  width: 100%;

  height: 400px;

  position: absolute;

  margin:0;

  padding:0; 

  border: 1px solid black;

  border-radius: 8px;

}

edited 2 days ago

answered 2 days ago

TomazicM

1,3041216

yes I comment out the link to leafelt.css because with it i do not see the map at all

– Jio
2 days ago

You cannot do without leaflet.css. I discovered one other thing. You have to declare height and width of map div. Width can be 100%, height has to be specific value in this case. I modified my answer.

– TomazicM
2 days ago

Only now I discovered that IvanSanchez already discovered and answered this. I probably saw it at about the same time, but I'm watching Tirreno-Adriatico cycling on may PC at the same time and so was late in publishing the answer :-).

– TomazicM
2 days ago

add a comment |

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "79"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f315754%2fusing-leaflet-inside-bootstrap-container%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Your map is missing a width and height. It's also specified as position:absolute, which will get it outside the flow of its container (the .col-md-8).

The critical bit of HTML is:

  <div class="row">

    <div class="col-md-4" style='border: 1px solid red'>

      <p>Lorem ipsum dolor sit amet</p>

    </div>



    <div class="col-md-8" style='border: 1px solid red '>

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

    </div>

  </div>

And the critical bit of CSS is:

#map {

  position: relative;

  border: 1px solid black;

  border-radius: 8px;

  height: 400px;  /* or as desired */

  width: 100%;  /* This means "100% of the width of its container", the .col-md-8 */

}

See an adapted example at this plunkr.

(This is besides your example code missing the Leaflet CSS, as noted by TomazicM)

answered 2 days ago

IvanSanchez

6,1331619

add a comment |

Your map is missing a width and height. It's also specified as position:absolute, which will get it outside the flow of its container (the .col-md-8).

The critical bit of HTML is:

  <div class="row">

    <div class="col-md-4" style='border: 1px solid red'>

      <p>Lorem ipsum dolor sit amet</p>

    </div>



    <div class="col-md-8" style='border: 1px solid red '>

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

    </div>

  </div>

And the critical bit of CSS is:

#map {

  position: relative;

  border: 1px solid black;

  border-radius: 8px;

  height: 400px;  /* or as desired */

  width: 100%;  /* This means "100% of the width of its container", the .col-md-8 */

}

See an adapted example at this plunkr.

(This is besides your example code missing the Leaflet CSS, as noted by TomazicM)

answered 2 days ago

IvanSanchez

6,1331619

add a comment |

Your map is missing a width and height. It's also specified as position:absolute, which will get it outside the flow of its container (the .col-md-8).

The critical bit of HTML is:

  <div class="row">

    <div class="col-md-4" style='border: 1px solid red'>

      <p>Lorem ipsum dolor sit amet</p>

    </div>



    <div class="col-md-8" style='border: 1px solid red '>

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

    </div>

  </div>

And the critical bit of CSS is:

#map {

  position: relative;

  border: 1px solid black;

  border-radius: 8px;

  height: 400px;  /* or as desired */

  width: 100%;  /* This means "100% of the width of its container", the .col-md-8 */

}

See an adapted example at this plunkr.

(This is besides your example code missing the Leaflet CSS, as noted by TomazicM)

answered 2 days ago

IvanSanchez

6,1331619

Your map is missing a width and height. It's also specified as position:absolute, which will get it outside the flow of its container (the .col-md-8).

The critical bit of HTML is:

  <div class="row">

    <div class="col-md-4" style='border: 1px solid red'>

      <p>Lorem ipsum dolor sit amet</p>

    </div>



    <div class="col-md-8" style='border: 1px solid red '>

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

    </div>

  </div>

And the critical bit of CSS is:

#map {

  position: relative;

  border: 1px solid black;

  border-radius: 8px;

  height: 400px;  /* or as desired */

  width: 100%;  /* This means "100% of the width of its container", the .col-md-8 */

}

See an adapted example at this plunkr.

(This is besides your example code missing the Leaflet CSS, as noted by TomazicM)

answered 2 days ago

IvanSanchez

6,1331619

answered 2 days ago

IvanSanchez

6,1331619

answered 2 days ago

IvanSanchez

6,1331619

answered 2 days ago

IvanSanchez

6,1331619

add a comment |

You are missing leaflet.css style link. Since you are using local Leaflet, I suppose it should be:

<link rel="stylesheet" href="css/leaflet.css">

You have also to specify map width and height. Width can be 100%, height has to be specific value in this case.

#map {

  width: 100%;

  height: 400px;

  position: absolute;

  margin:0;

  padding:0; 

  border: 1px solid black;

  border-radius: 8px;

}

edited 2 days ago

answered 2 days ago

TomazicM

1,3041216

yes I comment out the link to leafelt.css because with it i do not see the map at all

– Jio
2 days ago

You cannot do without leaflet.css. I discovered one other thing. You have to declare height and width of map div. Width can be 100%, height has to be specific value in this case. I modified my answer.

– TomazicM
2 days ago

Only now I discovered that IvanSanchez already discovered and answered this. I probably saw it at about the same time, but I'm watching Tirreno-Adriatico cycling on may PC at the same time and so was late in publishing the answer :-).

– TomazicM
2 days ago

add a comment |

You are missing leaflet.css style link. Since you are using local Leaflet, I suppose it should be:

<link rel="stylesheet" href="css/leaflet.css">

You have also to specify map width and height. Width can be 100%, height has to be specific value in this case.

#map {

  width: 100%;

  height: 400px;

  position: absolute;

  margin:0;

  padding:0; 

  border: 1px solid black;

  border-radius: 8px;

}

edited 2 days ago

answered 2 days ago

TomazicM

1,3041216

yes I comment out the link to leafelt.css because with it i do not see the map at all

– Jio
2 days ago

You cannot do without leaflet.css. I discovered one other thing. You have to declare height and width of map div. Width can be 100%, height has to be specific value in this case. I modified my answer.

– TomazicM
2 days ago

Only now I discovered that IvanSanchez already discovered and answered this. I probably saw it at about the same time, but I'm watching Tirreno-Adriatico cycling on may PC at the same time and so was late in publishing the answer :-).

– TomazicM
2 days ago

add a comment |

You are missing leaflet.css style link. Since you are using local Leaflet, I suppose it should be:

<link rel="stylesheet" href="css/leaflet.css">

You have also to specify map width and height. Width can be 100%, height has to be specific value in this case.

#map {

  width: 100%;

  height: 400px;

  position: absolute;

  margin:0;

  padding:0; 

  border: 1px solid black;

  border-radius: 8px;

}

edited 2 days ago

answered 2 days ago

TomazicM

1,3041216

You are missing leaflet.css style link. Since you are using local Leaflet, I suppose it should be:

<link rel="stylesheet" href="css/leaflet.css">

You have also to specify map width and height. Width can be 100%, height has to be specific value in this case.

#map {

  width: 100%;

  height: 400px;

  position: absolute;

  margin:0;

  padding:0; 

  border: 1px solid black;

  border-radius: 8px;

}

edited 2 days ago

answered 2 days ago

TomazicM

1,3041216

edited 2 days ago

answered 2 days ago

TomazicM

1,3041216

answered 2 days ago

TomazicM

1,3041216

answered 2 days ago

TomazicM

1,3041216

yes I comment out the link to leafelt.css because with it i do not see the map at all

– Jio
2 days ago

You cannot do without leaflet.css. I discovered one other thing. You have to declare height and width of map div. Width can be 100%, height has to be specific value in this case. I modified my answer.

– TomazicM
2 days ago

Only now I discovered that IvanSanchez already discovered and answered this. I probably saw it at about the same time, but I'm watching Tirreno-Adriatico cycling on may PC at the same time and so was late in publishing the answer :-).

– TomazicM
2 days ago

add a comment |

yes I comment out the link to leafelt.css because with it i do not see the map at all

– Jio
2 days ago

You cannot do without leaflet.css. I discovered one other thing. You have to declare height and width of map div. Width can be 100%, height has to be specific value in this case. I modified my answer.

– TomazicM
2 days ago

Only now I discovered that IvanSanchez already discovered and answered this. I probably saw it at about the same time, but I'm watching Tirreno-Adriatico cycling on may PC at the same time and so was late in publishing the answer :-).

– TomazicM
2 days ago

yes I comment out the link to leafelt.css because with it i do not see the map at all

– Jio
2 days ago

You cannot do without leaflet.css. I discovered one other thing. You have to declare height and width of map div. Width can be 100%, height has to be specific value in this case. I modified my answer.

– TomazicM
2 days ago

Only now I discovered that IvanSanchez already discovered and answered this. I probably saw it at about the same time, but I'm watching Tirreno-Adriatico cycling on may PC at the same time and so was late in publishing the answer :-).

– TomazicM
2 days ago

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Geographic Information Systems Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr