3

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!

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.