Skip to content

Instantly share code, notes, and snippets.

@jatorre jatorre/
Last active Jan 11, 2018

What would you like to do?
Example Mapbox + CARTO map using Vector Tiles

Example Usage of CARTO Vector Tiles with MapboxGL

This example showcase how to simply use the new capabilities of CARTO for producing Mapbox Vector Tiles from its Maps API.

<!DOCTYPE html>
<meta charset='utf-8' />
<title>MapboxGL VECTOR CartoBasemaps and Vector DATA</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src=''></script>
<link href='' rel='stylesheet' />
<script src=""></script>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
<div id='map'></div>
var map = new mapboxgl.Map({
container: 'map',
style: '',
center: [-73.99952307865874,40.720456948272926],
zoom: 13.591813153603,
pitch: 60,
bearing: 8
map.on('style.load', function () {
var sql = "select cartodb_id, \
st_Buffer(the_geom_webmercator,40) as the_geom_webmercator, \
numfloors from pluto15v1 \
WHERE numfloors>30";
var username = "cwhong";
//Direct call to the CARTO Maps API, now with Mapbox Vector Tiles support
var mapConfig = {"layers":[{"id":"pluto15v1","options":{"sql":sql}}]};
mapConfig = encodeURIComponent(JSON.stringify(mapConfig));
function (code, resp){
cartoLayer = JSON.parse(resp);
cartoSource = {
type: 'vector',
tiles: cartoLayer.metadata.tilejson.vector.tiles,
map.addSource('cartoSource', cartoSource);
'id': 'pluto',
'type': 'fill-extrusion',
'source': 'cartoSource',
'source-layer': 'pluto15v1',
'paint': {
"fill-extrusion-height": {
"base": 1,
"type": "exponential",
"property": "numfloors",
"stops": [[0,5],[1,16],[2,16],[4,16],[8,32],[16,64],[32,128],[64,256],[200,512]]
"fill-extrusion-color": {
"base": 1,
"type": "exponential",
"property": "numfloors",
"stops": [[0,"#EEE"],[1,"#F7FCF0"],[2,"#E0F3DB"],[4,"#CCEBC5"],[8,"#A8DDB5"],
"default": "#EEE"
"fill-extrusion-opacity": 1,
"fill-extrusion-base": 5
//Labels on top of data. Using CARTO basemap, so the layer "place_town" is
//the place to make the sandwich
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.