block by wboykinm 5348605

Example of semicolon fail in SQL API call

Full Screen

index.html

<!DOCTYPE HTML>
<html>
<head>
  <link rel="stylesheet" href="//geosprocket.com/assets/cartodb/2.0.24/cartodb.css" />
  <link rel="stylesheet" href="//geosprocket.com/assets/bootstrap/css/bootstrap-cosmo.css" />
  <!--<link href="//geosprocket.com/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">-->
   <!--[if lte IE 8]>
        <link rel="stylesheet"//geosprocket.com/assets/cartodb/2.0.24/cartodb.ie.css" />
    <![endif]-->  
  
	<style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #map {width: 100%; height:100%; background: black; z-index:1;}
        
    .leaflet-container .leaflet-control-zoom {margin-top:55;}
    
    div.cartodb-popup div.cartodb-popup-content {max-height:none | inherit}
    
	</style>
	
	<script src="layers.js"></script>
	
</head>
<body onload="init()">

  <div id='map'></div>
  <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            
          </button>
          <a class="brand" href="../">CartoDB Data Portal Demo</a>
          <div class="nav-collapse collapse">
            <ul class="nav pull-right">
            	<li class="dropdown">
               		<a href="#" class="dropdown-toggle" data-toggle="dropdown"><small><i class="icon-download icon-white"></i> Download Buildings (KML) <b class="caret"></b></small></a>
                        <ul class="dropdown-menu">
                          <li class="disabled"><a>Select within the current map extent:</a></li>
                          <li class="divider"></li>
                          <li><a id="down10" href="#" target="_blank">10 Tallest</a></li>
                          <li><a id="down50" href="#">50 Tallest</a></li>
                          <li><a id="down100" href="#">100 Tallest</a></li>
                        </ul>
                </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  
  
</body>
<script src="//geosprocket.com/assets/cartodb/2.0.24/cartodb.js"></script>
<script src="//geosprocket.com/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

</html>

layers.js

  var map;
  	  function init(){
    // initiate leaflet map    
    map = new L.Map('map', { 
      center: [44.47960548767, -73.215293884277],
      zoom: 13
    });
    
   L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-b31zy3ud/{z}/{x}/{y}.png').addTo(map);
    
    var layerUrl = 'http://geosprocket.cartodb.com/api/v1/viz/btv_prints_011813/viz.json';
    var layerOptions = {
      query: "SELECT * FROM {{table_name}};",
      tile_style: "Map{buffer-size:512;}#{{table_name}}{building-height:[height]*0.4;building-fill:orange;building-fill-opacity:0.5;}"
    }    

    cartodb.createLayer(map, layerUrl, layerOptions)
      .on('done', function(layer) {
        map.addLayer(layer);
               
      }).on('error', function() {
        //log the error
      });
      
                  //packages a CSV of the highest-scoring 10,50 and 100 records within the current viewport            
            $('#down10').click(function() {
                var nwlat = map.getBounds().getNorthWest().lat,
                    nwlon = map.getBounds().getNorthWest().lng,
                    selat = map.getBounds().getSouthEast().lat,
                    selon = map.getBounds().getSouthEast().lng;

                var new_sql = "http://geosprocket.cartodb.com/api/v2/sql?q=SELECT%20*%20FROM%20btv_prints_011813%20WHERE%20the_geom%20%26%26%20ST_SetSRID(ST_MakeBox2D(ST_Point(" + nwlon + "%2C%20" + nwlat + ")%2C%20ST_Point(" + selon + "%2C%20" + selat + "))%2C4326)%20ORDER%20BY%20height_real%20DESC%20LIMIT%2010%3B&format=kml";

                $(this).attr("href", new_sql);
            });
            
            $('#down50').click(function() {
                var nwlat = map.getBounds().getNorthWest().lat,
                    nwlon = map.getBounds().getNorthWest().lng,
                    selat = map.getBounds().getSouthEast().lat,
                    selon = map.getBounds().getSouthEast().lng;

                var new_sql = "http://geosprocket.cartodb.com/api/v2/sql?q=SELECT%20*%20FROM%20btv_prints_011813%20WHERE%20the_geom%20%26%26%20ST_SetSRID(ST_MakeBox2D(ST_Point(" + nwlon + "%2C%20" + nwlat + ")%2C%20ST_Point(" + selon + "%2C%20" + selat + "))%2C4326)%20ORDER%20BY%20height_real%20DESC%20LIMIT%2050%3B&format=kml";

                $(this).attr("href", new_sql);
            });
            
            $('#bounds100').click(function() {
                var nwlat = map.getBounds().getNorthWest().lat,
                    nwlon = map.getBounds().getNorthWest().lng,
                    selat = map.getBounds().getSouthEast().lat,
                    selon = map.getBounds().getSouthEast().lng;

                var new_sql = "http://geosprocket.cartodb.com/api/v2/sql?q=SELECT%20*%20FROM%20btv_prints_011813%20WHERE%20the_geom%20%26%26%20ST_SetSRID(ST_MakeBox2D(ST_Point(" + nwlon + "%2C%20" + nwlat + ")%2C%20ST_Point(" + selon + "%2C%20" + selat + "))%2C4326)%20ORDER%20BY%20height_real%20DESC%20LIMIT%20100%3B&format=kml";

                $(this).attr("href", new_sql);
            });

        }