Without further ado, first effect:

A:

Effect 2:

In daily work, we often encounter this kind of problem. Two or more points are completely overlapped, and the mouse cannot click on the covered point, so that the bubble information cannot be viewed. And the way some of you did that, you could just change the coordinates so that they don’t overlap any more, so you can click to every point. We will not comment on whether this approach is desirable or not.

Today we’re going to talk about how to solve this problem from two other dimensions.

PopupListLayer:

The processing method of this scheme is to obtain all the points which coincide with the point point when clicking, and then integrate the content to be displayed in the bubble and add the switching function to achieve the effect of switching and displaying all the bubble information

The core code is as follows:

We wrapped the method as a plug-in, and after referencing the plug-in, the above effect was achieved in two simple steps.

Step 1: Initialize popupListLayer

var popupListLayer = new L.popupListLayer().addTo(map)
Copy the code

Step 2: Pass the point position and bubble content into the popupListLayer

popupListLayer.addMarker(marker, contentHTML)
Copy the code

PopupLayoutLayer:

This solution is based on the leaflet-Tooltip-Layout plug-in found in GIT. By processing the position relation of L.tooltip(), the information of multiple bubbles can be displayed, and the covering between bubbles can be avoided as much as possible. This solution supports the display of bubbles by clicking on point positions and showing all point positions simultaneously.

Display bubbles by clicking on points

Show all point bubbles at the same time

We wrapped the method as a plug-in, and after referencing the plug-in, the effect was achieved in three simple steps.

Step 1: Initialize popupLayoutLayer. To view all point bubbles, set the showAll parameter to true, default to false, and click to view bubble information.

var popupLayoutLayer = new L.popupLayoutLayer({
 	showAll: true // true, display all bubbles; Default is false, and by clicking to see the bubble,
}).addTo(map)
Copy the code

Step 2: Pass the dot position and bubble content into the popupLayoutLayer

popupLayoutLayer.addMarker(marker, contentHTML)
Copy the code

The third step: it is divided into two situations: click to view bubbles and show all bubbles

1. Click to view bubbles. Add a click event, add a bubble to the click event

popupLayoutLayer.on('click'.function(evt) {})
Copy the code

2. Set the showAll parameter to true to display all bubbles

popupLayoutLayer.showPopup()
Copy the code

conclusion

  1. When a point is added to the map, it is often encountered that the coordinates of the point overlapped, and the point covered cannot be clicked, so the bubble information of the point cannot be viewed.
  2. Solution one, referencePopupListLayerPlug-in, by switching content display.
  3. Solution two, referencePopupLayoutLayerPlug-in, through processingL.tooltip()Position relation, realize muchtooltipShow it at the same time, clicktooltipDisplays detailed information.
  4. PopupLayoutLayerPlug-in supportThe bubble information is displayed by clicking on the overlapping points, as well asDisplay all point bubble information at the same time.

Online sample

PopupListLayer toggles to display bubbles

PopupLayoutLayer displays all bubbles

PopupLayoutLayer click to show the bubble

The complete code

Refer to the content

Github.com/ZijingPeng/…

The original address: gisarmory. Xyz/blog/index… .

Pay attention to “GIS Armory” public number, the first time to get more high-quality GIS articles.

This article is licensed under the Creative Commons Attribution – Noncommercial Use – Share alike 4.0 International License. You are welcome to reprint, use and republish the article under the name “GIS Armory” (including link: gisarmory. Xyz /blog/). It must not be used for commercial purposes, and all works based on this article must be published under the same license.