In my project, I am using django 1.10.5, booststrap 4.0, and LeafletJs 1.0.3 along with the routing machine plugin and geocoder. However, I have encountered an issue where the collapse button of the control panel for the routing machine does not appear (it's missing from the HTML code) when the map size exceeds 640 x 640px upon initial page load. https://i.sstatic.net/04CeF.png https://i.sstatic.net/8Qn7C.pngInterestingly, there are no problems when I manually resize the map using Chrome Dev Tools after the page has fully loaded, as long as the map size is set to 640x640px or smaller in the CSS.
I have a working version without Django and Bootstrap, but I specifically need it to function properly with both frameworks integrated.
CSS Code:
.map-add-size{
position: relative;
width: 500px;
height:500px;
}
HTML:
{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block css %}
<link href="{% static 'routes/css/add.css' %}" rel="stylesheet">
{{block.super}}
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c70797d7a7079685c2d322c322f">[email protected]</a>/dist/leaflet.css">
<link href="{% static 'routes/css/leaflet-routing-machine.css' %}" rel="stylesheet" >
<link href="{% static 'routes/css/Control.Geocoder.css' %}" rel="stylesheet">
{% endblock %}
{% block content %}
...
JavaScript:
window.lrmConfig = {
// serviceUrl: 'https://api.mapbox.com/directions/v5',
// profile: 'mapbox/driving',
};
var map = L.map('map-add').setView([51.505, -0.09], 3);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}{r}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
...