Skip to content

Instantly share code, notes, and snippets.

@jatorre jatorre/README.md
Last active Jan 11, 2018

Embed
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>
<html>
<head>
<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='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/nanoajax/0.4.3/nanoajax.min.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = new mapboxgl.Map({
container: 'map',
style: 'http://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
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
//https://carto.com/docs/carto-engine/maps-api/
var mapConfig = {"layers":[{"id":"pluto15v1","options":{"sql":sql}}]};
mapConfig = encodeURIComponent(JSON.stringify(mapConfig));
nanoajax.ajax({
url:'https://'+username+'.carto.com/api/v1/map?config='+mapConfig},
function (code, resp){
cartoLayer = JSON.parse(resp);
cartoSource = {
type: 'vector',
tiles: cartoLayer.metadata.tilejson.vector.tiles,
};
map.addSource('cartoSource', cartoSource);
map.addLayer({
'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"],
[16,"#7BCCC4"],[32,"#2B8CBE"],[64,"#0868AC"],[200,"#084081"]],
"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
},'place_town');
});
});
</script>
</body>
</html>
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.