How to serve styled vector map data via CartoCSS

Question

I've got an example data set of lines and points, representing peoples' journey to work and where they feel at risk from road accidents.

Now, the data have attributes such as Place (Home, Work, Danger) and the severity of accidents they fear in different places. So the wider question is how to visualise this on a web map. For that I've looked into Google Maps, Leaflet and OpenLayers3. Each of these looks great and allow nice styling but none, to my eye, have the neatness of CartoCSS for fast, complex and intuitive styling, like the code below used to create the image below:

So I tried it out in tile mill and this is what I came up with, after converting the things to raster tiles via TileMill.

But this is a silly way to do things: it cannot overlay a base layer and would be much more efficient to just serve the vector data and style them in the client side, perhaps using something like mapbox.js. But I cannot work out how to use the lovely CartoCSS language in the client side to style GeoJSON files. (How) Is this possible?

p.s. here's how I styled the above map

#tlines {
  line-width:1;
  line-color: #0b0;
}

#tpoints.points{
  marker-width: 6;
}


#tpoints.points[Place='Danger'] {
  marker-fill:#db0d0d;
}
#tpoints.points[Place='Home'] {
  marker-fill:#db0;
}

#tpoints.points[Severity='1']{
  marker-width: 4;}
#tpoints.points[Severity='2']{
  marker-width: 6;}
#tpoints.points[Severity='3']{
  marker-width: 10;}

Answer 1

I cannot work out how to use the lovely CartoCSS language in the client side to style GeoJSON files. (How) Is this possible?

It is not possible to use CartoCSS for styling features browser side.

To learn how to style GeoJSON in Mapbox.js/Leaflet.js take a look at the docs here:

• Styling GeoJSON in Mapbox.js https://www.mapbox.com/mapbox.js/api/v1.6.2/l-geojson/ (works exactly as in Leaflet.js as Mapbox.js is based on Leaflet.js)
• You can embed style options directly into the GeoJSON object with L.mapbox.simplestyle.style https://www.mapbox.com/mapbox.js/api/v1.6.2/l-mapbox-simplestyle-style/

Answer 2

Alex rightly points out that vector styling in Leaflet/Mapbox.js is a different creature than CartoCSS styling a la Tilemill or Mapbox Studio. However, it is possible to style features in a browser using CartoCSS; it just requires one of two things:

1. A different platform: CartoDB has an excellent JS library for styling hosted data with CartoCSS, based on leaflet and fully compatible with Mapbox basemaps.
2. Hosting your own tile server, either the CartoDB server or a combination of Mapbox-built tools.

Answer 3

If you are using GeoJson as data source, you may try the Leaflet.geojsonCSS plug-in for Leaflet.js. The Geojson CSS provides the styling definition for each feature in the collection in a css-like format. Using this requires to add the styling definition in the geojson beforehand.