Background: transparent; should work

[hampelm]

Transparency is a necessary feature of the 21st century! Nodetiles spits out 8-bit pngs. I didn't immediately see how to make this happen; maybe there's just a switch somewhere I can flip?

(update: transparency works fine, but we don't currently support the transparent keyword)

[hampelm]

Turns out background-color: transparent; in Map doesn't work, but rgba(0,0,0,0); does.

[Mr0grog]

Changed the issue title to reflect the actual problem: we should support the transparent keyword. I think this is possibly a bug in Carto, but need to check.

[springmeyer]

Carto simply passes the 'transparent' keyword through because Mapnik understands to render as 'rgba(0,0,0,0)'

[Mr0grog]

Thanks for the tip, Dane! Was going to check later tonight to see, but now I don't have to :)

[springmeyer]

np! btw, does nodetiles support png8 with semitransparent alpha? I'd be surprised if that is what cairo is providing. If my hunch is right then you may be interested in using https://github.com/developmentseed/node-blend which offers fast,alpha-preserving png8 encoding among other things.

[Mr0grog]

does nodetiles support png8 with semitransparent alpha?

Not sure, but we are definitely outputting png32 images, not png8 (I think Matt was just confused when the transparent keyword didn't work). Although this definitely makes me wonder if we could/should be smarter about encoding and sometimes or optionally do png8 (or jpg?), which might be good enough in a lot of cases and be much smaller.

node-blend looks pretty badass, though.

[hampelm]

I don't know much about PNGs, but I checked the image I got back (uploaded above) with identify from imagemagick and sips and got the following:

$ identify -verbose png.png 
Image: png.png
  ...
  Colorspace: sRGB
  Depth: 8-bit
  ...

$ sips -g all png.png 
/Users/matth/Desktop/png.png
  ...
  samplesPerPixel: 3
  bitsPerSample: 8
  hasAlpha: no
  space: RGB

[Mr0grog]

With images like png8 and gif, the bit depth is the wrong place to be looking—they achieve 8bits/pixel by using an index into a 24 (or 32) bit space, which is the:

samplesPerPixel: 3
bitsPerSample: 8

3 samples of 8 bits per sample you see in the sips output. So png8, png24, and png32 are all 8 bits per channel with three or four channels.

If you want to figure out what kind of PNG you're looking at, you should check the png:IHDR.color_type in the Properties section of identify's output.

A png8 looks like:

  Properties:
    date:create: 2013-01-30T23:43:16-08:00
    date:modify: 2013-01-30T23:43:16-08:00
    png:IHDR.bit_depth       : 8
    png:IHDR.color_type      : 3 (Indexed)
    png:IHDR.interlace_method: 0 (Not interlaced)
    png:IHDR.width,height    : 1000, 800
    png:PLTE.number_colors   : 128

While a png24 looks like:

  Properties:
    date:create: 2013-01-30T23:43:28-08:00
    date:modify: 2013-01-30T23:43:28-08:00
    png:IHDR.bit_depth       : 8
    png:IHDR.color_type      : 2 (Truecolor)
    png:IHDR.interlace_method: 0 (Not interlaced)
    png:IHDR.width,height    : 1000, 800

And a png32 (taken from NodeTiles output):

  Properties:
    date:create: 2013-01-30T22:43:40-08:00
    date:modify: 2013-01-30T22:43:40-08:00
    png:bKGD                 : chunk was found (see Background color, above)
    png:IHDR.bit_depth       : 8
    png:IHDR.color_type      : 6 (RGBA)
    png:IHDR.interlace_method: 0 (Not interlaced)
    png:IHDR.width,height    : 256, 256

You can see they all have a bit depth of 8 (per channel). color_type, though, will tell you whether it is indexed (3) for png8, true color (2) for png24, or RGBA (6) for png32.

You can also check for png:PLTE.number_colors (only png8 has this) or for Colormap entries and Colormap in identify's output. Those are the actual color index that each pixel in a png8 references in order to only use 8 bits. You'll only see those attributes on a png8.

[Mr0grog]

(Wheeee, isn't reading image metadata fun and easy?) :P

[Mr0grog]

Well, this is no fun. The Carto parser gives us back rgba(#,#,#,#) for most situations, but gives us #00000000 for transparent. It also tells us the alpha value is 1 instead of 0 :(