Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I posted a similar question about this a month or so ago and I was still in early stages of researching the problem thus not to many results came from it .After some time and effort I have come close to having my desired results. The goal is to have a search box that queries the table on my cartodb account and then results get sent back to the API. The code below works as described however that is because I have the value of the form hard coded. I did this to show that the function is correct and that the value does get passed on the the query.My problem thought is once i delete the hard coded value and try to type the text in, the query results on my Console are blank. So some where the value is getting dropped and I am not quite sure where. (I posted the whole code so that you can copy and paste to see the results...If desired)

<!DOCTYPE html>
 <html>
 <head>
<title>Bounds example | CartoDB.js</title>
<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" />
<style>
  html, body, #map {
    height: 95%;
    padding: 0;
    margin: 0;
  }
 </style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
   <link rel="stylesheet" 
      href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  <!--[if lte IE 8]>
    <link rel="stylesheet"    
      href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
  <![endif]-->
  </head>
<body>
  <div id="map"></div>
<form action="#" method="post"  id="form">
    <input type="Text" name="userInput" id="test" value="ARNOLD RD"> 
    <input type="submit" value="Submit" onclick="processFormData();" />
</form>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
  var layer;
  function main() {
    var map = L.map('map', { 
      zoomControl: false,
      center: [39.104181025785,-76.77140813181],
      zoom: 8
    });
    L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-\
       yp548gxo/{z}/{x}/{y}.png', {
      attribution: '<a href="http://mapbox.com/about/maps/" target="_blank">w/ 
     Mapbox</a>'
    }).addTo(map);

    var layerUrl = 'http://johnmann111.cartodb.com/api/v2/viz/fe164544-1c6a-
     11e3-af5f-5404a6a69006/viz.json';
    var layerOptions = {
      query: "SELECT * FROM {{table_name}} order by st_ymax(the_geom) desc",
      }

    function processFormData() {
    var input = document.getElementById('test').value;
    return input;
    }

    var myVar = processFormData();

    cartodb.createLayer(map, layerUrl, layerOptions)
    .on('done', function(layer) {
     map.addLayer(layer);
      setTimeout(function() {
        var sql = new cartodb.SQL({ user: 'johnmann111' });
        sql.getBounds("select * From aps_intersection where sec_rte Like '" + myVar + 
        "'").done(function(bounds) {
          map.fitBounds(bounds)
        });
      }, 2000);

    }).on('error', function() {
      cartodb.log.log("some error occurred");
    });

  }
  window.onload = main;
     </script>
    </body>
  </html>
share|improve this question
add comment

1 Answer 1

I was able to figure out what was wrong with my code. SetTimeout only allows for one call, so i changed it to setInterval which does mulitple calls.

       function processFormData() {
        var input = document.getElementById('test').value;
         return input;
       }



     cartodb.createLayer(map, layerUrl, layerOptions)
      .on('done', function(layer) {
       map.addLayer(layer);
    setInterval(function() {
        var myVar = processFormData();
      var sql = new cartodb.SQL({ user: 'johnmann111' });
       sql.getBounds("select * From aps_intersection where sec_rte Like '" + myVar + 
       "'").done(function(bounds) {
       map.fitBounds(bounds)
      });
     }, 2000);
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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