Create a line from points using cartodb.js

Question

I would like to draw a line between multiple points without creating a new dataset. Using this tutorial I've been able to draw lines between points in the CartoDB Editor: http://docs.cartodb.com/tutorials/gps_track/

However, I would like to do the same using Cartodb.js. But I can not get this to work. When I have drawn the lines in the layer in CartoDB editor it's also working on cartodb.js, probably because the connected JSON layer URL then understands that it should work with lines. However when I clear all SQL in CartoDB editor and see the points again, I can not 'convert' it to lines using Cartodb.js.

This is the code I'm using. Is there a fix so I can create lines directly from the dataset which is containing points?

<script>
var map;
function init(){
 // initiate leaflet map
 map = new L.Map('cartodb-map', { 
 center: [0,0],
 zoom: 1
 })
 L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(map);
 var layerUrl = 'https://crowdevents.cartodb.com/api/v2/viz/b896af1c-f1bb-11e5-a118-0e3ff518bd15/viz.json';
 var subLayerOptions = {
sql: "SELECT ST_MakeLine(the_geom_webmercator ORDER BY track_seg_id ASC) AS the_geom_webmercator, track_fid FROM table_29_track_points GROUP BY track_fid"
}
 cartodb.createLayer(map, layerUrl, { https: true })
.addTo(map)
.on('done', function(layer) {
 layer.getSubLayer(0).set(subLayerOptions);
}).on('error', function() {
 //log the error
});
}
</script>

Answer 1

You can make a workaround styling the GeoJSON with Leaflet. After removing your points layer with the CartoDB.js remove() function, execute your ST_Makeline query (but remember to convert your geom into a GeoJSON) and then iterate and style each geom row. Here you have a working example.

A more simpler way could be faking the cartodb_id. Here you have another working example.

• PierceB: Using your fix to fake the cartodb_id I have been able to get it to work. This is indeed the most easy solution for this. Great, thanks!

Answer 2

The CartoDB Editor tries to guess the type of geometry which with it is working and adapts the CartoCSS conveniently.

In your case, you are editing the SQL of your layer, generating lines on runtime, but you are not applying line styles (line CartoCSS properties) to your layer. Therefore, the tiles are not drawn as you would expect.

You need to also edit the CartoCSS of the layer with convenient properties for lines:

 var subLayerOptions = {
 sql: "SELECT ST_MakeLine(the_geom_webmercator ORDER BY track_seg_id ASC) AS the_geom_webmercator, track_fid FROM table_29_track_points GROUP BY track_fid",
 cartocss: "#layer{ line-color: #FF6600; line-width: 2; line-opacity: 0.7; }"
}

• PierceB: Thanks for your answer. I've added the cartocss, but still I can not see any lines. var subLayerOptions = { sql: "SELECT ST_MakeLine(the_geom_webmercator ORDER BY track_seg_id ASC) AS the_geom_webmercator, track_fid FROM table_29_track_points GROUP BY track_fid", cartocss: "#track_29_track_points{ line-color: #FF6600; line-width: 2; line-opacity: 0.7; }" } Do you perhaps have a working example that worked for you?