2

I am creating a web mapping application that will return appropriate routes based upon ST_length query on a cartoDB dataset. So far, the code below successfully maps those routes (and clears any others that may have previously been selected):

<script>
var sqlQueryOne = "SELECT * FROM my_routes WHERE ST_length(the_geom::geography)/1000 <= 5";

    // Function to add all routes less than 5km
    function showFive(){

    //Remove any previously selected routes
        if(map.hasLayer(myRoutes)){
            map.removeLayer(myRoutes);
            };

    // Get the data from db in geoJSON and using previously defined query
        $.getJSON("https://"+cartoDBUserName+".cartodb.com/api/v2/sql?format=GeoJSON&q="+sqlQueryOne, function(data) {
            myRoutes = L.geoJson(data,{
                onEachFeature: function (feature, layer) {
                    layer.bindPopup('<p><b>' + feature.properties.name + '</b><br /><em>' + feature.properties.highlights + '</em></p>');
                    layer.cartodb_id=feature.properties.cartodb_id;
                }
            }).addTo(map);
        });         
    };  
</script>

What I would like to know is how to style the individual routes as they come in to make it easier for the user to tell which is which. At the moment they are all the same colour, like this:

enter image description here

1 Answer 1

1

You can set the line color based on the length value with:

 layer.setStyle({
   color: 'red'
 });

And you can use a function to determine that color based on then length of the line

var determineColor = function(length) {
  if (length > 4000) {
    return 'red';
  } else if (length > 2500) {
    return 'orange';
  } else if (length > 1500) {
    return 'green';
  } else {
    return 'yellow';
  }
};

// Function to add all routes less than 5km
function showFive() {
var myRoutes;

    //Remove any previously selected routes
    if (map.hasLayer(myRoutes)) {
        map.removeLayer(myRoutes);
    };

    // Get the data from db in geoJSON and using previously defined query
    $.getJSON("https://jimmyrocks.cartodb.com/api/v2/sql?format=GeoJSON&q=" + sqlQueryOne, function(data) {
       myRoutes = L.geoJson(data, {
        onEachFeature: function(feature, layer) {
          layer.bindPopup('<p><em>' + feature.properties.name + '</em></p>');
          layer.cartodb_id = feature.properties.cartodb_id;
          layer.setStyle({
              color :determineColor(feature.properties.length)
        });
      }
    }).addTo(map);
  });
};

jsfiddle here

CartoDB has a lot of cool features you could use to style using their tiles as well

2
  • Thanks, this worked nicely for me. I can see that my set-up would cause problems for larger datasets. At the moment I only have 10 pre-drawn routes in my table that I manually assign a colour to using the "if else" you've shared with me. A good intro to these techniques though.
    – Paws
    Apr 29, 2016 at 14:15
  • You can create an algorithm to determine what color each will be. I updated the fiddle to use a linear algorithm: jsfiddle
    – jimmyrocks
    Apr 29, 2016 at 18:18

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.