[GIS] How to keep leaflet tooltips within visible map view

extentsleaflet

I have a map with panning and zooming disabled, creating a bounding box. This map has a geojson layer with features and tooltips displaying underlying data.

The issue is when the user mouses over features on the outer edges of the visible map area, the tooltips are outside of the div view. Because there's no panning enabled, the user is SOL to see the tip.

How can I keep the tips within the visible map view bound by extents?

Best Answer

Take a look at the keepView option of the Popup layer. My guess is when you set it to true instead of the default false it will keep the tooltip/popup visible within the current map extent.

However if you can post the code you're working on in a fiddle, it would be helpful to test whether my assumption is correct.

Related Solutions

[GIS] Leaflet / Google Map baselayer / markers not visible

Just a quick fix: you were on the right track with the z-index. Try adding this to your own css file (may break other things! I simply got it to display the markers):

.leaflet-map-pane {
    z-index: 2 !important;
}

.leaflet-google-layer {
    z-index: 1 !important;
}

[GIS] Custom HTML Within Leaflet Map

Your events are propagating to the map. Leaflet provides DomEvent methods to prevent this, for example (using jQuery):

$('div').each(function () {
    L.DomEvent.on(this,'mousedown',L.DomEvent.stop);
    L.DomEvent.on(this,'click',L.DomEvent.stop);
    L.DomEvent.on(this,'touchstart',L.DomEvent.stop);
});

UDPATE

Based on comments below, the following should also work in place of the code above:

L.DomEvent.disableClickPropagation();

Reference: http://leafletjs.com/reference.html#domevent-disableclickpropagation

Best Answer

Related Solutions

[GIS] Leaflet / Google Map baselayer / markers not visible

[GIS] Custom HTML Within Leaflet Map

Related Question