Adding custom buttons to Leaflet Map

Question

I have followed an example on how to add custom buttons to a Leaflet Map.

However, I want the buttons to overlap the map. Using the exact code from that example, I tried moving them inside the <div id="map"> but they get hidden away behind it.

What is the right way to do this?

Answer 1

Leaflet adds some <div>'s into the map container, with some "high" z-index value to hold the map and controls.

Therefore if you want to overlay your own buttons on top of the map and/or controls, you should place them within the Leaflet control placeholders, or at least specify a z-index value that is higher than those of Leaflet.

Typically, the map is within a .leaflet-pane container which z-index is set to 400. Controls have .leaflet-top or .leaflet-bottom class, which z-index is set at 1000.

By setting the z-index of your buttons container to >= 1001, now your buttons appear above the map and controls.

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' + ' contribuitori',
  cartoUrl = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png',
  cartoAttrib = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attribution/">CARTO</a>';

var osmMap = L.tileLayer(osmUrl, {
    minZoom: 12,
    maxZoom: 18,
    attribution: osmAttrib
  }),
  cartoMap = L.tileLayer(cartoUrl, {
    minZoom: 12,
    maxZoom: 18,
    attribution: cartoAttrib
  });

var map = L.map('map', {
    layers: [cartoMap]
  })
  .setView([44.434, 26.107], 16);

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://unpkg.com/[email protected]/src/easy-button.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:300,400,400i,700" rel="stylesheet">

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/src/easy-button.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="map" style="height: 200px">
  <div class="btn-group" style="z-index: 1001"> <!-- Use 401 to be between map and controls -->
    <button type="buttons" id="allbus" class="btn btn-success">All</button>
    <button type="buttons" id="others" class="btn btn-primary">Others</button>
    <button type="buttons" id="cafes" class="btn btn-danger">Cafes</button>
  </div>
</div>