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 with individual colours and clears any others that may have previously been selected:

var myRoutes = null;

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

// A function to set individual colours based on length
var determineColor = function(length) { // etc....

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

//Remove any previously selected routes

// 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('<h2><p>' + feature.properties.name + '</h2>' + '<p><b>KiLR Rating</b><br />' + feature.properties.ratings + '</p><em>' + feature.properties.highlights + '</em><br />' + '<p>' + '<b>' + feature.properties.length + "km" + '</b></p>');
                   color: determineColor(feature.properties.length)

You can see that each route has a pop-up. What I would like to do is unload the other routes when an individual route is clicked (and keep the pop-up) so a user can more clearly see where the route actually goes (note some overlap in the routes).
enter image description here

Update: I now have what I think should be a working block to highlight the clicked route only from the layer.

This will style the clicked layer:

layer.setStyle({opacity: 1, width: 3, color: 'red'}); 

However I need some help implementing something to style the clicked and not clicked routes:

layer.on('click', function (e) {
    e.target.feature.properties.selected = true;
       color: highlightRoute(e.target.feature.properties.selected)});

I appear to have lost the plot on writing the highlightRoute bit. So far (and I know this is not correct but don't know how to fix) I have:

    var highlightRoute = function (ml) {
        if (e.target.feature.properties.selected == true) {
            return 'red';
        } else {
            return 'gainsboro';

Can anyone help sort this little niggle out?

1 Answer 1


You can use the show() (the sublayer you have clicked on) or hide() (the rest of the sublayers) methods as explained in this tutorial.

  • I'm afraid it isn't clear to me how I can use this method without re-writing my entire code. I'm not creating a layer from a visualisation I have published I am using the SQL API to call polylines from the dataset. From what I can see the syntax is totally different. Perhaps you can clarify?
    – Paws
    Apr 29, 2016 at 17:13
  • Sorry, I didn't read it carefully. In addition to the post you suggested at the end of your question, there is this that can help you. Similar to the methods I cited, you can set a variable/layer for each route using the SQL API and then use removeLayer() and addLayer() Leaflet methods. Apr 29, 2016 at 19:03
  • Sorry, still not following this method! Ideally, I don't want to have each route returned as an individual layer. I am trying to load route options in together, then the user picks the one they want to do based on how it looks and the pop-up info. When the user has decided they click on the route line they want and this is on the only one left on the map. I am trying to implement within the myRoutes = L.geoJSON(data section by implementing a layer.on('click', function () as per the post linked at the end of my question but this hasn't been successful.
    – Paws
    Apr 30, 2016 at 14:05

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.