-1

i am using cartodb.createLayer() function to prepare my web application. I have tried to pass vizjson url and metadata method both to get my layers from my carto account which has total of 8 layers in a map. But i am not able to render my map data on application, so far i have tried these two codes

cartodb.createLayer(map, {

      user_name: 'jayanttyagi',
      type: 'cartodb',
      sublayers: [{
        sql: query,
        cartocss: style,
      }]
    }).addTo(map)

And

cartodb.createLayer(map, https://jayanttyagi.carto.com/api/v2/viz/b8d9ffd0-54c4-4e6d-9ab2-3ed6c3532dae/viz.json).addTo(map)

Here is the complete html document of the interface

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTYgja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <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> 
        html, body{
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }
        #map {
            height: 100%;
            width: 100%;
        }
        #buttons {
            position: absolute;
            top: 15px;
            left: 80px;
        }
    </style>

</head>
<body>
    <div id="map"></div>
    <div id="buttons">
        <button class="public">public</button>
        <button class="reset">reset</button>
    </div>

</script>
            <script type="text/cartocss" id="style">
        #layer {
          polygon-fill: #f43a15;
          polygon-opacity: 1;
        }
        #layer::outline {
          line-width: 1;
          line-color: #FFF;
          line-opacity: 0.5;
        }
          </script>

    <script>
         $(document).ready(function() {
            map = L.map('map', {
          zoomControl: false,
          center: [16, 80],
          zoom: 10
            });
            cartodb.createLayer('map',{
          user_name: 'jayanttyagi',
          type: 'cartodb',
          sublayers: [{
            //sql: query,
            cartocss: style,
                }]
            }).addTo(map)

        /*cartodb.createVis('map',//'https://jayanttyagi.carto.com/api/v2/viz/3c941684-5cde-4591-b40a-46cb75a3ae0c/viz.json') 
            'https://jayanttyagi.carto.com/api/v2/viz/3a6b2aa5-fd29-4479-a216-cb65d232657c/viz.json', {
            zoom: 14, 
            layer_selector: true,
            shareable: true,
            legends: true
        })*/
        .done(function(vis,layers) {
                var plotlayer = layers[1].getSubLayer(0);
            });
            $('.public').click(function(){
                plotlayer.setSQL("SELECT * FROM parks WHERE parks='park_name' ");

            }); 
        });

    </script>
</body>
</html>
  • Duplicate gis.stackexchange.com/questions/255729/… @Jayant Tyagi you have posted the same question, regarding the first approach we do not know what is stored in style and sql variables, and the 2nd approach is going to fail because BUILDER viz.jsons are not supported by the current version of CARTO.js – ramiroaznar Sep 19 '17 at 6:51
  • Sir, i have commented the query and the style code is here <style> html, body, #map { height: 100%; padding: 0; margin: 0; }, AND please ingnore my previous query as it doesnt had enough details – Jayant Tyagi Sep 19 '17 at 6:57
  • You are mixing things. That's the style of the document. So again, we need the whole code because it looks like it is failing not because of CARTO, but because there are something wrong in the code. Here you have a working example of a complete CARTO.js application code. – ramiroaznar Sep 19 '17 at 7:02
  • Okay, i am actually doing the edits in the sample code which you have provided just by doing the necessary changes @ramiroaznar – Jayant Tyagi Sep 19 '17 at 7:11
  • however this map is visible in createVis function but why not in createLayer function @ramiroaznar – Jayant Tyagi Sep 19 '17 at 11:31
0

There are plenty of errors:

  • The sublayer is created without pointing to a right SQL and CartoCSS parameters.
  • There is not basemap.
  • The function in the done promise should have only layer as argument.
  • Finally, the button is not going to work because you do not have any park column in plot dataset.

I recommend studying really close CARTO.js documentation and check any examples available. Here are my corrections.

Posdata: please do not ping GIS SE users outside this forum.

  • Thank you so much @ramiroanazar i m sorry to ping u outside this forum i was running short of time to compete this project – Jayant Tyagi Sep 20 '17 at 8:35
  • Please, if my answer solves your problem, mark it as solved. – ramiroaznar Sep 20 '17 at 8:48

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.