I'm a relative beginner with leaflet/mapbox but we are building a website with a set of different TileMill layers, each of which have different interactivity. We had been switching layers with L.control.layers, which worked fine as long as we only had a "hover-over" tooltip - the tooltips would change as expected with the layer. However, now we have an on-click tooltip (as well as the hover-over). So now when we switch between layers while an on-click tooltip is open, it seems that the tooltip never actually closes even though it disappears - if you return to the original layer you don't get the hover-over back, until you click to get the on-click tooltip and then close it with the close button. Then the hover-over functionality comes back. I was assuming the answer involved layer.closePopup(); but having tried that, the tooltip doesn't disappear at all and you get stuck with one tooltip that never changes.
What would be the best way to get the clicked-on tooltip to actually close on a layer change, so that the new layer will have both hover-over and on-click tooltips available?
Example code:
var map = L.map('map').setView([51.505, -0.09], 13);//// layer A//var a = L.mapbox.tileLayer('tileserver/a.tilejson');var aGrid = L.mapbox.gridLayer('tileserver/a.tilejson');var aControl = L.mapbox.gridControl(aGrid);var layerA = L.layerGroup([a, aGrid]).addTo(map);//// layer B//var b = L.mapbox.tileLayer('tileserver/b.tilejson');var bGrid = L.mapbox.gridLayer('tileserver/b.tilejson');var bControl = L.mapbox.gridControl(bGrid);var layerB = L.layerGroup([b, bGrid]);//// layer C//var c = L.mapbox.tileLayer('tileserver/c.tilejson');var cGrid = L.mapbox.gridLayer('tileserver/c.tilejson');var cControl = L.mapbox.gridControl(cGrid);var layerC = L.layerGroup([c, cGrid]);// add layer controlL.control.layers({'Layer A': layerA, 'Layer B': layerB, 'Layer C': layerC}, {}, {collapsed: false, position: 'bottomright'}).addTo(map);map.addControl(aControl);var currentControl = aControlmap.on('baselayerchange', function (eventLayer) {// this should close the current popup/tooltip layer.closePopup();// display popup for new chosen layer if (eventLayer.name === "Layer A") { map.removeControl(currentControl); currentControl = aControl map.addControl(aControl); } else if (eventLayer.name === "Layer B") { map.removeControl(currentControl); currentControl = bControl map.addControl(bControl); } else if (eventLayer.name === "Layer C") { map.removeControl(currentControl); currentControl = cControl map.addControl(cControl); } });
أكثر...
What would be the best way to get the clicked-on tooltip to actually close on a layer change, so that the new layer will have both hover-over and on-click tooltips available?
Example code:
var map = L.map('map').setView([51.505, -0.09], 13);//// layer A//var a = L.mapbox.tileLayer('tileserver/a.tilejson');var aGrid = L.mapbox.gridLayer('tileserver/a.tilejson');var aControl = L.mapbox.gridControl(aGrid);var layerA = L.layerGroup([a, aGrid]).addTo(map);//// layer B//var b = L.mapbox.tileLayer('tileserver/b.tilejson');var bGrid = L.mapbox.gridLayer('tileserver/b.tilejson');var bControl = L.mapbox.gridControl(bGrid);var layerB = L.layerGroup([b, bGrid]);//// layer C//var c = L.mapbox.tileLayer('tileserver/c.tilejson');var cGrid = L.mapbox.gridLayer('tileserver/c.tilejson');var cControl = L.mapbox.gridControl(cGrid);var layerC = L.layerGroup([c, cGrid]);// add layer controlL.control.layers({'Layer A': layerA, 'Layer B': layerB, 'Layer C': layerC}, {}, {collapsed: false, position: 'bottomright'}).addTo(map);map.addControl(aControl);var currentControl = aControlmap.on('baselayerchange', function (eventLayer) {// this should close the current popup/tooltip layer.closePopup();// display popup for new chosen layer if (eventLayer.name === "Layer A") { map.removeControl(currentControl); currentControl = aControl map.addControl(aControl); } else if (eventLayer.name === "Layer B") { map.removeControl(currentControl); currentControl = bControl map.addControl(bControl); } else if (eventLayer.name === "Layer C") { map.removeControl(currentControl); currentControl = cControl map.addControl(cControl); } });
أكثر...