3

In leaflet, how can I manage the filling option? More specifically, I would like to fill inside a circle until a certain border not the whole geometry. Is that possible? graphical description
I simply use L.Circle: link

var annonciation_195 = L.circle([44.519, 6.760], 500,{color:'#C02900', weight:1, opacity:1, fillColor: '#D19D1F', fillOpacity:.5}).addTo(map);

I tried leaflet semicircle plugin link, but it also does not have this option to my understanding.

2

Simply add an inner circle after the first one with white fillcolor and eventually changing the fillOpacity value according to your needs:

var annonciation_195_outer = L.circle([44.519, 6.760], 500,{color:'#C02900', weight:1, opacity:1, fillColor: '#D19D1F', fillOpacity:.5}).addTo(map);
var annonciation_195_inner = L.circle([44.519, 6.760], 300,{color:'#C02900', weight:1, opacity:1, fillColor: '#FFFFFF', fillOpacity:.5}).addTo(map);

donut

Otherwise, if you want the inner circle void, use Leaflet.Donut.

| improve this answer | |
  • Thank you @afalciano but I want the inner circle to be void, not cover anything on map. – Gamze Apr 24 '17 at 7:52
  • In this case you could try the Leaflet.Donut plugin. – Antonio Falciano Apr 24 '17 at 8:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.