mapbox-gl-js | thoroughly customizable maps in the browser | Map library

After the comment from J-007, I added these lines below the previous import lines:

You have to add generateId: true to your addSource method params.

Precision of 6 decimal places gives you ~10 centimeter accuracy. Mapbox is using GeoJSON specification which has following recommendation about precision:

The size of a GeoJSON text in bytes is a major interoperability consideration, and precision of coordinate values has a large impact on the size of texts. A GeoJSON text containing many detailed Polygons can be inflated almost by a factor of two by increasing coordinate precision from 6 to 15 decimal places. For geographic coordinates with units of degrees, 6 decimal places (a default common in, e.g., sprintf) amounts to about 10 centimeters, a precision well within that of current GPS systems. Implementations should consider the cost of using a greater precision than necessary.

GPS-enabled smartphones are typically accurate to within a 4.9 m (16 ft.) radius under open sky. However, their accuracy worsens near buildings, bridges, and trees.ref

Here is a demo of distance accuracy when precision of 6 decimal places is used:

EDIT: v6.1.18 is released, and the GeolocateControl now has the showUserHeading prop. Therefore the solution below is no longer needed.

I figured out that as of 21.09.2021, react-map-gl hasn't included showUserHeading within their props. I solved this by patching using this tool https://www.npmjs.com/package/patch-package

Here's the patch

The Mapbox documentation is very terse here.

An object defining custom properties on the generated clusters if clustering is enabled, aggregating values from clustered points. Has the form {"property_name": [operator, map_expression]}. operator is any expression function that accepts at least 2 operands (e.g. "+" or "max") — it accumulates the property value from clusters/points the cluster contains; map_expression produces the value of a single point.

Example: {"sum": ["+", ["get", "scalerank"]]}.

Your first problem is that you need to write your expression in the MapReduce paradigm - that's the map_expression they're referring to. The operator is actually the reduce expression: the thing that combines the results of applying map_expression to two different input values.

The second problem is that it's actually not that easy to write an average function as a map/reduce expression. A sum is easy: just keep adding the next value. But an average function needs to keep track of the total number of things, and the running sum.

My suggestion would probably be to instead create two separate cluster properties, one for the sum, and one for the count, and compute the average (sum/count) at the time you use the expression, not in the clustering.

Since point_count is provided for you already, and the example of sum is given for you there, you should have everything you need.

The term for finding the nearest address to a point is "reverse geocoding". You could use Mapbox's API for this, but there are many others, too.

There is no need to use queryRenderedFeatures here.

Try leafletOptions(zoomSnap = 0.1, zoomDelta = 0.1)

zoomSnap = x is to force zoom levels to be multiples of x

zoomDelta = y is to change the zoom level by units of y

It looks like you already have a published CSP via an HTTP header because a console error saying:

it violates the following Content Security Policy directive "default-src 'self'"

while your meta tag contains other default-src sources: default-src 'self' https:*//api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js

You can check the CSP response HTTP header that you have, the tutorial is here.

In this case by adding meta tag you'll have 2 CSPs which will work independently each other, therefore CSP in HTTP header will continue to block your scripts.

Node.js has a Helmet middleware in dependancies, Helmet 4 automatically publishes a default CSP via HTTP header. Check it.
In this case you have 2 opts:

• disable Helmet's CSP: app.use( helmet({ contentSecurityPolicy: false, }) ); and use a meta tag.
• configure CSP header via Helmet (preferred way).

BTW you have errors in the:

Things are actually not as hard as it might seem. As others have suggested you could do it with some trickery - but it is not needed as the required functionality is built into Mapbox itself yet! If you look up the API reference for it's own map object, you'll notice there are a couple of interesting events:

click, mouseenter, and mouseleave

Usually those are bound to the actual map and added like: