[GIS] CartoDB- Passing selected features bounds to map center parameter (Zoom to selected features)

cartojavascriptsql

Looking to build a light-weight viewer for some data we have hosted on CartoDB. I'm looking to have a user input their address into an input, pass a query to CartoDB and have the map zoom/pan to the user entered address. Looking at the API docs I've got to say I'm at a loss on how to pass the lat/lon to the map center parameter. Code below.

I'm able to get the lat/lon of the point with the return of bounds[0], but from there I cannot figure out how to pass that into the main function to update the center zoom of the map.

I'm a JS novice so if you take the time to help me, please be detailed if you can. Thanks,

</head>
<script>
    // create layer selector
    function addressSearch(layer) {
        var sql = new cartodb.SQL({ user: 'centurygis' });
        var $options = $('#go');
        $options.click(function(e) {
            var houseNum = document.getElementById('houseNumber').value;
            var streetNam = document.getElementById('streetName').value;
            // create query based on data from the layer
            var query = "SELECT * FROM address_pt_subset";
            if(houseNum === "" && streetNam === "") {
                alert("Please enter a house number and street address");
            } else {
                query = "SELECT * FROM address_pt_subset WHERE addressno = '" + houseNum + "' AND streetname = '" + streetNam + "'";
                console.log(query);
                sql.getBounds(query).done(function(bounds) {
                    latlon = bounds[0];
                    console.log(latlon);
                    //map.fitBounds(bounds);
                });
            }
            // change the query in the layer to update the map
            layer.setSQL(query);
        });
    }

    function main() {
        cartodb.createVis('map', 'http://centurygis.cartodb.com/api/v2/viz/f3ff57ea-5139-11e3-9b0b-f7ce5acd3e77/viz.json', {
            tiles_loader: true,
            center: [39.118,-76.827],  //This is what I need to updat
            zoom: 14
        })
        .done(function(vis, layers) {
            // layer 0 is the base layer, layer 1 is cartodb layer
            var subLayer = layers[1].getSubLayer(0);
            addressSearch(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;
</script>
<body>
<div id="map"></div>
<div>
    <input type="text" id="houseNumber" value="10907">
    <input type="text" id="streetName" value="GUILFORD RD">
    <input type="button" value="Go!" id="go">
</div>
</body>

Best Answer

After: Map.fitbounds(bounds);

Use this :

map.setZoom(17);

This will allow you to adjust the zoom level, instead of zooming to the visualization max zoom option

Related Question