Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm looking for any examples of an embedded CartoDB map with a search filter built in. So, a map of schools, say, with a pulldown that will let you select one school and then zoom to it.

Or a map of schools and a pull down that will let you toggle between Elementary, Middle and High schools.

I know I can use filters or a custom query but I'm looking for something viewers of the final map can play with themselves.

Here's the deal: I'm trying to figure out what it would take to make a map that a colleague wants. If I have to do a lot of JS work, that's a bigger project. If there's a cut-and-paste solution that makes it easier. And if there's a GUI, they can make it themselves.

share|improve this question
Denver Crime Map Maximize Filter – Mapperz Jul 24 '14 at 19:12
Are you looking for something out of the box? Or are you able to write basic Javascript? – Duncan Rager Jul 24 '14 at 20:18
@DuncanRager Updated my Q. I'm trying to get a handle on the scope of a project. Basic JavaScript isn't out of the question. – Amanda Jul 24 '14 at 21:39

Out of the box, you could use the "Layer Selector" as a very simple solution to filtering categories. Here is a link to a basic map I created with the option to toggle on and off cities and bodies of water. Here's a video that shows the basics.

For a more custom application, like selecting a specific school and zooming to it, you'd likely need some HTML/Javascript. The basic logic would go something like this:

  1. Use the CartoDB.js library to create your map and set it up how you like
  2. Create and Populate an HTML drop box (or similar element) with your school names, maybe grabbing them with an SQL call
  3. Hook a mouse click event handler to each one of those choices that fires a function that zooms to the feature. Maybe something like this.

If you aren't familiar with HTML/CSS/Javascript/SQL, it would be an undertaking just to navigate and understand the API reference. If you're interested, Carto has some examples to get you started.

Bottom line, for layer toggling, you can just use the visualizations, but for zooming and other custom stuff, CartoDB.js is the ticket.

share|improve this answer

Your Answer


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.