0

I'm using Carto JS API.

        function main() {
            // create leaflet map and define some properties
            var map=    L.map(
                "map",
                {
                    zoomControl: true,
                    center: [40,-95],
                    zoom: 4
                }
            );

            // add a base layer to map
            var Hydda_Full = L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
                attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            });
            Hydda_Full.addTo(map);

            // viz.json of map
            var layerURL=           "URL TO MY CARTO MAP GOES HERE";

            cartodb.createLayer(map, layerURL, {infowindow: false, tooltip: false})
                .addTo(map)
                .done(function(layer){
                    layer.setInteraction(true);
                }
       }

This gives me my map with dots. The default color is orange. I want to change their colors in the JS API. How do I do this?

1

Inspect the layer object you receive in the .done method, you will be able to get to the sublayers (your map can have several layers) and then run .setCartoCSS to change dynamically the cartographic rules. Here you have an example of changing both the CartoCSS and the SQL.

1

You need to use setCartoCSS method. Here you can find a working example. But the key lines are these:

sublayer.setCartoCSS(new_style);

Where sublayer has been previously declared using getSubLayer method and new_style is a variable storing your new style.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.