1

I have a map I've put together with Carto. The main layer is a brewery point layer. I want to set up a search box that allows the map reader to search for a brewery by name. I know I can set up a filter that does this. However, the crucial piece is that the map then zooms to the brewery when one is selected. Is this possible using Carto.js? I'm pretty sure I could do it in Leaflet but wouldn't be able to access the data which is in Carto.

2

First, you need to add a searchbox div, such as this one:

  <div id="searchbox">
  <input type="text" name="ad" value="" id="ad" size="10" />
  <button type="button" id="searchButton">Search</button>

Secondly, you have to build a function that fits the bounds to the geometry of the name you have introduced using CARTO.js, Leaflet and JQuery:

$('#searchButton').click(function(){
  input = $( "#ad").val();
  var sql = new cartodb.SQL({ user: 'user_name' });
  sql.getBounds("SELECT * FROM table_name WHERE name ILIKE '" + input + "'").done(function(bounds) {
     map.fitBounds(bounds)
     });
   });

Here you have a working example.

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.