How leaflet gracefully displays the bubble window of overlapping points

Don't talk much , The first effect ：

Effect 1 ：

Effect two ：

In normal work , This kind of problem is often encountered , Two or more points completely coincide , The mouse cannot click to the covered point , So you can't see its bubble information . I've seen that some students' ways of dealing with it are , Modify point coordinates directly , Let the points no longer coincide , So you can click to each point . We will not comment on the advisability of this method .

Today we will discuss from two other dimensions , How to solve this problem .

Scheme 1 PopupListLayer：

The way to deal with this scheme is , Click to get all the points that coincide with the point , Then integrate what needs to be shown in the bubble , Add switch function , Achieve the effect of switching display all bubble information

The core code is as follows ：

We encapsulate this method as a plug-in , After the plug-in is referenced , The above effect can be achieved in two simple steps .

First step ： initialization popupListLayer

var popupListLayer = new L.popupListLayer().addTo(map)

The second step ： Pass the point and bubble content to popupListLayer

popupListLayer.addMarker(marker, contentHTML)

Option two PopupLayoutLayer：

This scheme is mainly used for reference in GIT Found on leaflet-tooltip-layout This plugin . By dealing with L.tooltip() Location relationship , Realize multi bubble information display , At the same time, try to avoid covering between bubbles . The scheme supports displaying bubbles by clicking points and displaying all bubbles at the same time .

Show bubbles by clicking on the dots

Show all the bubbles at the same time

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-fXO8PPzH-1607591923545)(https://blogimage.gisarmory.xyz/202011300101.png)]

We encapsulate this method as a plug-in , After the plug-in is referenced , This can be achieved in three simple steps .

First step ： initialization popupLayoutLayer. To see all the bubbles , Need to showAll Parameter set to true, The default is false, Click to see the bubble information .

var popupLayoutLayer = new L.popupLayoutLayer({
    
 	showAll: true // true, Show all bubbles ; The default is  false, Click to see bubbles ,
}).addTo(map)

The second step ： Pass the point and bubble content to popupLayoutLayer

popupLayoutLayer.addMarker(marker, contentHTML)

The third step ： There are two kinds of situations: Click to view bubbles and display all bubbles

1、 Click to view bubbles . Add click event , Add bubbles to the click event

popupLayoutLayer.on('click', function(evt) {
    })

2、 Show all the bubbles , Need to showAll Parameter set to true

popupLayoutLayer.showPopup()

summary

1. When you add points to a map , It is often encountered that the coordinates of points coincide , Can't click to the covered point , So you can't see its bubble information .
2. Solution 1 , quote PopupListLayer plug-in unit , Display by switching content .
3. Solution 2 , quote PopupLayoutLayer plug-in unit , By dealing with L.tooltip() Location relationship , Achieve more tooltip Show at the same time , Click on tooltip Show details .
4. PopupLayoutLayer Plug in support The bubble information is displayed by clicking on the coincidence point , as well as At the same time, all the bubble information is displayed .

Online example

PopupListLayer Toggle display of bubbles

PopupLayoutLayer Show all bubbles

PopupLayoutLayer Click to show bubbles

Complete code

Reference Content

https://github.com/ZijingPeng/leaflet-tooltip-layout

---

Original address ：http://gisarmory.xyz/blog/index.html?blog=LeafletPopupLayoutLayer.

Focus on 《GIS Zeughaus 》 official account , The first time to get more high quality GIS article .

This article adopts Creative Commons signature - Noncommercial use - Share in the same way 4.0 International licensing agreement Licensing . Welcome to reprint 、 Use 、 Re release , But be sure to keep the signature of the article 《GIS Zeughaus 》（ Include links ： http://gisarmory.xyz/blog/）, Not for commercial purposes , Based on this revised work must be released with the same license .