Announcing CARTO.js v4.1

It's been three months since CARTO.js v4 reached the stable release state. Since then  we've been receiving very good feedback and researching what our customers are using the library for. Today  it's my honor to introduce CARTO.js v4.1!

Focus on easier development

Our goal with the next milestone of CARTO.js is to help developers with the most common struggles we've seen so far. We're introducing:

• Buffer map changes: we take care of map changes so you don't run into limit bottlenecks.
• Source filters: an easier way to filter sources of data so you don't have to maintain a heavy structure for filtering.
• Histogram range: now you can ask a certain range to a histogram to focus on the data you find more interesting.

Buffering map changes

With CARTO.js v4  we introduced a shift on the way of creating applications with our library. Instead of an out-of-the-box solution  we provide now simpler building blocks that you can structure on top of your applications. That change is super powerful. You are now not restricted by what our solution provides. You can leverage your knowledge of Leaflet or Google Maps and use CARTO.js as another piece to answer your needs.

But with great power comes great responsability. CARTO.js map changes being programmatic means that now we can provoke changes in the map at the speed of light. We've seen applications making changes to lots of dataviews and layers at the same time  hitting our Engine platform limits. The solution was to structure better the application with those limits in mind. Until now.

In CARTO.js v4.1 we're freeing developers from changing the code to avoid running into performance problems. Now we buffer your changes and apply them once they're all finished. You don't have to worry about that anymore. And the best part is that's transparent. We do it under the hood so no changes in your code are needed to get advantage of it.

Source filtering

Another pain point we've seen during the last months is related to source filtering. The way you can filter your data (through a widget  through code… ) forced you to maintain a structure to build SQL sentences taking that filter into account. Not a big deal with one filter. A cumbersome task when combining lots of filters.

In CARTO.js v4.1 we're introducing two source filters: the category filter and the range filter.

Category filter

One of the most common filtering actions in a map is to show some information that belongs to certain categories. With the category filter now you can tell a source to show only the data that has certain values in a column. Indeed  you can apply a broad criteria: in  not in  equal  not equal  like  similar to… Reference.

As an example  imagine you want to show apartment rental prices only in certaing districts. With the new category filter is as easy as:

const source = new carto.source.Dataset('apartments');
const districtFilter = new carto.filter.Category('district_group'  { in: ['Diamond District'  'Tudor City'  'Little Brazil'] });
source.addFilter(districtFilter);

If you change your mind later  just set other values and the source will react to the new filter criteria.

districtFilter.set('in'  ['Kips Bay'  'Gramercy Park'  'Flatiron District']);

More info in Category filter Developers reference.

Range filter

The other common filtering action is to restrict the numeric information to certain values. It's the operation made when selecting a range in a histogram  for instance.

As an example  imagine you want to show only locations with a rental price between 3K$ and 4K$. With the new range filter is as easy as:

const source = new carto.source.Dataset('apartments');
const priceFilter = new carto.filter.Range('price'  { between: { min: 3000  max: 4000 } });

Of course  you can alter the filter afterwards.

priceFilter.setFilters({ between: { min: 4000  max: 5000 } });

More info in Range filter Developers reference.

Combining filters

The real power comes when using several filters at the same time.  As you can see in the examples documentation you can apply a filter as complex as you want and not worry about a single line of SQL code.

For instance  you could combine the two filters above (district and filter) with another one that only selects those apartments that rents the entire home or those who has recent reviews.

const filtersCombination = new carto.filter.AND([
  neighbourhoodFilter 
  priceFilter 
  new carto.filter.OR([ entireHomeFilter  reviewsInLastYearFilter ])
]);

We encourage you to take a look on the developers portal to learn about this great enhancement. Examples

Custom histogram range

In CARTO.js v4  we added dataviews  objects able to extract data from a dataset in predefined ways. One of them is the histogram dataview  used to represent the distribution of numerical data.

Until CARTO.js v4.1  the histogram operated on the whole range of the selected column. That is  if you wanted to get the histogram of the column price  the histogram showed the data from the minimum value in the whole dataset to the maximum one. Although this is very convenient and it's the most likely way to use it  there are some cases where you want to focus on a particular range of the histogram. The typical example is a column where most of the data falls into one bin and the rest of them are empty because of the existence of outliers. In this case  the histogram doesn't tell you the right insights and  probably  you want to ask for the data in the most populated bin.

In CARTO.js v4.1 the histogram dataview now provides two extra parameters: start and end.

const histogramDataview = new carto.dataview.Histogram(
  source 
  'price'  {
    bins: 5 
    start: 40 
    end: 60
  }
);

This dataview will return a histogram whose range goes from 40$ to 50$  instead of the whole price range.

We can't wait to see your incredible location intelligence apps using these new features!!

Happy mapping!