how are calculated values past to valueToColor ?

[cscetbon]

The documentation says

valueToColor: ...The function must be named valueToColor with a float parameter (which will take values between 0 and 1)..

How are my values converted from integers (in my case) to floats between 0 and 1 ?

[Rylern]

A value v is converted to floats between 0 and 1 with the following formula:

(v - a) / (b - a)

where:

• a is the specified minValue parameter when creating the layer, or the minimal value of your values if minValue is not specified.
• b is the specified maxValue parameter when creating the layer, or the maximal value of your values if maxValue is not specified.

[cscetbon]

Thank you that's what I thought but I wasn't sure.

Another question is regarding colors, here is what I get using these parameters

const layer = interpolateHeatmapLayer.create({
            points,
            layerId: "temperature",
            pointRadius: 100,
            valueToColor: `vec3 valueToColor(float value) {
                if (value < 0.15) {
                    return vec3(0.0, 1.0, 0.0); // Green
                }
                if (value <= 0.20) {
                    return vec3(1.0, 1.0, 0.0); // Yellow
                }
                return vec3(1.0, 0.0, 0.0); // Red
            }`,
        })

I can't seem to find a way to use darker colors without changing the opacity, do you have any recommendations ? My goal is to get as close as possible to this, if you have any way to reach that goal please advise

[cscetbon]

I also see some issues with the drawing where a small area is left empty but I can't believe it's the only area that is not filled by overlapping small circles

These are the original points I have

Do you see any reason for that other than the radius size used or the number of points available ?

[Rylern]

I can't seem to find a way to use darker colors without changing the opacity, do you have any recommendations ? My goal is to get as close as possible to this, if you have any way to reach that goal please advise

A quick answer would be to define different color values:

vec3 valueToColor(float value) {
	if (value < 0.15) {
		return vec3(0.192156863, 0.439215686, 0.184313725); // Green
	}
	if (value <= 0.20) {
		return vec3(0.529411765, 0.517647059, 0.219607843); // Yellow
	}
	return vec3(0.529411765, 0.219607843, 0.215686275); // Red
}

(I got those values from an image color picker with your goal image.)

You can also set a dark theme on your map:

const map = (window.map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/dark-v10',
        // ...
}));

However, you won't get exactly what you're looking for. This is due to blending between the heatmap and the map below. There are different possible blending functions, currently only one is used, but I'll see if that's possible to let the user define them.

I also see some issues with the drawing where a small area is left empty but I can't believe it's the only area that is not filled by overlapping small circles

Are you talking about that area?

It seems a bit far from the points, are you sure it won't disappear if you increase the pointRadius by a few meters?

[cscetbon]

However, you won't get exactly what you're looking for. This is due to blending between the heatmap and the map below. There are different possible blending functions, currently only one is used, but I'll see if that's possible to let the user define them.

Yeah I tried those colors and the result is far from what I'm looking for. I also tried a dark style before and didn't find it good enough even if it looks good.

If there are other functions for the blending that would allow me to reach my goal it wouldn't be great @Rylern !

Are you talking about that area?

Yes I am and I'm not sure how far it is cause it's really a small area that doesn't look to be found on the outside of n radiuses, but I could be wrong. For sure if I increase the radius it disappears but then it goes beyong my location and in this example ends up drawing in water which I don't want.

[Rylern]

If there are other functions for the blending that would allow me to reach my goal it wouldn't be great @Rylern !

I'll look at it in a few days.

then it goes beyong my location and in this example ends up drawing in water which I don't want.

Have you tried using the roi parameter instead of pointRadius? It would allow you to define an area where the heatmap would be displayed.

[Rylern]

I just created version 1.6.0 that adds two parameters, layerBlendingFactor and mapBlendingFactor. You can try different values, for example:

const map = (window.map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/dark-v10',
        layerBlendingFactor: WebGLRenderingContext.ONE,
	mapBlendingFactor: WebGLRenderingContext.ONE,
        // ...
}));

Yes I am and I'm not sure how far it is cause it's really a small area that doesn't look to be found on the outside of n radiuses, but I could be wrong. For sure if I increase the radius it disappears but then it goes beyong my location and in this example ends up drawing in water which I don't want.

You can now also use the roi and pointRadius parameters at the same time, which can be useful for that.

[cscetbon]

@Rylern For some reason I don't see anything when I use your new version 😢

$ sum interpolateHeatmapLayer.js*
44379 25 interpolateHeatmapLayer.js
30386 25 interpolateHeatmapLayer.js.old

I see the javascript console on Chrome (not in Safari but same behavior), is something missing along the script or compiled into the script ?

Uncaught WebGL extension EXT_color_buffer_float not supported

I tried to put those new options in mapboxgl.Map and in interpolateHeatmapLayer.create, just in case, and it doesn't work.

    const map = (window.map = new mapboxgl.Map({
        container: 'map',
        // style: 'mapbox://styles/mapbox/light-v11',
        // style: 'mapbox://styles/mapbox/dark-v11',
        // style: 'mapbox://styles/mapbox/streets-v12',
        // style: 'mapbox://styles/mapbox/outdoors-v12',
        style: 'mapbox://styles/mapbox/satellite-v9',
        center: randomCoordinates,
        zoom: 14,
        layerBlendingFactor: WebGLRenderingContext.ONE,
        mapBlendingFactor: WebGLRenderingContext.ONE,
    }));
    
    map.on('load', () => {
        const layer = interpolateHeatmapLayer.create({
            points,
            layerId: 'temperature',
            pointRadius: 120,
            opacity: 0.5,
            valueToColor: `vec3 valueToColor(float value) {
                if (value < 0.4) {
                    return vec3(0.0, 1.0, 0.0); // Green
                }
                if (value < 0.7) {
                    return vec3(1.0, 1.0, 0.0); // Yellow
                }
                return vec3(1.0, 0.0, 0.0); // Red
            }`,
        });
        map.addLayer(layer);

[cscetbon]

@Rylern 👆

[Rylern]

As mentionned on #9, I wasn't able to reproduce the issue. Can you give more details on your project? Like the framework you use (e.g. React, Typescript, ...), the Mapbox version... Basically everything needed to create a minimal project reproducing the issue

[cscetbon]

hmm, not sure what's going on but I can't reproduce atm. I don't see much difference with your new library and using those 2 parameters in term of rendering besides moving colors here and there. It's unfortunately far from what I'm looking for :/

[Rylern]

Here is what I can get with layerBlendingFactor and mapBlendingFactor set to WebGLRenderingContext.ONE:

Isn't similar to

? (it could be more similar by spending a bit more time refining the parameters)