Expose valueToColor4 as constructor option

[chrissantamaria]

👋 this package has been very handy! Was looking to write a custom valueToColor4 function as mentioned in the README, though it looks like this isn't customizable via the constructor options (though valueToColor is). Is there any reason this can't / shouldn't be updated?

If not, I'm happy to open a PR and update this. Thanks!

[vinayakkulkarni]

👋 this package has been very handy! Was looking to write a custom valueToColor4 function as mentioned in the README, though it looks like this isn't customizable via the constructor options (though valueToColor is). Is there any reason this can't / shouldn't be updated?

If not, I'm happy to open a PR and update this. Thanks!

This is already exposed – https://github.com/vinayakkulkarni/mapbox-gl-interpolate-heatmap/blob/main/src/layer.ts#L20-L24

[chrissantamaria]

Perhaps I'm misunderstanding - the constructor type seems to accept valueToColor4 but doesn't actually use it to update the default class field:

mapbox-gl-interpolate-heatmap/src/layer.ts

Lines 67 to 85 in 4eb77bd

	constructor(options: HeatmapLayer) {
	this.id = options.id || '';
	this.data = options.data || [];
	this.aoi = options.aoi || [];
	this.valueToColor =
	options.valueToColor ||
	`
	vec3 valueToColor(float value) {
	return vec3(max((value-0.5)*2.0, 0.0), 1.0 - 2.0*abs(value - 0.5), max((0.5-value)*2.0, 0.0));
	}
	`;
	this.opacity = options.opacity || 0.5;
	this.minValue = options.minValue || Infinity;
	this.maxValue = options.maxValue || -Infinity;
	this.p = options.p || 3;
	this.framebufferFactor = options.framebufferFactor || 0.3;
	// Having a framebufferFactor < 1 and a texture that don't cover the entire map results in visual artifacts, so we prevent this situation
	this.textureCoverSameAreaAsROI = this.framebufferFactor === 1;
	}

I think this would just require a small addition to the constructor:

  constructor(options: HeatmapLayer) {
    this.id = options.id || '';
    this.data = options.data || [];
    this.aoi = options.aoi || [];
    this.valueToColor =
      options.valueToColor ||
      `
      vec3 valueToColor(float value) {
          return vec3(max((value-0.5)*2.0, 0.0), 1.0 - 2.0*abs(value - 0.5), max((0.5-value)*2.0, 0.0));
      }
  `;
+    this.valueToColor4 =
+      options.valueToColor4 ||
+      `
+      vec4 valueToColor4(float value, float defaultOpacity) {
+          return vec4(valueToColor(value), defaultOpacity);
+      }
+  `;
    this.opacity = options.opacity || 0.5;
    this.minValue = options.minValue || Infinity;
    this.maxValue = options.maxValue || -Infinity;
    this.p = options.p || 3;
    this.framebufferFactor = options.framebufferFactor || 0.3;
    // Having a framebufferFactor < 1 and a texture that don't cover the entire map results in visual artifacts, so we prevent this situation
    this.textureCoverSameAreaAsROI = this.framebufferFactor === 1;
  }

[vinayakkulkarni]

Perhaps I'm misunderstanding - the constructor type seems to accept valueToColor4 but doesn't actually use it to update the default class field:

mapbox-gl-interpolate-heatmap/src/layer.ts

Lines 67 to 85 in 4eb77bd

	constructor(options: HeatmapLayer) {
	this.id = options.id || '';
	this.data = options.data || [];
	this.aoi = options.aoi || [];
	this.valueToColor =
	options.valueToColor ||
	`
	vec3 valueToColor(float value) {
	return vec3(max((value-0.5)*2.0, 0.0), 1.0 - 2.0*abs(value - 0.5), max((0.5-value)*2.0, 0.0));
	}
	`;
	this.opacity = options.opacity || 0.5;
	this.minValue = options.minValue || Infinity;
	this.maxValue = options.maxValue || -Infinity;
	this.p = options.p || 3;
	this.framebufferFactor = options.framebufferFactor || 0.3;
	// Having a framebufferFactor < 1 and a texture that don't cover the entire map results in visual artifacts, so we prevent this situation
	this.textureCoverSameAreaAsROI = this.framebufferFactor === 1;
	}

I think this would just require a small addition to the constructor:

  constructor(options: HeatmapLayer) {

    this.id = options.id || '';

    this.data = options.data || [];

    this.aoi = options.aoi || [];

    this.valueToColor =

      options.valueToColor ||

      `

      vec3 valueToColor(float value) {

          return vec3(max((value-0.5)*2.0, 0.0), 1.0 - 2.0*abs(value - 0.5), max((0.5-value)*2.0, 0.0));

      }

  `;

+    this.valueToColor4 =

+      options.valueToColor4 ||

+      `

+      vec4 valueToColor4(float value, float defaultOpacity) {

+          return vec4(valueToColor(value), defaultOpacity);

+      }

+  `;

    this.opacity = options.opacity || 0.5;

    this.minValue = options.minValue || Infinity;

    this.maxValue = options.maxValue || -Infinity;

    this.p = options.p || 3;

    this.framebufferFactor = options.framebufferFactor || 0.3;

    // Having a framebufferFactor < 1 and a texture that don't cover the entire map results in visual artifacts, so we prevent this situation

    this.textureCoverSameAreaAsROI = this.framebufferFactor === 1;

  }

Feel free to open an PR ;)