Prevent click-through on overlaying divs in Leaflet maps

Question

Prevent click-through on overlaying divs in Leaflet maps

Is there a way to prevent an overlaying div on a leaflet map from being clickthrough? I tried setting pointer-events: none and auto on the overlaying div, but it didn't work. Setting pointer-events to none resulted in the radiobutton not being clickable anymore...

// Adding a tile layer to the map
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

// Initializing the map
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

// Function for adding marker on map click
function onMapClick(e) {

  var marker = L.marker(e.latlng, {
      draggable: true,
      title: "Resource location",
      alt: "Resource Location",
      riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

  // Update marker position on drag end
  marker.on("dragend", function(ev) {

    var changedPos = ev.target.getLatLng();
    this.bindPopup(changedPos.toString()).openPopup();

  });
}

map.on('click', onMapClick);

#map {
    height: 500px;
    width: 80%;
    z-index: 1;
    position: relative;
}

.overlay {
  height: 500px;
  width: 100px;
  position: absolute;
  right: 0px;
  z-index: 2;
  background-color: rgba(255, 50, 50, 0.5);
  pointer-events: auto;
}

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" />

<div id="map">
  <div class = "overlay">
    <input type="radio" class = "someButton">Foo Bar
    </div>
</div>

javascript jquery html css leaflet

Answer 1

Answer №1

An alternative approach is to utilize a function offered by the leaflet library itself.

var container = L.DomUtil.get('overlay'); // note that this should be an element ID, not a class!
L.DomEvent.on(container, 'mousewheel', L.DomEvent.stopPropagation);
L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);

Answer 2

An alternative approach is to utilize a function offered by the leaflet library itself.

var container = L.DomUtil.get('overlay'); // note that this should be an element ID, not a class!
L.DomEvent.on(container, 'mousewheel', L.DomEvent.stopPropagation);
L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);

Answer 3

Answer №2

One possible solution is to relocate your overlay div from inside the map and position it above by using negative margins and adjusting the z-index. Here's an example:

// To enhance the map functionality, we can add a tile layer such as OSM tile layer.
// Setting up the URL template for the tile images is typically part of creating a tile layer
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

// Set the initial view of the map using a specific center point and zoom level
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

// Include the script to add a marker on map click event
function onMapClick(e) {

  var marker = L.marker(e.latlng, {
      draggable: true,
      title: "Resource location",
      alt: "Resource Location",
      riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

  // Update marker position upon dragging
  marker.on("dragend", function(ev) {

    var changedPos = ev.target.getLatLng();
    this.bindPopup(changedPos.toString()).openPopup();

  });
}

map.on('click', onMapClick);

#map {
    height: 500px;
    width: 100%;
    float: left;
    z-index: 1;
    position: relative;
}

.overlay {
  height: 500px;
  width: 100px;
  margin-left: -100px;
  position: relative;
  float: right;
  z-index: 2;
  background-color: rgba(255, 50, 50, 0.5);
  pointer-events: auto;
}

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" />

<div id="map">
</div>

<div class="overlay">
    <input type="radio" class = "someButton">Foo Bar
 </div>

Answer 4

One possible solution is to relocate your overlay div from inside the map and position it above by using negative margins and adjusting the z-index. Here's an example:

// To enhance the map functionality, we can add a tile layer such as OSM tile layer.
// Setting up the URL template for the tile images is typically part of creating a tile layer
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

// Set the initial view of the map using a specific center point and zoom level
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

// Include the script to add a marker on map click event
function onMapClick(e) {

  var marker = L.marker(e.latlng, {
      draggable: true,
      title: "Resource location",
      alt: "Resource Location",
      riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

  // Update marker position upon dragging
  marker.on("dragend", function(ev) {

    var changedPos = ev.target.getLatLng();
    this.bindPopup(changedPos.toString()).openPopup();

  });
}

map.on('click', onMapClick);

#map {
    height: 500px;
    width: 100%;
    float: left;
    z-index: 1;
    position: relative;
}

.overlay {
  height: 500px;
  width: 100px;
  margin-left: -100px;
  position: relative;
  float: right;
  z-index: 2;
  background-color: rgba(255, 50, 50, 0.5);
  pointer-events: auto;
}

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" />

<div id="map">
</div>

<div class="overlay">
    <input type="radio" class = "someButton">Foo Bar
 </div>

Answer 5

Answer №3

Relocate the overlay div outside of the map element:

// We will insert a tile layer to enhance our map, using an OSM tile layer.
// Setting the URL template for the tile images is essential when creating a tile layer
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

// initializing the map on the "map" div with a specified center and zoom level
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

// Function for adding a marker on map click
function onMapClick(e) {

  var marker = L.marker(e.latlng, {
      draggable: true,
      title: "Resource location",
      alt: "Resource Location",
      riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

  // Update marker position upon dragging
  marker.on("dragend", function(ev) {

    var changedPos = ev.target.getLatLng();
    this.bindPopup(changedPos.toString()).openPopup();

  });
}

map.on('click', onMapClick);

.container {
    position: relative;
    width: 500px;
}
#map {
    height: 500px;       
}

.overlay {     
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;      
  background-color: rgba(255, 50, 50, 0.5);     
}

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" />

<div class="container">
    <div id="map"></div>
    <div class = "overlay">
        <input type="radio" class = "someButton">Foo Bar
    </div>
</div>

Answer 6

Relocate the overlay div outside of the map element:

// We will insert a tile layer to enhance our map, using an OSM tile layer.
// Setting the URL template for the tile images is essential when creating a tile layer
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

// initializing the map on the "map" div with a specified center and zoom level
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

// Function for adding a marker on map click
function onMapClick(e) {

  var marker = L.marker(e.latlng, {
      draggable: true,
      title: "Resource location",
      alt: "Resource Location",
      riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

  // Update marker position upon dragging
  marker.on("dragend", function(ev) {

    var changedPos = ev.target.getLatLng();
    this.bindPopup(changedPos.toString()).openPopup();

  });
}

map.on('click', onMapClick);

.container {
    position: relative;
    width: 500px;
}
#map {
    height: 500px;       
}

.overlay {     
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;      
  background-color: rgba(255, 50, 50, 0.5);     
}

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" />

<div class="container">
    <div id="map"></div>
    <div class = "overlay">
        <input type="radio" class = "someButton">Foo Bar
    </div>
</div>

Answer 7

Answer №4

To prevent the click event from propagating to lower layers while maintaining pointer-events: auto;, you can try the following:

<div class = "overlay" onclick="alert(event);event.stopPropagation();">

In this example, I have used event.stopPropagation(); inline, but you could also use a function in your JavaScript.

// Adding a tile layer to the map using Leaflet.js
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

// Initializing the map with a center and zoom level
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

// Function for adding a marker on map click
function onMapClick(e) {

  var marker = L.marker(e.latlng, {
      draggable: true,
      title: "Resource location",
      alt: "Resource Location",
      riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

  // Update marker position when dragged
  marker.on("dragend", function(ev) {

    var changedPos = ev.target.getLatLng();
    this.bindPopup(changedPos.toString()).openPopup();

  });
}

map.on('click', onMapClick);

#map {
  height: 500px;
  width: 80%;
  z-index: 1;
  position: relative;
}

.overlay {
  height: 500px;
  width: 100px;
  position: absolute;
  right: 0px;
  z-index: 2;
  background-color: rgba(255, 50, 50, 0.5);
  pointer-events: auto;
}

<script src="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" />

<div id="map">
  <div class="overlay" onclick='console.log("Event: "+ event.type);event.stopPropagation();'>
    <input type="radio" class="someButton">Foo Bar
  </div>
</div>

Answer 8

To prevent the click event from propagating to lower layers while maintaining pointer-events: auto;, you can try the following:

<div class = "overlay" onclick="alert(event);event.stopPropagation();">

In this example, I have used event.stopPropagation(); inline, but you could also use a function in your JavaScript.

// Adding a tile layer to the map using Leaflet.js
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

// Initializing the map with a center and zoom level
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

// Function for adding a marker on map click
function onMapClick(e) {

  var marker = L.marker(e.latlng, {
      draggable: true,
      title: "Resource location",
      alt: "Resource Location",
      riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

  // Update marker position when dragged
  marker.on("dragend", function(ev) {

    var changedPos = ev.target.getLatLng();
    this.bindPopup(changedPos.toString()).openPopup();

  });
}

map.on('click', onMapClick);

#map {
  height: 500px;
  width: 80%;
  z-index: 1;
  position: relative;
}

.overlay {
  height: 500px;
  width: 100px;
  position: absolute;
  right: 0px;
  z-index: 2;
  background-color: rgba(255, 50, 50, 0.5);
  pointer-events: auto;
}

<script src="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" />

<div id="map">
  <div class="overlay" onclick='console.log("Event: "+ event.type);event.stopPropagation();'>
    <input type="radio" class="someButton">Foo Bar
  </div>
</div>

Prevent click-through on overlaying divs in Leaflet maps

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Show a pop-up notification for a compact disc

Limiting the scope of elements in HTML and JavaScript through the use of namespaces

The TypeScript inference feature is not functioning correctly

Having issues with the JavaScript voting system {{bindings}} returning null when clicked?

Retrieve the background color using code-behind

Bootstrap 4 - positioning link element to align with heading in card header

Place the dataLabel above a specified column in Highcharts

Steps for adding an array of JSON objects into a single JSON object

Avoiding multiple ajax requests due to multiple clicks

PHP code failing to save form information into database

Disable the ability for new windows, such as popups, submit buttons, and forms with the target set to blank, to reference

Encountering a TypeError stating that searchField.toLowerCase is not a function while employing hooks and redux in the

"Step-by-step guide on deactivating SmartyStreets/LiveAddress with an onclick function

Gaining entry into a JSON object

Node.js routing issues leading to rendering failures

After implementing the ng-repeat directive, the div element vanishes

What is the best way to clear the selected option in a dropdown menu when choosing a new field element?

using node.js to extract a cookie from a 302 redirect

Angular binding causing decimal inaccuracies

Using jquery to submit a form with multiple fields spread across various tabs