1

So I already have the code working to initiate a map and to populate it with data points with a dynamic slider. What I am trying to do now is to have a user type in a query and when they submit that query, the map changes its center lat,lng to the new one.

So it'll pretty much be like

  • Search Rutgers Club
  • Get Lat & Lon
  • Change map center to new Lat & Lon

You can access my live site at parkru.com/v2.html

Also, here is what my js file looks like

2

It will be a combination of the SQL API inside of CartoDB.js and the Google Maps panTo function. Also see here,

https://stackoverflow.com/questions/9874576/google-maps-pan-to

var sql = new cartodb.SQL({ user: 'cartodb_user' });
var interesting_id = 3; 
sql.execute("SELECT ST_Y(ST_Center(the_geom)) lat, ST_X(ST_Center(the_geom)) lon FROM table_name WHERE id > {{id}}", { id: interesting_id })
  .done(function(data) {
         // create a new point from the returned lat/lon
         var latLng = new google.maps.LatLng(data.rows[0].lat, data.rows[0].lon);
         map.panTo(latLng);
   })

If you wanted to do the same thing in Leaflet, it would be almost identical except for how you create the point,

var latLng = new L.LatLng(data.rows[0].lat, data.rows[0].lon);

If you don't know where the map var comes from, take a look here, https://github.com/CartoDB/cartodb.js/blob/develop/doc/API.md#visgetnativemap

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.