Using Leaflet inside Bootstrap container?Sizing Leaflet Map inside bootstrapBootstrap and Leaflet - Grid IssueBootstrap navbar and leaflet zoom controlsLeaflet Opacity Control Using Slider For BootstrapLeaflet map loads incorrectly when inside a Bootstrap .collapse elementPlacing controls outside map container with Leaflet?MarkerCluster don't work with geojson layer in leafletRemove routing-container of leaflet-routingUsing ArcGIS JavaScript API feature table using bootstrap wrappersleaflet search control not showing up in geodjango app
When and why was runway 07/25 at Kai Tak removed?
Deciphering cause of death?
Giving feedback to someone without sounding prejudiced
Why can't the Brexit deadlock in the UK parliament be solved with a plurality vote?
El Dorado Word Puzzle II: Videogame Edition
Is there a reason to prefer HFS+ over APFS for disk images in High Sierra and/or Mojave?
How do I fix the group tension caused by my character stealing and possibly killing without provocation?
How would a solely written language work mechanically
Make a Bowl of Alphabet Soup
Isometric embedding of a genus g surface
If the only attacker is removed from combat, is a creature still counted as having attacked this turn?
Ways of geometrical multiplication
When is "ei" a diphthong?
How can I, as DM, avoid the Conga Line of Death occurring when implementing some form of flanking rule?
"Oh no!" in Latin
Integral Notations in Quantum Mechanics
Is there a RAID 0 Equivalent for RAM?
What is this high flying aircraft over Pennsylvania?
Should I warn new/prospective PhD Student that supervisor is terrible?
PTIJ: Which Dr. Seuss books should one obtain?
Alignment of six matrices
How to make a list of partial sums using forEach
Can you identify this lizard-like creature I observed in the UK?
How do I prevent inappropriate ads from appearing in my game?
Using Leaflet inside Bootstrap container?
Sizing Leaflet Map inside bootstrapBootstrap and Leaflet - Grid IssueBootstrap navbar and leaflet zoom controlsLeaflet Opacity Control Using Slider For BootstrapLeaflet map loads incorrectly when inside a Bootstrap .collapse elementPlacing controls outside map container with Leaflet?MarkerCluster don't work with geojson layer in leafletRemove routing-container of leaflet-routingUsing ArcGIS JavaScript API feature table using bootstrap wrappersleaflet search control not showing up in geodjango app
1
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/yr.png");
basemap.addTo(map);
leaflet bootstrapping
edited Mar 17 at 11:18
PolyGeo♦
53.7k1781244
asked Mar 17 at 11:13
JioJio
316215
add a comment |
1
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/yr.png");
basemap.addTo(map);
leaflet bootstrapping
edited Mar 17 at 11:18
PolyGeo♦
53.7k1781244
asked Mar 17 at 11:13
JioJio
316215
add a comment |
1
1
1
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/yr.png");
basemap.addTo(map);
leaflet bootstrapping
edited Mar 17 at 11:18
PolyGeo♦
53.7k1781244
asked Mar 17 at 11:13
JioJio
316215
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/yr.png");
basemap.addTo(map);
leaflet bootstrapping
leaflet bootstrapping
edited Mar 17 at 11:18
PolyGeo♦
53.7k1781244
asked Mar 17 at 11:13
JioJio
316215
edited Mar 17 at 11:18
PolyGeo♦
53.7k1781244
asked Mar 17 at 11:13
JioJio
316215
edited Mar 17 at 11:18
PolyGeo♦
53.7k1781244
edited Mar 17 at 11:18
PolyGeo♦
53.7k1781244
edited Mar 17 at 11:18
PolyGeo♦
53.7k1781244
53.7k1781244
asked Mar 17 at 11:13
JioJio
316215
asked Mar 17 at 11:13
JioJio
316215
asked Mar 17 at 11:13
JioJio
316215
316215
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
2
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 Mar 17 at 14:57
IvanSanchezIvanSanchez
6,1431619
add a comment |
2
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;
answered Mar 17 at 12:12
TomazicMTomazicM
1,3311216
yes I comment out the link to leafelt.css because with it i do not see the map at all
– Jio
Mar 17 at 12:16
You cannot do withoutleaflet.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
Mar 17 at 15:11
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
Mar 17 at 15:24
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');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
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 Mar 17 at 14:57
IvanSanchezIvanSanchez
6,1431619
add a comment |
2
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 Mar 17 at 14:57
IvanSanchezIvanSanchez
6,1431619
add a comment |
2
2
2
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 Mar 17 at 14:57
IvanSanchezIvanSanchez
6,1431619
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 Mar 17 at 14:57
IvanSanchezIvanSanchez
6,1431619
answered Mar 17 at 14:57
IvanSanchezIvanSanchez
6,1431619
answered Mar 17 at 14:57
IvanSanchezIvanSanchez
6,1431619
answered Mar 17 at 14:57
IvanSanchezIvanSanchez
6,1431619
6,1431619
add a comment |
add a comment |
2
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;
answered Mar 17 at 12:12
TomazicMTomazicM
1,3311216
yes I comment out the link to leafelt.css because with it i do not see the map at all
– Jio
Mar 17 at 12:16
You cannot do withoutleaflet.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
Mar 17 at 15:11
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
Mar 17 at 15:24
add a comment |
2
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;
answered Mar 17 at 12:12
TomazicMTomazicM
1,3311216
yes I comment out the link to leafelt.css because with it i do not see the map at all
– Jio
Mar 17 at 12:16
You cannot do withoutleaflet.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
Mar 17 at 15:11
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
Mar 17 at 15:24
add a comment |
2
2
2
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;
answered Mar 17 at 12:12
TomazicMTomazicM
1,3311216
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;
answered Mar 17 at 12:12
TomazicMTomazicM
1,3311216
edited Mar 17 at 15:19
answered Mar 17 at 12:12
TomazicMTomazicM
1,3311216
answered Mar 17 at 12:12
TomazicMTomazicM
1,3311216
answered Mar 17 at 12:12
TomazicMTomazicM
1,3311216
1,3311216
yes I comment out the link to leafelt.css because with it i do not see the map at all
– Jio
Mar 17 at 12:16
You cannot do withoutleaflet.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
Mar 17 at 15:11
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
Mar 17 at 15:24
add a comment |
yes I comment out the link to leafelt.css because with it i do not see the map at all
– Jio
Mar 17 at 12:16
You cannot do withoutleaflet.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
Mar 17 at 15:11
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
Mar 17 at 15:24
yes I comment out the link to leafelt.css because with it i do not see the map at all
– Jio
Mar 17 at 12:16
yes I comment out the link to leafelt.css because with it i do not see the map at all
– Jio
Mar 17 at 12:16
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
Mar 17 at 15:11
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
Mar 17 at 15:11
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
Mar 17 at 15:24
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
Mar 17 at 15:24
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');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
