Leaflet: Comment ajouter un nombre au centre d'un cercle?

Question

Je travaille actuellement sur un projet volontaire qui consiste à numériser une carte pour le tourisme. Maintenant, j'ai besoin d'ajouter des cercles avec des nombres (comme, quand vous avez plusieurs étapes). Pour avoir une idée de comment cela devrait ressembler, j'ai également joint le pdf avec la carte. 1

Ainsi, au moment où le scénario de mon cercle de test ressemble à ce que:

var circle = L.circle([48.2353227, 9.6436585],{ color: 'blue', fillColor: 'white', fillOpacity: 1.0, radius: 6 }).addTo(mymap); 

Que dois-je ajouter au code pour obtenir par exemple un "1" dans l'espace blanc intérieur du cercle? Merci beaucoup!

Dominik

PS: Je suis désolé de la façon dont le code est affiché. Ne l'obtenez pas maintenant ...

Answer 1

Vous pourriez placer le nombre dans un divIcon appelé Cercle au lieu d'un vecteur Cercle.

var icon = L.marker([23.41,79.12], { 
    icon: L.divIcon({ 
     className: 'my-custom-icon', 
     html: "5" 
    }) 
}); 

icon.addTo(map); 

Certains CSS pour l'icône:

.my-custom-icon{ 
    width: 24px !important; 
    height: 24px !important; 
    margin-left: -12px; 
    margin-top: -12px; 
    border-radius: 18px; 
    border: 2px solid #3F51B5; 
    text-align: center; 
    color: #3F51B5; 
    background-color: #fff; 
    font-size: 16px; 
}