How to create Circles with "real" sizes?

[Myzel394]

I'm really struggling with this and apparently there literally seems to be no one else wanting this.

How do I make circles that have a "real" size? By "real size" I mean that a given circle has e.g. a radius of 50 meters and then scales accordingly to the current zoom factor, so that it always has a radius of 50 meters (and not 50 pixels).

If you have the same issue, see my answer here

[Gnative]

Just some ideas that might help you in the right direction:

Add a SymbolLayer layer with styles such as

iconSize: ['interpolate', ['linear'], ['zoom'], 10, 1, 15, 0.5]

https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#ramps-scales-curves

or you could use the zoom event and resize an Animated.ShapeSource based on the zoom ?

[Gnative]

I think an issue is that zoom levels have different "meters per pixel " according to latitude and longitude which makes sence I guess with map projections.
This doc also shows the relation of a meters per pixel

https://docs.mapbox.com/help/glossary/zoom-level/

kinda interesting.

[Gnative]

Maybe there is something in this which might help too - https://github.com/mapbox/mapbox-gl-js/blob/b32d2ce6f9c59e679464a5ab3719cd1dad7f85a2/src/ui/control/scale_control.js

[rastapasta]

@Myzel394 check out turf.js circle method to get what you might want: a polygon around a point with a radius of 50 meters. Just display it via a ShapeSource & FillLayer and you should have what you are looking for. Cheers!

[rastapasta]

@Myzel394 sorry for the confusion - displaying features via the CircleLayers and directly displaying polygon features (in this case circle-shaped) are two different concepts. For clarity, following works fine:

[Myzel394]

Holy macaroni I finally found that little pesky mistake: My coordinates were in the wrong order!
It's: [Longitude, Latitude]!

Given this, I was finally able to create a filled circle the following way:

import MapboxGL from "@rnmapbox/maps"
import {StyleSheet} from "react-native"
import {useCallback} from "react"
import circle from "@turf/circle"
import {featureCollection} from "@turf/helpers"

const circleFeature = circle([-122,431297, 37.773972], 3, {
	steps: 60,
	units: "kilometers",
})
const features = featureCollection([circleFeature])

export default function Map() {
	return (
		<MapboxGL.MapView style={styles.wrapper}>
			<MapboxGL.ShapeSource id="positions" shape={features}>
				<MapboxGL.FillLayer
					id="testLayer"
					style={{
						fillColor: "red",
						visibility: "visible",
						fillOpacity: 0.5,
					}}
				/>
			</MapboxGL.ShapeSource>
		</MapboxGL.MapView>
	)
}

const styles = StyleSheet.create({
	wrapper: {
		flex: 1,
	},
})

And I think I finally understood how Sources and Layers work. Sources describe the actual "element" you have, such as a circle, a polygon, etc. And Layers describe what to do with it, add fill to it, add circles around it, etc. It's kinda like HTML and CSS, isn't it?

[Gnative]

Cool you found away to do this. Apologies if I put you in the wrong direction earlier.

[Myzel394]

No worries. This was actually the first method I tried out (before creating this discussion) - but the method here is better, as it doesn't rely on scaling the circle / element correctly.
You don't need to be sorry for trying to help! :)

[nesjett]

I'm a bit late so you already figured it out. For the record, I wrote an article about this and how to make it move with the user location smoothly without it to look glitchy: https://nsabater.com/react-native-mapboxgl-custom-userlocation