• Stars
    star
    128
  • Rank 275,439 (Top 6 %)
  • Language
    JavaScript
  • License
    BSD 3-Clause "New...
  • Created over 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

CARTO VL: a Javascript library to create vector-based visualizations

CARTO VL

CircleCI

CARTO VL is an open source JavaScript library for developers to create vector-based visualizations inside Location Intelligence applications.

Features

  • Maps are rendered client-side, instead of being rendered on the server. As a result, we provide faster load times and overall app performance by eliminating potential server problems.
  • Built-in smart point aggregations and geometry simplifications making it easier than ever to visualize and interact with larger datasets. CARTO VL does this in a dynamic and automatic way, meaning you donโ€™t need to rerun costly and time-expensive pre-processing steps over the geometry.
  • Ability to modify geometries directly in the browser. This is a powerful solution for animated visualizations of points, lines, and polygons.
  • Full control over everything happening on the map and can provide rich reactions to user interactions.
  • New and intuitive map styling language that is designed specifically for multi-scale, thematic cartography. With just a few lines, complex visualizations can be created. Non-programmers can create their first map easily, while programmers will still be able to exploit the full potential of the CARTO ecosystem.

Example

Run this

width: 8
color: ramp(buckets($dn, [80, 100, 140]), prism)
strokeWidth: 0
filter: $dn > 60

To see

I want to make a map

To start, you will need a basic HTML file structure to display your map in a browser. We recommend you to follow this Getting started guide to create a basic map. Then, you can get familiarized with the rest of the library following this link: https://carto.com/developers/carto-vl/guides/introduction/, which includes a list with more specific and advanced guides.

Also, take a look at our examples to understand the possibilities and inspire you!

An alternative way, if you already have a build system in your project (webpack, rollup...), is to use our npm package. You can install it with:

npm i @carto/carto-vl

Take a look at an example made with webpack here.

Happy mapping!

I want to contribute to CARTO VL

That's great! We are more than happy to receive your contributions to the code and its documentation.

Install

To clone and run this library, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/CartoDB/carto-vl

# Go into the repository
$ cd carto-vl

# Install dependencies (node >=6.11.5 is required)
$ yarn

# Bundle the library
$ yarn build

For more information, please read DEVELOPERS.md.

Start developing

Get started using CARTO VL's documentation at CARTO's Developer Center.

Play with the examples

You can find all the examples on the documentation in the examples folder. There are also some developer focused examples on the debug folder.

Run the following commands to access them locally:

# Bundle the library with a watch dog
$ yarn build:watch

# Run a server
$ yarn serve

Contributing

Lastly, check out CONTRIBUTING.md for more information about submitting pull requests to us. You will need to sign a Contributor License Agreement (CLA) before making a submission. Learn more here.

Feedback

We encourage you to start playing with CARTO VL and to please send us feedback so we can create an even better library, suited to your needs.

Works with

CARTO VL is a geo-spatial data visualization library. However it doesn't include basemap rendering capabilities. Therefore, CARTO VL needs to be used with Mapbox GL as a basemap provider. You'll need to use Mapbox GL (>=v.0.50.0) for controlling the center and zoom level of your map too. The integration is seamless, check the examples!

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

License

This project is licensed under the BSD 3-clause "New" or "Revised" License - see the LICENSE file for details.

BrowserStack

BrowserStack supports this OpenSource project, providing us with valuable tools to test CARTO VL over different systems and browsers configurations.

BrowserStack Logo

More Repositories

1

cartodb

Location Intelligence & Data Visualization tool
JavaScript
2,719
star
2

odyssey.js

Making it easy to merge map and narrative
JavaScript
1,620
star
3

carto.js

CartoDB javascript library
JavaScript
421
star
4

torque

Temporal mapping for CARTO
JavaScript
395
star
5

Windshaft

A Node.js map tile library for PostGIS and torque.js, with CartoCSS styling
JavaScript
307
star
6

cartoframes

CARTO Python package for data scientists
Python
249
star
7

CartoColor

CartoColors as a node module
JavaScript
212
star
8

basemap-styles

CARTO basemap public styles
CartoCSS
211
star
9

analytics-toolbox-core

A set of UDFs and Procedures to extend BigQuery, Snowflake, Redshift, Postgres and Databricks with Spatial Analytics capabilities
JavaScript
186
star
10

mobile-sdk

CARTO Mobile SDK core project
C
170
star
11

carto-python

CARTO Python client
Python
155
star
12

Leaflet.CanvasLayer

full screen canvas layer for Leaflet
JavaScript
116
star
13

VECNIK

Render Vector HTML5 maps using CartoDB and Carto as styling language, on top of Leaflet
JavaScript
114
star
14

cartodb-postgresql

PostgreSQL extension for CartoDB
PLpgSQL
109
star
15

data-science-book

Jupyter Notebook
99
star
16

carto-workshop

CARTO training materials
Jupyter Notebook
87
star
17

airship

A design library for building Location Intelligence applications.
JavaScript
75
star
18

Windshaft-cartodb

Windshaft tailored for CARTO
JavaScript
72
star
19

CartoDB-SQL-API

CartoDB SQL API
JavaScript
60
star
20

cartodb-r

R package to interface with CartoDB
R
59
star
21

python-quadkey

native library to manage quadkey in a fast way
C
57
star
22

CartoDB-basemaps

CartoDB basemaps
CartoCSS
54
star
23

crankshaft

CARTO Spatial Analysis extension for PostgreSQL
Python
51
star
24

academy

Academy
HTML
48
star
25

cartodb-nodejs

Node.js package for easy access to CartoDB's APIs
JavaScript
45
star
26

research-public

This repository contains the code and data related to different research initiatives carried out at CARTO by the Data Science team
Jupyter Notebook
44
star
27

bigmetadata

Python
43
star
28

real-time-map

CSS
40
star
29

carto-react-template

CARTO for React. The best way to develop Location Intelligence (LI) Apps usign CARTO platform and React
JavaScript
39
star
30

grainstore

Generate Mapnik MML & XML for single postgis tables with style persistance.
JavaScript
36
star
31

deep-insights.js

Create powerful dashboards using CARTO
JavaScript
34
star
32

mobile-android-samples

Android sample for CARTO Mobile SDK
Java
34
star
33

d3.cartodb

Client-side rendering of CartoDB visualisations with d3
JavaScript
30
star
34

mobile-ios-samples

iOS mobile app with CARTO Mobile SDK
Swift
28
star
35

turbo-carto

CartoCSS preprocessor
JavaScript
28
star
36

torque-tiles

Torque Tiles Specification
28
star
37

tiles3d-demo

JavaScript
25
star
38

data-services

CARTO internal geocoder PostgreSQL extension
Shell
25
star
39

labs-postgresql

24
star
40

cartodb-rb-client

Ruby client for cartodb API
Ruby
24
star
41

cartodb-pluto

PLUTO Data Service
23
star
42

carto-selfhosted

Deploy CARTO in a self hosted environment
Shell
23
star
43

dataservices-api

The CARTO Data Services API
PLpgSQL
22
star
44

carto-print

A Python module to export images at any resolution, size and bounding box from a CARTO named map:
Python
19
star
45

carto-react

CARTO for React packages
JavaScript
19
star
46

cartonik

Render maps with @carto/mapnik
JavaScript
18
star
47

training

CartoDB Workshops
HTML
17
star
48

camshaft

Analysis library to create data views from queries
JavaScript
17
star
49

cesium-cartodb

JavaScript
16
star
50

mobile-dotnet-samples

CARTO SDK samples for Xamarin Android, iOS and UWP .NET
C#
16
star
51

cdb-manager

JavaScript
15
star
52

raster-loader

Python
14
star
53

bcn_traffic_map

Dynamically web map example using CartoDB: Barcelona Traffic Map
Python
14
star
54

carto-etl

Python
13
star
55

poc-databricks

CARTO Analytics Toolbox for Databricks provides geospatial functionality leveraging the Geomesa SparkSQL capabilities.
Scala
13
star
56

labs-multilayer

HTML
12
star
57

mapboxgl-draw-rectangle-drag

A Mapbox GL Draw plugin to create a rectangle via click & drag
JavaScript
12
star
58

cloud-next

Demo Google Maps Vector, Deck.gl and CARTO
JavaScript
12
star
59

pg_schema_triggers

PostgreSQL 9.3+ Schema Triggers extension
C
11
star
60

GoT

The Geom of Thrones
JavaScript
11
star
61

QuadGrid

Quadgrid for GDPR compliance
PLpgSQL
11
star
62

osm

CartoDB OSM installation scripts
Shell
10
star
63

cartodb-java-client

java client for cartodb SQL API
Java
10
star
64

torque.histogram

widget to see a histogram of a torque map
JavaScript
9
star
65

cartodb-publishing-templates

CSS
9
star
66

showcase-maps

JavaScript
9
star
67

toolkit

JS library to interact with CARTO APIs in a simple way
TypeScript
9
star
68

carto-waze

Python
8
star
69

node-cartodb-redis

node module to interact with the cartodb redis database
JavaScript
8
star
70

labs-cdbfiddle

An HTML template that takes a viz.json and displays the map, SQL, and CartoCSS in a neat embeddable iframe
HTML
8
star
71

carto-selfhosted-helm

Helm charts for CARTO Self-Hosted
Mustache
8
star
72

carto-for-developers-guides

Documentation to use CARTO with different visualization libraries
TypeScript
8
star
73

labs_vuejs_intro

Vue.js Introductory Workshop
HTML
8
star
74

carto-vl-cluster-workshop

CARTO VL cluster workshop
HTML
6
star
75

SDSC-23-NY

6
star
76

observatory-extension

PLpgSQL
6
star
77

platypus

JavaScript
5
star
78

CartoAssets

Common assets shared across several CARTO repositories
CSS
5
star
79

cartodb.proj

cartodb.js extension to work with non webmercator projections
JavaScript
5
star
80

web-sdk

TypeScript
5
star
81

cartodb15-workshop

JavaScript
5
star
82

mobile-tile-packager

Packages data from CARTO map/dataset as mbtiles with vector tiles
JavaScript
5
star
83

torque-gen

Export Torque tiles from local Postgres tables or your CartoDB account
Python
5
star
84

oldweather_wwi

A CartoDB visualization that maps the entire OldWeather dataset of over 1M UK navy locations during the period of WWI.
JavaScript
5
star
85

sdsc-bootcamp-spatial-data-eng

This repository contains the code used in workshop "An introduction to Spatial Data Engineering", in SDS Bootcamps
5
star
86

mobile-external-libs

External libraries needed for CARTO Mobile SDK
C
4
star
87

tangram-cartocss

โ›”๏ธ DEPRECATED Transform cartocss into a draw tangram object
JavaScript
4
star
88

zika

Mapping progression, risk factors, and response to the Zika virus
JavaScript
4
star
89

carto-react-telco-demo

JavaScript
4
star
90

carto-vl-webpack-demo

Simple demo about how to use CARTO VL with webpack
JavaScript
4
star
91

workshop_UCL-CASA

Materials for the workshop at The Bartlett Centre for Advanced Spatial Analysis - UCL
4
star
92

node-cartodb-psql

A simple wrapper for node-postgres to work with CartoDB
JavaScript
4
star
93

mobile-carto-libs

Internal dependencies for CARTO Mobile SDK
C++
4
star
94

documentation

Main repo for CARTO's documentation.
HTML
4
star
95

node-redis-mpool

Multi-pool for redis connections
JavaScript
4
star
96

labs-cartodb2ckan

JavaScript
4
star
97

mobile-sample-data-collection

Location-based mobile data collection with CARTO Mobile SDK
C#
4
star
98

beedumper

A tool to export data from SupportBee ticketing tool
Python
3
star
99

labs-colorscales

Design and test your color scales
JavaScript
3
star
100

tangram.cartodb

โ›”๏ธ DEPRECATED A library to render in webgl vector tiles in cartodb.js
JavaScript
3
star