• Overview
  • Guides
  • Reference
  • Examples
  • Support
  • Fundamentals
    • Getting started
    • Components
    • Authorization
    • Flavors
    • Limits
  • Docs

    Libraries

    • CARTO.js
    • Python SDK
    • CARTOFrames
    • Torque.js
    • Mobile SDK

    API

    • Auth API
    • Import API
    • SQL API
    • Data Services API
    • Maps API

     

    • Data Observatory
    • Styling
    • On-premise
  • Request API Key
CARTO.js v4
  • Overview
  • Guides
  • Reference
  • Examples
  • Support
  • Fundamentals
    • Getting started
    • Components
    • Authorization
    • Flavors
    • Limits
  • Docs
    • Libraries
    • CARTO.js
    • Python SDK
    • CARTOFrames
    • Torque.js
    • Mobile SDK
    • API
    • Auth API
    • Import API
    • SQL API
    • Data Services API
    • Maps API
    • Data Observatory
    • Styling
    • On-premise
  • Request API Key
  • Developer Center
  • CARTO.js

    Libraries

    • CARTO.js
    • Python SDK
    • CARTOFrames
    • Torque.js
    • Mobile SDK

    API

    • Auth API
    • Import API
    • SQL API
    • Data Services API
    • Maps API

     

    • Data Observatory
    • Styling
    • On-premise

CARTO.js v4

Integrate interactive maps and location data into your web applications and websites.

  • Overview
  • Guides
  • Reference
  • Examples
  • Support
  • Basics
    • Add a layer
    • Add more layers
    • Change the source
    • Change the style
    • Move the layers
    • Server tile aggregation
  • Interactivity
    • Detect feature click
    • Detect feature over/out
    • Change the feature columns
  • Widgets
    • Formula widget
    • Category widget
    • Histogram widget
    • Time Series widget
    • Bounding Box filter
    • Status and error handling
  • Misc
    • Guide
    • Pop-Ups
    • Legends
    • Most/less populated places
    • Edit SQL & CartoCSS
    • Error handling

Add a layer

Add one CARTO layer to your map

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Add more layers

Add multiple CARTO layers to your map

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Change the source

Update the source of your layers

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Change the style

Update the style of your layers

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Move the layers

Update the order of your layers

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Server tile aggregation

Apply smart backend aggregation

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Detect feature click

Interact with the features on the click event

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Detect feature over/out

Interact with the features on the over/out events

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Change the feature columns

Change the columns returned in the feature event

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Formula widget

Create a widget with the formula dataview

This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Category widget

Create a widget with the category dataview

This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Histogram widget

Create a widget with the histogram dataview

This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Time Series widget

Create a widget with the time series dataview

This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Bounding Box filter

Apply a map bounding box filter to the widgets

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Status and error handling

Manage the status and erros in dataviews

This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Guide

Full reference guide example

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Pop-Ups

Create pop-up information windows and interact with your map

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Legends

Create dynamic legends

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Most/less populated places

Filter the 20 most/less populated places in the world

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Edit SQL & CartoCSS

Edit manually the SQL query and the CartoCSS style

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Error handling

Handle common errors in maps

  • LEAFLET
  • GOOGLE MAPS
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size
This example can not be properly rendered in browsers not compatible with ES6.
Click to open map full size

Products

Resources

About us

  • Products
  • Resources
  • About us

© CARTO 2018