TileMill: How to access geojson properties with CartoCSS

Question

When trying to display a geojson layer in TileMill, is it possible to access the 'properties' of each feature?

My geojson looks like this:

        "type": "Feature", 
        "geometry": {
            "type": "Point", 
            "coordinates": [2.22614, 48.8765]
            }, 
        "properties": {
            "type": "stop",
            "name": "SOME_NAME",
            "color": "#ff0000"
            }

and I would like to display the name in properties/name, using the color in properties/color.

Is it possible? Properties are clearly accessible since one can write this and it works:

#id[type='stop'] {
  /* various css rules */
  }

But is it possible to use properties in the css rules themselves? This for instance does not work:

#id[type='stop'] {
  marker-line-color: [color];
  }

(or any variation with or without quotes inside or outside brackets for 'color').

If it's not possible, in what other format should I transform the geojson in order to access properties of each element from the css?

Answer 1

Data properties can be used for filters in selectors (ie the #id[type='stop'] part), but TileMill cannot currently assign colors or most other property types based on values in the data.

Instead, you would have to create a filter to check the data, then assign the color manually:

#id[type='stop'] {
  [color='#ff0000'] { marker-line-color: #ff0000; }
  [color='#00ff00'] { marker-line-color: #00ff00; }
  // etc.
}

This is a limitation of Mapnik, the rendering engine behind TileMill. Support for assigning more values based on the data is a planned feature, but not yet available.

Currently the only style properties that can accept data values are:

• marker-width
• marker-height
• text-orientation
• building-height
• shield-name
• text-name
• marker-file (within the URI)
• shield-file (within the URI)
• point-file (within the URI)

Since marker-file is supported, another option you have is creating a bunch of different SVG icons containing the appropriate color code in their name (eg stop-#ff0000.svg). Then you could have a style like this:

#id[type='stop'] {
  marker-file: url("icons/stop-[color].svg");
}