Suite

Réduire le contrôle des dépliants


Je veux réduire un contrôle de dépliant sur ma carte. J'ai le code actuel :

var legend = L.control({position: 'bottomright', collapsed:true}); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'); div.intérieurHTML = "
AVERTISSEMENT:texte"; return div; }; legend.addTo(map);

Mais je ne parviens toujours pas à le réduire ou à l'afficher en survol comme le fait ma sélection de calques. Comment dois-je ajuster mon code ? J'ai visité les exemples Leaflet, mais il semble que la fonction de réduction ne concerne que les éléments de calque et pas simplement un contrôle.


je ne pense pasréduit:vraiva avoir du sens dans ce contexte, car il n'y a pas de contrôle de légende dans Leaflet qui soit analogue au contrôle de couche (L.control.layers).

Semblable au contrôle des calques, vous pouvez construire un div avec une icône qui s'affiche toujours par défaut, avec la légende masquée par défaut, mais positionnée pour masquer l'icône div lorsqu'elle est visible.

Ensuite, avec javascript/jQuery, affichez la légende au survol :

$('#legend-icon-div).hover( function() { $('#legend').show(); }, function() { $('#legend').hide(); } )

D'après le son, Leaflet.EasyButton pourrait vous aider. Il a undésactiverméthode que vous pouvez styliser pour répondre à vos besoins (exemple).

dans ton js :

var disclaimer = L.easyButton('

!!!

', function(btn, map){ alert('disclaimer here!!!'); },{position:'bas droit'}); avis de non-responsabilité.addTo(map);

et dans ton css :

.easy-button-button.disabled{ afficher : aucun ; }

puis quand vous voulez, appelez :

disclaimer.disable(); // et disclaimer.enable();

Cela a fini par être la solution en utilisant les attributs HTML de "onmousenenter" et "onmouseleave":

var legend = L.control({position: 'bottomright'}); function showDisclaimer() { var div = document.getElementById("info légende") div.innerHTML = "
AVERTISSEMENT:texte"; } function hideDisclaimer() { var div = document.getElementById("info legend") div.innerHTML = "AVERTISSEMENT"; } legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'); div.innerHTML = "AVERTISSEMENT"; div.setAttribute("onmouseenter", "showDisclaimer()"); div.setAttribute("onmouseleave", "hideDisclaimer()"); div.id = "info legend" return div; }; legend.addTo(map );