1

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?

1 Answer 1

3

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");
}
2
  • Thanks! I had finally figured out after some testing that it didn't have anything to do with geojson; you can indeed read and assign values to text-name but not to color. Cool to know it's a planned feature (sad to know it's already been two years...)
    – Bambax
    Mar 9, 2014 at 1:09
  • I was not able to get the attribute-based marker-file path to work. I tried double quotes, single quotes, and no quotes, but couldn't get it. I pasted the whole path instead to make sure I had it right, and I did because it worked fine. Also tried it nested, not nested, and without attributes, but still no soup. Kept getting an "unable to download" 403 error in CartoDB. Any ideas??
    – abettermap
    Mar 17, 2015 at 1:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.