Mapbox Leaflet Polyline being created outside of map and not visible - leaflet

Question

When putting this example in a bootstrap template, the polyline and circle do not show up. When I inspect $('path'), I see that the lines are actually way up to the top left, and not visible. I've spent probably 3 hours and still haven't figured out what the issue is.
As you can see, things like markers show up fine, but polylines and circles etc. don't display on the map.
Here's the repo: https://github.com/zylajoel/polyExample
The relevant files are:
<!-- index.html -->
<div class="content-wrap">
<!-- main page content. the place to put widgets in. usually consists of .row > .col-md-* > .widget. -->
<main id="content" class="content" role="main">
<div class="map-container">
<div id='map'>
</div>
</div>
</main>
</div>
// index.js
L.mapbox.accessToken = 'pk.eyJ1Ijoiam9lbHp5bGEiLCJhIjoiZDU4YTUxMDQ4NDM3OTZkZDA5OThiMzYzNjA0ODRmN2EifQ.CWKDLwKY-bUz_6XYT5bGpg';
var map = L.mapbox.map('map',
'mapbox.satellite',
{
center: [35.2269, -80.8433],
zoom: 2,
featureLayer: true,
tileLayer: true,
gridLayer: true
});
// add some markers
L.marker([37.9, -77], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'bus',
'marker-color': '#fa0'
})
}).addTo(map);
// with popup
L.marker([10.9, -50], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'bus',
'marker-color': '#fa0'
})
// this should be a handlebars template
}).addTo(map).bindPopup('<p>Hello world!<br />This is a nice popup.</p>');
//.openPopup();
// make a point via geojson
var geoJSONExample = { "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
"properties": {"prop0": "value0"}
}
]};
var geoJSONExample1 = { "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [95.0, 10]},
"properties": {"prop0": "value0"}
}
]};
L.geoJson(geoJSONExample, {
pointToLayer: L.mapbox.marker.style,
}).addTo(map);
L.geoJson(geoJSONExample1, {
pointToLayer: L.mapbox.marker.style,
}).addTo(map);
// draw a line HELP
var thePolyline = L.polyline([[102.0, 0.5], [95.0, 10], [10.9, -50]], {
color: 'red'
});
thePolyline.addTo(map);
// draw a line HELP
var pointA = new L.LatLng(28.635308, 77.22496);
var pointB = new L.LatLng(28.984461, 77.70641);
var pointList = [pointA, pointB];
var firstpolyline = new L.Polyline(pointList, {
color: 'red',
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
firstpolyline.addTo(map);
var circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
// application.css
#map {
width: 100%;
height: 100%;
}
.map-container {
height: 500px;
padding: 10px;
width: 100%;
}
Any ideas?

Answer 1

The problem is that Leaflet is conflicting with the CSS of the Single App Template you're using. The CSS in css/application.css is resetting the dimensions of the svg elements.
You need to change the css/application.css and remove the width and height properties of the svg selector :
svg {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Trying to get SVG to act like a greedy block in all browsers */
display: block;
/* Remove these: */
/* width: 100%; */
/* height: 100%; */
}
If you still need to reset the dimensions of other svg elements, just use a different selector.