Add style-spec option to specify interpolation mode for raster-style sources

[CrokinoleMaster]

mapbox-gl-js version: v0.34.0

Steps to Trigger Behavior

1. create an ImageSource using a nice pixelated image
2. add raster layer using created source

Expected Behavior

have an option to use gl.NEAREST so that my image is pixelated rather than blurry.

Actual Behavior

My nice pixelated image is now a blurry and ugly because ImageSource._prepareImage uses gl.LINEAR :(
https://github.com/mapbox/mapbox-gl-js/blob/master/src/source/image_source.js#L157-L158

[andrewharvey]

Something for the GL Style Spec raster layer.

CartoCSS exposed this as the raster-scaling property.

Could be useful for maps like weather radars, mobile cell coverage too:

[CrokinoleMaster]

@andrewharvey yes! that's exactly what I meant.

[anandthakker]

Updated the title to reflect a style-spec feature request (as @andrewharvey noted).

cc @mapbox/gl

[CrokinoleMaster]

the texture is created in the source and not in the layer, so the source cannot know the layer paint properties when it creates the texture.

[rohitrameshrao]

Exactly what I am looking for. I am unable to use mapbox/GL for a lot of annotation jobs that require pixel-level accuracy.

Can we expect this anytime soon?

[kkaefer]

To implement this, set the texture scale mode to gl.NEAREST, and expose this as an option in the style spec.

[rohitrameshrao]

@kkaefer Can you help with where can I change the texture scale mode to gl.nearest? I don't mind hard-coding this in my js file for now.

[andrewharvey]

@rohitrameshrao I believe it's the gl.LINEAR at

mapbox-gl-js/src/source/image_source.js

Line 201 in 3c07b72

this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);

[rohitrameshrao]

Thanks @andrewharvey! I tried changing it and building it. The map is still not pixelated! :/

[andrewharvey]

@rohitrameshrao that place in the code sets it for Image sources, if you're using a raster tile source then you'll also need to set it around

mapbox-gl-js/src/source/raster_tile_source.js

Line 106 in 3c07b72

if (tile.texture) {

UPDATE: ^ isn't right, I'm working on a PR which should solve this.

[andrewharvey]

@rohitrameshrao take a look at #6411 for the delta to get it working, at the moment I can only work out how to hardcode an Image source as either linear or nearest filtering, so if you need an urgent solution you could just use the current PR which has it hardcoded...

[andrewharvey]

@rohitrameshrao from my testing #6411 is working well, would appreciate if you could test it out too.

[rohitrameshrao]

@andrewharvey Sure! Will test this in the next couple of days and let you know. Thanks!

[CrokinoleMaster]

Awesome thanks!