How to Set Circle Sizes in Meters

[BramLeisink]

Hello everyone,

I'm trying to add circles to my map using the and components in MapLibre with Svelte. I've managed to create the circles successfully, but I encountered an issue: I would like to define the circle size in meters instead of in pixels. Is this possible?

Thanks in advance!

Here’s a snippet of my current implementation:

<GeoJSON
	data={{
		type: 'FeatureCollection',
		features: [
			{
				type: 'Feature',
				properties: {},
				geometry: {
					type: 'Point',
					coordinates: [long, lat]
				}
			}
		]
	}}
>
	<CircleLayer
		paint={{
			'circle-radius': 50
		}}
	/>
</GeoJSON>

[dimfeld]

It's possible but not directly supported by Maplibre. I would recommend checking out this Stackoverflow thread and pick whichever solution looks best to you. That's for MapboxGL but all the same stuff applies here.

The two best solutions seem to be:

• Use turf.circle or similar to generate a GeoJSON circle-ish polygon and display that instead
• Set circle-radius to an interpolation expression that modifies the size based on the zoom level. If you do this, see the comment on that page that starts with "FYI, the stops syntax can now be replaced with an interpolation expression" since the stops syntax in the answer itself no longer works.