Style geojson line in mapbox/leaflet

2
votes

I use geojson from Cartodb to make a line on my map. How can I set some styling on this line? I'm not do familiar with javascript, so please bear with me. This is my code for the line including my wanted styling:

    var mystyle = {
        "color": "#fff",
        "weight": 10,
        "opacity": 0.4
    };

var linelayer = L.mapbox.featureLayer()
.loadURL('http://aftonbladet2.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT ST_MakeLine(CDB_LatLng(latitude, longitude) ORDER BY created_date DESC) as the_geom FROM instagram')       
.addTo(map);

Any help would be much much appreciated! Martin

2
javascriptmapleafletmapboxgeojson

2 Answers

3
votes

You have to use setStyle for this. Look at the following plunk I made for you: http://plnkr.co/edit/Up6x7H?p=preview

For more styling options, visit the mapbox api @ https://www.mapbox.com/mapbox.js/api/v2.0.1/l-path/

Here's the actual code snippet:

var linelayer = L.mapbox.featureLayer();
linelayer.loadURL('http://aftonbladet2.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT ST_MakeLine(CDB_LatLng(latitude, longitude) ORDER BY created_date DESC) as the_geom FROM instagram');
linelayer.addTo(map);

/* Need to wait for geoJSON to finish loading */
setTimeout(function(){
  linelayer.setStyle({color: '#f00', weight: 10, opacity: 0.4});
},1000);

You'll need to wait for geoJSON from loadURL(...) to finish loading before applying style. You have to find a better way to do that.

Update: You can add a bit more code and fetch geoJSON youself. This adds bulk but removes the need to use unpredictable setTimeout.

var linelayer = L.mapbox.featureLayer();
linelayer.addTo(map);

/* Fetch geoJSON manually and set styles in a predictable fashion */
$.ajax({
  url: 'http://aftonbladet2.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT ST_MakeLine(CDB_LatLng(latitude, longitude) ORDER BY created_date DESC) as the_geom FROM instagram',
  datatype: 'jsonp',
  success: function(data){
    linelayer.setGeoJSON(data);
    linelayer.setStyle({color: '#f00', weight: 10, opacity: 0.4});
  }
});

Still can't believe mapbox doesn't accepts callbacks for async operations such as this!

0
votes

Here's some alternate syntax to the previous answer:

var linelayer = L.mapbox.featureLayer();
linelayer.addTo(map);

$.getJSON( 'http://aftonbladet2.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT ST_MakeLine(CDB_LatLng(latitude, longitude) ORDER BY created_date DESC) as the_geom FROM instagram',
            function (data) {
    linelayer.setGeoJSON(data);
    linelayer.setStyle({color: '#f00', weight: 4, opacity: 0.4});
}).fail(function( jqxhr, textStatus, error ) {
    var err = textStatus + ", " + error;
    //console.log( "Request Failed: " + err );
});