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>

1 Answer 1

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 Commented May 3, 2017 at 18:38
  • Now it works. No, I am not. :-) Commented May 3, 2017 at 20:58

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.