List search results

The following describes how to show a list of results next to your map. Quite a few people have asked for this, so I figured I'd show a simple way to do it. Please note, though, that there are some display issues and limits with this. You won't be able to show more than 500 results at a time, and you will want to style your list to either have scroll bars, or replace your map entirely.

For a more advanced example, see the Connect Chicago Locator. Source code.

Edit index.html

Add this to your left sidebar area.

<div class='well'>
  <div id='results_list'></div>
</div>

Edit source/maps_lib.js

Add this line to the end of the submitSearch function.

MapsLib.getList(whereClause);

Add these functions below the displaySearchCount function.

getList: function(whereClause) {
  var selectColumns = "name, address, hours, recyclables ";
  MapsLib.query(selectColumns, whereClause, "MapsLib.displayList");
},

displayList: function(json) {
  MapsLib.handleError(json);
  var data = json["rows"];
  var template = "";

  var results = $("#results_list");
  results.hide().empty(); //hide the existing list and empty it out first

  if (data == null) {
    //clear results list
    results.append("

No results found

"); } else { for (var row in data) { template = "\

\

\ " + data[row][0] + "\
\ " + data[row][1] + "\
\ " + data[row][2] + "\
\ " + data[row][3] + "\

\

" results.append(template); } } results.fadeIn(); },