2016-01-26 2 views
0

J'essaie d'implémenter un comportement de type leaflet.draw sur une carte qui utilise également leaflet.draw (en utilisant Draw pour déposer des marqueurs, mais js personnalisé pour dessiner des routes). Je voudrais donc des info-bulles utiles sur cette fonction de dessin personnalisé pour ressembler aux infobulles de dessin.Comment puis-je imiter le style de l'infobulle de Leaflet.Draw avec un plugin d'info-bulle différent?

Comment puis-je le faire? J'utilise actuellement jquery-ui v. 1.11.4 et je n'arrive pas à comprendre les apparences. J'ai trouvé ce que le relevant section of css de leaflet.draw, mais en essayant d'utiliser le tooltipclass property dans le constructeur comme ci-dessous (de here), la classe deux leaflet.draw a été ajoutée à l'info-bulle (et apparemment remplacée par la classe jquery-ui existante) .

$(".selector").tooltip({ 
    tooltipClass: ".leaflet-draw-tooltip .leaflet-draw-tooltip-single" 
}); 

Il semble y avoir deux solutions possibles: 1.
Créer ma propre instance d'un leaflet.draw tooltip
2. Trouver un moyen de supprimer les classes CSS contradictoires de l'info-bulle jquery-ui.

Répondre

0

Le problème est que le leaflet.draw.css contenait la propriété suivante:

visibility: hidden ; 

Donc chaque fois que j'ai appliqué avec succès le leaflet.draw CSS à l'info-bulle, il disparaîtrait! (Genre de difficile à déboguer).

Je créé une classe pour passer outre la propriété visibility et je l'ai ajouté à la déclaration d'info-bulle:

.j-leaflet-draw-tooltip{ 
    visibility: visible; 
} 

$("#map").tooltip({ 
    tooltipClass: "leaflet-draw-tooltip leaflet-draw-tooltip-single 
        j-leaflet-draw-tooltip" 
});