4

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>
Improve this question

2 Answers 2

Reset to default
2

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

Improve this answer
2

The getBounds function actually returns two coordinates, upperleft and lowerright. So, you don't need to grab the first in the array, but just pass the entire bounds object. See here,

https://github.com/CartoDB/cartodb.js/blob/develop/doc/API.md#getbounds-and-leaflet

The problem that I see though is that the map object isn't available or even created. So, uncomment out the map.fitBounds(bounds) bit and then do this for you main() function,

var map;
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
        map = vis.getNativeMap();
        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);
    });
}
Improve this answer
2
  • That did seem to get the map to pan to the selected feature. Once that occurs, the ZoomIn functionality of the map is disabled... Not even sure where to begin with that one.
    – flippinGeo
    Commented Dec 6, 2013 at 2:22
  • hmm... maybe add a new thread for that question. but, some basemaps limit the zoom, so double check that first
    – andrewxhill
    Commented Dec 20, 2013 at 14:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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