[LeafletJS - Reactive] How can i display a number inside my circle ?
Question
leafletjs-reactive
Reactive icon
Forge component by Vincent Koning

I am using leaflet for map and have plotted some markers on my map .then I added a circle on them and now wanna display a number on my circle . how can I achieve this ? . the number is suppose to represent total number of markers inside the circle 

mvp_badge
MVP
Solution

Hi Pratik,

For the mentioned use-case, you can try the appraoch mentioned in this post: https://stackoverflow.com/a/46023595

See the demo screen: LeafletJS_Circle

Refer to the attached updated oml

I hope this helps you!


Kind regards,

Benjith Sam

LeafletJS_Circle.oml

Hi where did you got the text value "OSLeafletMap" .  because after putting this value in LeaftletMapname input variable my application runs . if I put map or something else it doesn't work. 

mvp_badge
MVP

Hi Pratik,

If you observe in the referenced component, the Leaflet block & every Client action with the LeafletMapName as the input parameter is non-mandatory, and it also has a default value set as "OSLeafletMap"

And in our solution, in any of the instances, we didn't explicitly specify the LeafletMapName input parameter value hence the default "OSLeafletMap" will be considered.

I hope this helps!


Kind regards,

Benjith Sam

could you please provide OML for this?

here . 

circleexample.oml

mvp_badge
MVP
Solution

Hi Pratik,

For the mentioned use-case, you can try the appraoch mentioned in this post: https://stackoverflow.com/a/46023595

See the demo screen: LeafletJS_Circle

Refer to the attached updated oml

I hope this helps you!


Kind regards,

Benjith Sam

LeafletJS_Circle.oml

Hi where did you got the text value "OSLeafletMap" .  because after putting this value in LeaftletMapname input variable my application runs . if I put map or something else it doesn't work. 

mvp_badge
MVP

Hi Pratik,

If you observe in the referenced component, the Leaflet block & every Client action with the LeafletMapName as the input parameter is non-mandatory, and it also has a default value set as "OSLeafletMap"

And in our solution, in any of the instances, we didn't explicitly specify the LeafletMapName input parameter value hence the default "OSLeafletMap" will be considered.

I hope this helps!


Kind regards,

Benjith Sam

There is a nice plugin that does what you want. Check the following links:

Repo: https://github.com/Leaflet/Leaflet.markercluster

Explanation / Demo: https://asmaloney.com/2015/06/code/clustering-markers-on-leaflet-maps/

This is not part of the current Leaflet package nor will I add it. You can however inject it yourself quite easily 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.