CartoCSS: alpha blending with comp-op

Question

Using CartoCSS/Tilemill, I have one layer for the land polygons and one for urban areas, as follows:

#zoomed-polygons[zoom>7] {
  polygon-fill: white;
}

#urban[zoom>=4] {
  polygon-fill: #FFCC99;
  polygon-opacity: 0.66;
  polygon-smooth: 0.75;
}

I would like the urban areas to be clipped inside the land mass so they do not extend to water areas, unlike on the following screenshot:

I believe comp-op: dst-in; is the correct way to go, but regardless of the comp-op value I set, I can't get anywhere near the desired result, unfortunately.

Accepted Answer

Bear in mind that when you set a map background-colour (i.e. the sea in your example) then every source image is fully opaque and most of the alpha-blending comp-ops become much less useful.

The tilemill comp-op documentation states:

"The dst-in comp-op will only draw parts of the destination that intersect with parts of the sources. The colors of the source will not be drawn, only the alpha channel (the shapes). If your source is completely solid, this operation will effectively be the same as dst, since all parts of the destination will intersect with the source."

The last sentence here is the most important - your source is completely solid. The approach that I would recommend is to use ocean polygons, not land polygons, and then draw land(background colour), city polygons and then ocean polygons on top.

CartoCSS: alpha blending with comp-op

Follow this question

Related questions