0

I am trying to follow some of the examples I have found here and in Google Groups about fitBounds for points. Most of the examples are for polygons and don't seem to work for points. I think I've tried just about every combo of syntax that generally looks like the following:

 var sql = cartodb.SQL({ user: 'username' });

 //feature selection buttons:
 $('.button').click(function(e, latlon, lat, lng, pxPos, data, layer) {

   $('.button').removeClass('selected');
   $(this).addClass('selected');

   //I think I need to include an sql statement with lat and lon to get bounds, but I could be wrong:
   //sql.execute("SELECT cartodb_id, name, ST_X(the_geom) lon, ST_Y(the_geom) lat FROM table_name WHERE name = " + $(this).attr('selected'), function(ret) {

   var swLat = map.getBounds().getSouthWest().lat,
       swLon = map.getBounds().getSouthWest().lng,
       neLat = map.getBounds().getNorthEast().lat,
       neLon = map.getBounds().getNorthEast().lng,

       //fitBounds works with manual inputs (below)
       southWest = L.latLng(40.56, -112.05),
       northEast = L.latLng(40.77, -111.8),

       //...**but not with this part**
       //southWest = L.latLng(swLat, swLon),
       //northEast = L.latLng(neLat, neLon),

       bounds =  L.latLngBounds(southWest, northEast),

   map.fitBounds(bounds);

   LayerActions[$(this).attr('id')] ();

 });

I would be grateful for any feedback on this, or examples of fitBounds for points and not polygons. Here is the jsbin, annotated to the best of my ability: http://jsbin.com/hunovumu/38/edit

  • Are you sure the lines that you say aren't working aren't actually working? They look like you're basically saying map.fitBounds(map.getBounds()), which isn't going to change much. – eric brelsford Jul 3 '14 at 21:43
  • Yeah, I don't know haha. Sort of new to this. The bounds variable should be grabbing the swLat bounds, neLat bounds, etc. via the southWest and northEast variables. But I guess something I'm not aware of belongs in the getBounds parentheses. Still, I've tried the method referred to in this issue: stackoverflow.com/questions/23517214/… as well. Just haven't found many examples of working fitBounds for queried markers. – tbushman Jul 4 '14 at 4:09
  • In this code you're getting the bounds from map, not from a layer or marker. Do you have a version of the code you're running that you can post on jsfiddle.net or similar? – eric brelsford Jul 4 '14 at 13:54
  • Thanks! For future reference, it's helpful (for people answering your questions) to make a copy of your code reduced down to just the problem you're having. This will be fine as is, will post an answer soon. – eric brelsford Jul 5 '14 at 23:40
0

This is less of a Leaflet issue than a CartoDB one. In your code you are adding a CartoDB layer to your Leaflet map, then interacting with CartoDB to filter the features the layer shows.

The short answer is: you need to ask CartoDB for the bounds. Leaflet doesn't know much about the CartoDB layer, especially when it comes to the features CartoDB is showing.

The longer answer is:

  1. Get the bounds from CartoDB. There are a few ways to do this, but the easiest is likely to use sql.getBounds(). This will looks something like:

    var sql = new cartodb.SQL({ user: 'tbushman' });
    sql.getBounds(YOUR_QUERY).done(function(bounds) {
        // TODO Set Leaflet's bounds here
    });
    

    Where YOUR_QUERY is whatever SQL query you used to filter your layer. For example, looking in your code, one of them is:

    SELECT * FROM full_uu_tb WHERE type = 'Health and Ability'
    
  2. Now set your Leaflet map's bounds (on the TODO line above). This should be as simple as what you already have in the code above:

    map.fitBounds(bounds);
    
  3. Get rid of most of the bounds-handling code you have above, everything between (but not including) $(this).addClass('selected'); and LayerActions[$(this).attr('id')] ();

Finally, the LayerActions object in your full code is a nice way of separating the various SQL queries from the rest of the code. The only problem is that it is a bit redundant and you're going to need to get the actual SQL query in order to get the bounds. I would recommend storing only the SQL queries this way and moving the rest into $('.button').click(...).

  • Wow! Thank you! That works! Excellent, however I am using your method in the var LayerActions = { section. I will figure out how to make it less redundant, but for the time being, this works and I am grateful for the time you put in to this answer. – tbushman Jul 7 '14 at 4:18
  • Glad to help. Good luck. – eric brelsford Jul 7 '14 at 4:41

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.