CODEWITHSUNDEEP
javascriptleafletgis
RezaNikfal
RezaNikfal

Reputation: 1003

Tooltip movement when you change the zoom level in Leaflet

I am using the "Permanent Tooltip" as lable in my map as follows:

layer.bindTooltip(layer.feature.properties.Label, {offset: L.point(0, 170), direction: 'bottom', permanent:true }).openTooltip();

The result is fine as you can see here:

enter image description here

However, when I change the zoom level, it messes up as follows:

enter image description here

Any idea to fix it?

Upvotes: 1

Views: 1417

Answers (1)

RezaNikfal
RezaNikfal

Reputation: 1003

The only way you can solve this issue is create a new point layer (Marker) that points the end of each line. Then assign the tooltip to the points. Something like this:

$.ajax({
dataType: "json",
url: "...",
success: function (earthquake) {
    PointLayer= L.geoJSON(earthquake, {
        style: function (feature) {
            return {
                color: '#000',
                opacity: 1
            };
        },
        pointToLayer: function (feature, latlong) {
            return L.circle(latlong, 0);
        },
        onEachFeature: function (feature, layer) {
            layer.bindTooltip(layer.feature.properties.PanelName, { offset: L.point(0, 0), direction: 'bottom', permanent: true, className: 'AAAA', direction:'left' }).openTooltip();
        }
    }).addTo(map);

Note that you should assign an HTML class (i.e. AAAA) to change the tooltip formatting (remove background color, ....). Also to remove the little triangle of the tooltip direction, you should add a new CSS statement as follows:

.AAAA {
box-shadow:none;
border:none;
background-color:transparent;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    border: none !important;
}

Upvotes: 1

Related Questions