Bootstrap dropdown menu button not showing with Leaflet map

Question

I'm trying to create a leafletJS Map with Bootstrap buttons. I made the map fullscreen and placed the buttons on top of it. Here is the code:

<!DOCTYPE html>
<html>
<head>

    <title>Map</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="static/bootstrap/js/bootstrap.min.js"></script>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
    <link rel="stylesheet" media="screen" href ="static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/bootstrap/css/bootstrap-theme.min.css">

    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
            width: 100%;
        }

        #back_button {
          position: absolute;
          top: 20px;
          left: 20px;
          padding: 10px;
          z-index: 1001;
        }

        #drop_button {
          position: absolute;
          top: 80px;
          left: 20px;
          padding: 10px;
          z-index: 1001;
        }
    </style>


</head>
<body>
    <div id='map'>
    </div>

    <form  action="/" method="post" role="form">
        <button type="submit" class="btn btn-default" id="back_button"><- Back</button>
    </form>

    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="drop_button">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
<script>
    var map = L.map('map', {zoomControl:false}).setView([47.57768554635565,-122.16660887002944], 13);

    var coordinate = {{list_latlong | tojson | safe}};
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    var logoIcon = L.icon({
        iconUrl: './static/picture.png',
        iconSize:     [22, 22], // size of the icon
        iconAnchor:   [11, 22], // point of the icon which will correspond to marker's location
    });

    var i;
    for (i = 0; i < coordinate.length; i++) {
        var point = coordinate[i]
        var text = "";
        text = "<dl><dt>Number: " + point[2] + "</dt>"
        + "<dt>" + point[5] + "</dt>"
        + "<dt>" + point[6] + ", " + point[7] + ", " + point[8] + "</dt>"
        +"</dl>"
        L.marker([point[3],point[4]], {icon: logoIcon}).bindPopup(text).addTo(map);
    }


</script>
</body>
</html>

Running this code will only show the "Back" button and no dropdown button. If I remove

<link rel="stylesheet" media="screen" href ="static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="static/bootstrap/css/bootstrap-theme.min.css">

The dropdown button and back button is showing but the elements in the dropdown menu are not showing.

Answer 1

I've fixed that for you, for more than one reason, first the bootstrap link is wrong, second you add wrong styles on wrong id #dropdown button, so the button was displayed but in footer so you don't see it, here's the full code with edit some files places and urls with update new style from #dropdown to parent div .dropdown

<!DOCTYPE html>
<html>
<head>

    <title>Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"/>

    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
            width: 100%;
        }

        #back_button {
          position: absolute;
          top: 20px;
          left: 20px;
          padding: 10px;
          z-index: 1001;
        }
        .dropdown {
          position: absolute;
          top: 80px;
          left: 20px;
          z-index: 1001;
        }
    </style>
</head>
<body>
    <div id='map'>
    </div>

    <form  action="/" method="post" role="form">
        <button type="submit" class="btn btn-default" id="back_button"><- Back</button>
    </form>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="drop_button">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
    var map = L.map('map', {zoomControl:false}).setView([47.57768554635565,-122.16660887002944], 13);

    var coordinate = {{list_latlong | tojson | safe}};
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    var logoIcon = L.icon({
        iconUrl: './static/picture.png',
        iconSize:     [22, 22], // size of the icon
        iconAnchor:   [11, 22], // point of the icon which will correspond to marker's location
    });

    var i;
    for (i = 0; i < coordinate.length; i++) {
        var point = coordinate[i]
        var text = "";
        text = "<dl><dt>Number: " + point[2] + "</dt>"
        + "<dt>" + point[5] + "</dt>"
        + "<dt>" + point[6] + ", " + point[7] + ", " + point[8] + "</dt>"
        +"</dl>"
        L.marker([point[3],point[4]], {icon: logoIcon}).bindPopup(text).addTo(map);
    }


</script>
</body>
</html>

Answer 2

<script src="static/bootstrap/js/bootstrap.min.js"></script>

This is the bootstrap script file to make the menus and other fancy js-dependent stuff work. But in order for it to work it needs to have a DOM (document object model) to work with. What you currently have is the script firing right at the top after jQuery, without any DOM element for it to work with (the menu elements haven't been parsed yet!).

Try putting this at the spot right before you close your </body> tag. That should make the menu elements work.

Bootstrap dropdown menu button not showing with Leaflet map

Question

2 answers

solution1
1 ACCPTED 2018-12-04 22:55:12

solution2
0 2018-12-04 22:49:20

Bootstrap dropdown menu button not showing with Leaflet map

Question

2 answers

solution1 1 ACCPTED 2018-12-04 22:55:12

solution2 0 2018-12-04 22:49:20

solution1
1 ACCPTED 2018-12-04 22:55:12

solution2
0 2018-12-04 22:49:20