Customize search feature

Question

I'm trying to create a map with CartoDB to show the spanish population between...at a municipality level.

I can do everything perfectly, but I have just one problem: I would like to know if is there any possibility to customize the "search" feature, connecting it to the geolocalized names that I have in my table. In the way that if I put "Guadalajara" -that I have in my table- it goes directly to Guadalajara, Spain (the one in my table) and not to Guadalajara, México. And, in the same way, If I put "Madrid" right now it goes to the city, just a bit more north than where my point is.

Hope I've been clear. Maybe my solution is to add a filter feature to a map, but I still don't know how to do it.

Thanks!

Answer 1

Yes this is possible below is a basic template to follow:

 function somefunctionname(layer) {
    var sql = new cartodb.SQL({ user: 'useraccount name' });
    var $options = $('#name of you button');    
    $options.click(function() {
        var Varriablename = document.getElementById('inputboxid').value;
        // create query based on data from the layer
        var query = "SELECT * FROM tablename";
         //basic if statement to check if the inputbox is blank or not
        if(inputboxit === "") {
            alert("Please enter in some txt");
        } else {
            query = "SELECT * FROM tablename where something=  '" + inputboxid+ "'";
            console.log(query);
           sql.getBounds(query).done(function(bounds) {        
               map.fitBounds(bounds);
                map.setZoom(17);
            });
        }
        // change the query in the layer to update the map
        layer.setSQL(query);
    });
}

var map;
function main() {
    cartodb.createVis('map', 'url viz from the dashboard', {
        tiles_loader: true,
        center: [lat,long of your data],  
        zoom: 10 //zoom level of the map
    })
    .done(function(vis, layers,data) {
        // layer 0 is the base layer, layer 1 is cartodb layer
        map = vis.getNativeMap();
        var subLayer = layers[1].getSubLayer(0);
        somefunctionname(subLayer);
        subLayer.on('featureOver', function(e, latlng, pos, data, subLayerIndex) {
            console.log("mouse over polygon with data: " + data);
        });

    })
    .error(function(err) {
        console.log(err);
    });
}
window.onload = main;

this template was using leaflet you will need to fill in your own data along with a html to support the search option.