When you store your GeoJSON in your database, .geojson-file or anything else you have to transform the layer into GeoJSON. A Leaflet circle transformed to geojson will simply be a point with one coordinate pair. Putting that back into Leaflet will give you a Marker as the radius information was lost. So, let’s store it. You can extract the radius of the circle layer and store it inside the custom properties of a GeoJSON. Using Leaflet, it could look like this:
The resulting json has all the information we need to create a circle in the next step:
You can safely store this but the important part to visualize is again is to handle the radius property when handing this GeoJSON to leaflet. We can use leaflets point to layer function to do this. If the radius property is present we return a Circle, otherwise a Marker.
Note: we’re using lodash here to loop over the data — you can of course loop over it however you want.
So whenever you import your GeoJSON data into leaflet using the createLayersFromJson function, it will create circles if a radius is available.
This is exactly how we do it in Geoman where this is already built in. You can see here an import of a JSON-file with multiple GeoJSON features:
My name is Sumit and I build stuff. If you have feedback or questions, drop me a line on Twitter and check out my mailing list.
