Map on leaflet with popup next to key

Question

Map on leaflet with popup next to key

I am facing a scenario where I have a map with a unique legend that is styled either as an SVG or a PNG. The legend is always positioned in the bottom left corner but can be quite large, as users have the option to toggle it on and off.

Additionally, the map contains numerous markers, each with a tooltip that can also be sizable. These tooltips are displayed when the mouse hovers over a marker. The issue arises when a user hovers over a marker close to the legend - the tooltip ends up hidden behind the legend. I aim to solve this problem by ensuring that the popups appear above the legend in the following order: marker, legend, marker popup.

You can see a demonstration of this situation on a JSFiddle https://jsfiddle.net/e51mydwa/9/. The legends are added in a similar manner, although the actual < div id="legend"> tag holds an < img> or < svg>.

<div id="map">
  <div id="legend">
    I am Legend
  </div>
</div>

I've reviewed the example at http://leafletjs.com/examples/choropleth/, but upon inspecting the DOM, I noticed that it encounters the same issue. This is because the legend is inserted into the same div as the leaflet controls, which are always positioned above the map layers (as expected, controls should always be on top).

Moreover, I attempted placing the legend within a div on a sibling layer to the popup-containing layer. Although this resolved the z-index problem, the parent div of both these elements includes a transform that changes as users drag the map around, causing the legends to move as well and lose their static position.

I welcome any suggestions or ideas to address this matter.

javascript web leaflet gis

Answer 1

Answer №1

To achieve this customization, significant hacking is necessary due to the structure of the Leaflet layers and controls.

One method to consider is creating a specialized layer class that remains stationary by adjusting its pixel offset whenever the map's view changes.

I strongly suggest delving into the Leaflet tutorials, specifically those on map panes and custom layers, to gain a better grasp of this concept.

// Establish a 'static' map pane
L.Map.addInitHook(function(){
  this.createPane('static');
  this.getPane('static').style.zIndex = 675;
});

// Develop a custom layer class
L.Layer.StaticOverlay = L.Layer.extend({
  onAdd: function(map) {
    this._map = map;

    var pane = map.getPane('static');
    this._container = L.DomUtil.create('div');

    pane.appendChild(this._container);

    // styling, content, etc
    this._container.style.background = 'white';
    this._container.style.width = '100px';
    this._container.style.height = '50px';
    this._container.innerHTML = 'Hi!';


    map.on('move zoom viewreset zoomend moveend', this._update, this);

    this._update();
  },

  onRemove: function(map) {
    L.DomUtil.remove(this._container);
    map.off('move zoom viewreset zoomend moveend', this._update, this);
  },

  _update: function() {
    var offset = map.containerPointToLayerPoint([0, 0]);

    offset = offset.add([340, 220]);

    L.DomUtil.setPosition(this._container, offset);

  }
});

Once you have defined this, you can simply

var static = new L.Layer.StaticOverlay().addTo(map);

Of course, there are certain elements missing, like properly positioning the overlay (obtain the map's pixel size with getSize(), perform the appropriate calculations), and specifying the overlay's contents with custom options in the layer constructor.

These aspects are left as an exercise for the reader :-)

Check out a live example here.

Answer 2

To achieve this customization, significant hacking is necessary due to the structure of the Leaflet layers and controls.

One method to consider is creating a specialized layer class that remains stationary by adjusting its pixel offset whenever the map's view changes.

I strongly suggest delving into the Leaflet tutorials, specifically those on map panes and custom layers, to gain a better grasp of this concept.

// Establish a 'static' map pane
L.Map.addInitHook(function(){
  this.createPane('static');
  this.getPane('static').style.zIndex = 675;
});

// Develop a custom layer class
L.Layer.StaticOverlay = L.Layer.extend({
  onAdd: function(map) {
    this._map = map;

    var pane = map.getPane('static');
    this._container = L.DomUtil.create('div');

    pane.appendChild(this._container);

    // styling, content, etc
    this._container.style.background = 'white';
    this._container.style.width = '100px';
    this._container.style.height = '50px';
    this._container.innerHTML = 'Hi!';


    map.on('move zoom viewreset zoomend moveend', this._update, this);

    this._update();
  },

  onRemove: function(map) {
    L.DomUtil.remove(this._container);
    map.off('move zoom viewreset zoomend moveend', this._update, this);
  },

  _update: function() {
    var offset = map.containerPointToLayerPoint([0, 0]);

    offset = offset.add([340, 220]);

    L.DomUtil.setPosition(this._container, offset);

  }
});

Once you have defined this, you can simply

var static = new L.Layer.StaticOverlay().addTo(map);

Of course, there are certain elements missing, like properly positioning the overlay (obtain the map's pixel size with getSize(), perform the appropriate calculations), and specifying the overlay's contents with custom options in the layer constructor.

These aspects are left as an exercise for the reader :-)

Check out a live example here.

Map on leaflet with popup next to key

Answer №1

Similar questions

Leveraging jQuery plugins within an AngularJs application

Turn off the chrome react DevTools when deploying to production to ensure the

Is it possible to authenticate across multiple tables in a React/Node.js environment?

What is the solution for getting rid of the "clear sort" state in an angular-ui-grid column header?

Tips for sending multiple values in a data object using jQuery AJAX

How can Firebase effectively manage multiple URLs for referencing?

The underscore convention for defining members in Typescript allows for clear and concise

JavaScript - AngularJS HTML parser

What is the best way to remove double quotes surrounding "name" and "count" when displayed in the JavaScript console output?

Having trouble retrieving all JSON properties

Have the getter functions for reactive objects in Vue 3 been transformed into computed values?

`There is a lack of props validation in the react/prop-types``

Get the name of the array using JavaScript

Guide on testing a function with a dependency in Angular through unit testing

Updating jQuery event behaviors based on the value of .html( 'string' )

Encasing a variety of child elements within a div container

Employing the include functionality within PHP

The timing of jQuery's .load function appears to be off, catching us by surprise

What is the best way to retrieve the data stored in a TD element within a TR row in an HTML table?

The catch-all route handler is triggered following a response being sent by a designated route handler