Are there templates for adding a search filter on a CartoDB embed?

Question

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.

Answer 1

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.