CODEWITHSUNDEEP
javascriptdictionarynumbersleafletgeometry
DLX
DLX

Reputation: 51

Leaflet: How to add a number to the center of a circle?

I'm currently working on a voluntary project which involves digitising a map for tourism. Now, I need to add circles with numbers in them (like, when you have several stages). To get an idea how it should look I have also attached the pdf with the map.1

So, at the moment the script of my test circle looks like that:

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

What do I have to add to the code to get e.g. a "1" in the inner white space of the circle? Thank you so much!

Dominik

PS: I'm sorry about the way the code is displayed. Don't get that by now...

Upvotes: 5

Views: 5320

Answers (1)

Stephen S
Stephen S

Reputation: 3994

You could place the number in a divIcon styled as a Circle instead of a vector Circle.

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

icon.addTo(map);

Some CSS for the icon: 

.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;
}

Upvotes: 10

Related Questions