Iván Malagón

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'] });

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.

Category Filter

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.

Range Filter

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([
  new carto.filter.OR([ entireHomeFilter, reviewsInLastYearFilter ])

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

Combined Filters

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(
  '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!

About the author
Iván Malagón

Director of Engineering at CARTO.

More posts from Iván Malagón

Related Posts

Ready to optimize your territories with Location Intelligence?

Close circle icon

Contact us

Please fill out the below form and we'll be in touch real soon.