0

I have a new account in Carto (using Builder). I have found several examples using SQL filters. But when I apply them to my map, they do not work. Could it be related to the domain change on the API call?

Anyone know how to apply a SQL filter using CARTO.js and CARTO Builder vizjson and show his result on a map?

UPDATE:

After @ramiroaznar request, I have added my code. A SQL filter could be SELECT * FROM distritos where coddistrit = '1'. When I use the sample provided on the answer the map does not work. Again, the problem could be related to the domain of the API call when querying.

  • API call that works: http://rodrigorodriguezmartin.carto.com/api/v1/map?stat_tag=API&config={"version"%3A"1.0.0"%2C"stat_tag"%3A"API"%2C"layers"%3A\[{"type"%3A"cartodb"%2C"options"%3A{"sql"%3A"select * from distritos"%2C"cartocss"%3A"%23layer { polygon-fill%3A %23374C70%3B polygon-opacity%3A 0.9%3B polygon-gamma%3A 0.5%3B line-color%3A %23FFF%3B line-width%3A 1%3B line-opacity%3A 0.5%3B line-comp-op%3A soft-light%3B}"%2C"cartocss_version"%3A"2.1.0"}}\]}&callback=_cdbc_271830228_1

  • API call that does not work: http://rodrigorodriguezmartin.carto**db**.com/api/v1/map?stat_tag=API&config={"version"%3A"1.0.0"%2C"stat_tag"%3A"API"%2C"layers"%3A\[{"type"%3A"cartodb"%2C"options"%3A{"sql"%3A"select * from distritos"%2C"cartocss"%3A"%23layer { polygon-fill%3A %23374C70%3B polygon-opacity%3A 0.9%3B polygon-gamma%3A 0.5%3B line-color%3A %23FFF%3B line-width%3A 1%3B line-opacity%3A 0.5%3B line-comp-op%3A soft-light%3B}"%2C"cartocss_version"%3A"2.1.0"}}\]}&callback=_cdbc_271830228_1

My CARTO.js application code:

<!DOCTYPE html>

<html>
<head>
    <title>Title</title>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />

<style type="text/css" >
    html, body, #map {
    height: 100%;
    padding: 0;
    margin: 0;
}

    body > div.cartodb-header {
        display: none;
        position: absolute;
        top: 0px;
        width: 100%;
        background-color: #18a68d;
        opacity:0.9;
        font-family: 'Helvetica Neue',Helvetica,sans-serif;
        line-height: normal;
        z-index: 99999;
    }
</style>
</head>
<body>
    <!--MAPA-->
    <div id="map"></div>

    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>
    <script>
        //Una vez cargada la página, lanzamos la secuencia JS de Carto
        window.onload = main;

        function GetLayerURL(sIdLayer) {
            return "http://" + sUserName + ".carto.com/u/" + sUserName + "/api/v2/viz/" + sIdLayer + "/viz.json";
        }

        var sUserName = "rodrigorodriguezmartin";
        var sURLMapaTodo = GetLayerURL("f884e2a2-29d1-11e7-8322-0ecd1babdde5");

        jQuery.support.cors = true;

        function main() {

            //Generamos el mapa indicando un zoom y unas coordenadas centrales
            var map = new L.Map('map', {
                shareable: true,
                title: 'Titulo',
                description: 'El cambio que se ve',
                search: true,
                loaderControl: true,
                cartodb_logo: false,
                layer_selector: true,
                legends: true,
                fullscreen: true,
                zoomControl: true,
                center: [40.4193612, -3.7018384],
                zoom: 12
            });

            //Añadimos el mapa base
            L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
                attribution: 'Stamen',
            }).addTo(map);

            //THIS WORK!!! :)
            //cartodb.createLayer(map, sURLMapaTodo).addTo(map)

            //THIS DON´T WORK :(
            cartodb.createLayer(map, {
                user_name: sUserName,
                type: 'carto',
                sublayers: [{
                    sql: "select * from distritos",
                    cartocss: "#layer {  polygon-fill: #374C70;    polygon-opacity: 0.9;    polygon-gamma: 0.5;    line-color: #FFF;    line-width: 1;    line-opacity: 0.5;    line-comp-op: soft-light;}",
                }]
            }).addTo(map)
        }

    </script>
</body>
</html>
0

The current version of CARTO.js is not compatible with BUILDER vizjsons at this moment, as commented here. But you still can create CARTO.js apps using createLayer method and datasets (or queries) from your CARTO account. Here you have a working example.

UPDATE:

The vizjson of your code was generated from a BUILDER map, and as I mentioned above: BUILDER vizjsons do not work with the current CARTO.js version. I have replicated your code, now it works (I added CARTO.js v3.15 library instead of v3.14, removed the vizjson parts and left only the key parts):

<html>
    <head>
        <title>El cambio que se ve</title>
        <meta http-equiv="Access-Control-Allow-Origin" content="*">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />

        <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
        <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> 

        <style type="text/css" >
            html, body, #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        </style>

    </head>
    <body>

        <div id="map"></div>

        <script type="text/javascript">

            function main() {

                var map = new L.Map('map', {
                    center: [40.4193612, -3.7018384],
                    zoom: 12
                });

                L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
                    attribution: 'Stamen',
                }).addTo(map);

                cartodb.createLayer(map, {
                    user_name: 'rodrigorodriguezmartin',
                    type: 'cartodb',
                    sublayers: [{
                        sql: "select * from distritos",
                        cartocss: "#layer {  polygon-fill: #374C70;    polygon-opacity: 0.9;    polygon-gamma: 0.5;    line-color: #FFF;    line-width: 1;    line-opacity: 0.5;    line-comp-op: soft-light;}",
                    }]
                }).addTo(map)
            }

            window.onload = main;

        </script>
    </body>
</html>
2
  • Not work...I have paste my code in the ask. Are you from Madrid? xD – user3809539 May 3 '17 at 18:38
  • Now it works. No, I am not. :-) – ramiroaznar May 3 '17 at 20:58

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.