0

I would like to use the data on my cartodb in the search function using SQL API. Please help me understand what is missing form my code because when i use my search, i get this error:-

(Bad Request)send @ cartodb.js:5ajax @ cartodb.js:5a.execute @ cartodb.js:23a.getBounds @ cartodb.js:23(anonymous function) @ cartoEx2.html:66dispatch @ cartodb.js:4h @ cartodb.js:4

My code is as follows:-

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
  html, body,#map {
      width:100%; 
      height:100%; 
      padding: 0; 
      margin: 0;

    }
  div#searchbox{
    background-color: #d2eaef;
    opacity: 0.8;
    position: absolute;
    top: 10px;
    left: 50px;
    width: auto;
    height: auto;
    padding: 10px;
    display: block;
    z-index: 9000;

    }
    div#searchbox input{
      width: 200px;
    }
    div#results{
      background: #FFF;
    }
 </style>
   <link rel="stylesheet" 
      href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />

  </head>
<body>
  <div id="map"></div>
  <div id="searchbox">
  <input type="text" name="ad" value="" id="ad" size="10" />
  <button type="button" id="searchButton">Search</button>

<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
  var layer;
  var input;
  var map;
  function main() {

    var map = L.map('map', { 
              zoomControl: false,
              center: [-29.436487, 24.854498],
              zoom: 6
            });
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'}).addTo(map);

    // add CartoDB layer
        cartodb.createLayer(map,'https://nomcebo-geoilocate.carto.com/api/v2/viz/6b67556c-a25e-11e6-b8e7-0e05a8b3e3d7/viz.json').addTo(map)
        .done(function(){
          $('#searchButton').click(function(){
            input = $( "#ad").val();
            console.log(input);
            var sql = new cartodb.SQL({ user: 'nomcebo-geoilocate' });
             sql.getBounds("SELECT * FROM ecngo_members where name Ilike '" + input + 
             "'").done(function(bounds) {
                 // console.log(bounds);
             map.fitBounds(bounds)
            });

          });
        });
  }

  window.onload = main;

</script>
</body>
</html>
3

On the one hand, there is no name field in the ecngo_members dataset. So I recommend changing name to one of the existing fields, such as town. On the other hand, because your dataset contains points instead of polygons I would add map.setZoom(13); just after map.fitBounds(bounds);.

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.