Skip to content

Instantly share code, notes, and snippets.

@rochoa

rochoa/README.md

Last active January 9, 2018 06:31
Show Gist options
  • Save rochoa/eca69273cd2b6cf86673 to your computer and use it in GitHub Desktop.
Save rochoa/eca69273cd2b6cf86673 to your computer and use it in GitHub Desktop.
Download ZIP
[CARTO] MVT service + Mapbox GL
Raw
README.md
Raw
cartodb.js.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>CartoDB MVT service + cartodb.js + Mapbox GL</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.9.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.9.0/mapbox-gl.css' rel='stylesheet' />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>
<style>
body {
margin: 0;
padding:0;
}
#map {
position: absolute;
top: 40px;
bottom: 0;
width: 100%;
}
.attributions {
position: absolute;
bottom: 0px;
right: 0px;
margin: 0;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.8);
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.attributions, .attributions a {
color: rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<div id='map'></div>
<div class='attributions'>
<a href="https://www.mapbox.com/about/maps/" target="_blank">© Mapbox</a>,
<a href="http://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors, and
<a href="http://cartodb.com/attributions" target="_blank">© CartoDB</a> attribution
</div>
<script>
function simpleStyle(tiles) {
return {
"version": 7,
"glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
"sources": {
"cartodb": {
"type": "vector",
"tiles": tiles,
"maxzoom": 18
}
},
"layers": [
{
"id": "layer0",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"paint": {
"fill-color": "#FF6600",
"fill-opacity": 0.7
}
},
{
"id": "layer0-borders",
"source": "cartodb",
"source-layer": "layer0",
"type": "line",
"paint": {
"line-width": 1,
"line-color": '#FFF',
"line-opacity": 1
}
}
]
}
}
mapboxgl.accessToken = 'pk.eyJ1Ijoicm9jaG9hIiwiYSI6IlUtOVdzLW8ifQ.aF6UbX1O-otpss1ZIwSQWw';
var map = new mapboxgl.Map({
container: 'map',
zoom: 1,
minZoom: 0,
maxZoom: 18,
center: [30, 0]
});
map.addControl(new mapboxgl.Navigation());
var layerOptions = {
user_name: "rochoa",
sublayers: [
{
sql: "SELECT * FROM world_borders_public",
cartocss: "#world_borders_public { marker-fill-opacity: 0.8; marker-line-width: 0; marker-placement: point; marker-type: ellipse; marker-width: 6; marker-fill: #6ac41c; marker-allow-overlap: true; }",
}
]
};
// debugger;
cartodb.Tiles.getTiles(layerOptions, function(result, err) {
var tiles = result.tiles.map(function(tileUrl) {
return tileUrl
.replace('{s}', 'a')
.replace(/\.png/, '.mvt');
});
map.setStyle(simpleStyle(tiles));
});
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>CartoDB MVT service + Mapbox GL</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.9.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.9.0/mapbox-gl.css' rel='stylesheet' />
<script src="styles.js"></script>
<style>
body {
margin: 0;
padding:0;
}
#map {
position: absolute;
top: 40px;
bottom: 0;
width: 100%;
}
.attributions {
position: absolute;
bottom: 0px;
right: 0px;
margin: 0;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.8);
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.attributions, .attributions a {
color: rgba(255, 255, 255, 0.8);
}
.selector {
width: 100%;
height: 40px;
margin: 0;
padding: 8px 8px;
background: rgba(255, 255, 255, 0.8);
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class='selector'>
Select a map <select id="examples"></select>
</div>
<div id='map'></div>
<div class='attributions'>
<a href="https://www.mapbox.com/about/maps/" target="_blank">© Mapbox</a>,
<a href="http://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors, and
<a href="http://cartodb.com/attributions" target="_blank">© CartoDB</a> attribution
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoicm9jaG9hIiwiYSI6IlUtOVdzLW8ifQ.aF6UbX1O-otpss1ZIwSQWw';
var map = new mapboxgl.Map({
container: 'map',
zoom: 1,
minZoom: 0,
maxZoom: 18,
center: [30, 0]
});
var examplesSelector = document.getElementById('examples');
function loadExample() {
map.setStyle(currentExample());
}
function currentExample() {
return STYLES[examplesSelector.value];
}
examplesSelector.addEventListener('change', loadExample, false);
Object.keys(STYLES).forEach(function(k) {
var option = document.createElement('option');
option.value = k;
option.innerText = k;
examplesSelector.appendChild(option);
});
map.setStyle(currentExample());
map.addControl(new mapboxgl.Navigation());
</script>
</body>
</html>
Raw
styles.js
var STYLES = {
simple: {
"version": 7,
"glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
"constants": {
"@sans": "Open Sans Regular, Arial Unicode MS Regular",
"@medium-label": "#f27a87",
"@small-label": "#384646",
"@label-halo": "rgba(255,255,255,0.5)",
"@label-halo-dark": "rgba(0,0,0,0.2)",
"@land": "#ededed",
"@water": "#7acad0",
"@province": "#FF6600"
},
"sources": {
"cartodb": {
"type": "vector",
"tiles": [
"http://rochoa.cartodb.com/api/v1/map/named/tpl_1adb092a_6b52_11e5_bc85_0e3ff518bd15/mapnik/{z}/{x}/{y}.mvt"
],
"maxzoom": 18
}
},
"layers": [
{
"id": "layer0",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"paint": {
"fill-color": "#FF6600",
"fill-opacity": 0.7
}
},
{
"id": "layer0-borders",
"source": "cartodb",
"source-layer": "layer0",
"type": "line",
"paint": {
"line-width": 1,
"line-color": '#FFF',
"line-opacity": 1
}
}
]
},
labels: {
"version": 7,
"glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
"constants": {
"@sans": "Open Sans Regular, Arial Unicode MS Regular",
"@medium-label": "#f27a87",
"@small-label": "#384646",
"@label-halo": "rgba(255,255,255,0.5)",
"@label-halo-dark": "rgba(0,0,0,0.2)",
"@land": "#ededed",
"@water": "#7acad0",
"@province": "#FF6600"
},
"sources": {
"cartodb-light_nolabels": {
"type": "raster",
"tiles": [
"http://all.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png"
],
"tileSize": 256
},
"cartodb": {
"type": "vector",
"tiles": [
"http://rochoa.cartodb.com/api/v1/map/named/tpl_1adb092a_6b52_11e5_bc85_0e3ff518bd15/mapnik/{z}/{x}/{y}.mvt"
],
"maxzoom": 12
}
},
"layers": [
{
"id": "simple-tiles",
"type": "raster",
"source": "cartodb-light_nolabels",
"minzoom": 0,
"maxzoom": 22
},
{
"id": "world_borders",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"paint": {
"fill-color": "@province",
"fill-outline-color": "#FFF",
"fill-opacity": 0.2
}
},
{
"id": "populated-places-labels",
"source": "cartodb",
"source-layer": "layer1",
"min-zoom": 2,
"max-zoom": 12,
"type": "symbol",
"layout": {
"text-field": "{name}",
"text-font": "@sans",
"text-max-size": 28,
"text-max-width": 8
},
"paint": {
"text-color": "black",
"text-halo-color": "@label-halo",
"text-size": {
"stops": [[7, 18], [10, 30]]
}
}
}
]
},
category: {
"version": 7,
"glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
"constants": {
"@sans": "Open Sans Regular, Arial Unicode MS Regular",
"@medium-label": "#f27a87",
"@small-label": "#384646",
"@label-halo": "rgba(255,255,255,0.5)",
"@label-halo-dark": "rgba(0,0,0,0.2)",
"@land": "#ededed",
"@water": "#7acad0",
"@province": "#FF6600"
},
"sources": {
"cartodb": {
"type": "vector",
"tiles": [
"http://rochoa.cartodb.com/api/v1/map/named/tpl_1adb092a_6b52_11e5_bc85_0e3ff518bd15/mapnik/{z}/{x}/{y}.mvt"
],
"maxzoom": 18
}
},
"layers": [
{
"id": "layer0-cat0",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"filter": ["==", "region", 0],
"paint": {
"fill-color": "#A6CEE3",
"fill-opacity": 0.7
}
},
{
"id": "layer0-cat1",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"filter": ["==", "region", 142],
"paint": {
"fill-color": "#1F78B4",
"fill-opacity": 0.7
}
},
{
"id": "layer0-cat2",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"filter": ["==", "region", 150],
"paint": {
"fill-color": "#B2DF8A",
"fill-opacity": 0.7
}
},
{
"id": "layer0-cat3",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"filter": ["==", "region", 19],
"paint": {
"fill-color": "#33A02C",
"fill-opacity": 0.7
}
},
{
"id": "layer0-cat4",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"filter": ["==", "region", 2],
"paint": {
"fill-color": "#FB9A99",
"fill-opacity": 0.7
}
},
{
"id": "layer0-cat5",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"filter": ["==", "region", 9],
"paint": {
"fill-color": "#E31A1C",
"fill-opacity": 0.7
}
},
{
"id": "layer0-borders",
"source": "cartodb",
"source-layer": "layer0",
"type": "line",
"paint": {
"line-width": 0.5,
"line-color": '#FFF',
"line-opacity": 1
}
}
]
},
choropleth: {
"version": 7,
"glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
"constants": {
"@sans": "Open Sans Regular, Arial Unicode MS Regular",
"@medium-label": "#f27a87",
"@small-label": "#384646",
"@label-halo": "rgba(255,255,255,0.5)",
"@label-halo-dark": "rgba(0,0,0,0.2)",
"@land": "#ededed",
"@water": "#7acad0",
"@province": "#FF6600"
},
"sources": {
"cartodb": {
"type": "vector",
"tiles": [
"http://rochoa.cartodb.com/api/v1/map/named/tpl_1adb092a_6b52_11e5_bc85_0e3ff518bd15/mapnik/{z}/{x}/{y}.mvt"
],
"maxzoom": 18
}
},
"layers": [
{
"id": "layer0-cat0",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"filter": ["<=", "area", 1638094],
"paint": {
"fill-color": "#B10026",
"fill-opacity": 0.7
}
},
{
"id": "layer0-cat1",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"filter": ["<=", "area", 91077],
"paint": {
"fill-color": "#E31A1C",
"fill-opacity": 0.7
}
},
{
"id": "layer0-cat2",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"filter": ["<=", "area", 39730],
"paint": {
"fill-color": "#FC4E2A",
"fill-opacity": 0.7
}
},
{
"id": "layer0-cat3",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"filter": ["<=", "area", 17652],
"paint": {
"fill-color": "#FD8D3C",
"fill-opacity": 0.7
}
},
{
"id": "layer0-cat4",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"filter": ["<=", "area", 7162],
"paint": {
"fill-color": "#FD8D3C",
"fill-opacity": 0.7
}
},
{
"id": "layer0-cat5",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"filter": ["<=", "area", 2281],
"paint": {
"fill-color": "#FED976",
"fill-opacity": 0.7
}
},
{
"id": "layer0-cat6",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"filter": ["<=", "area", 80],
"paint": {
"fill-color": "#FFFFB2",
"fill-opacity": 0.7
}
},
{
"id": "layer0-borders",
"source": "cartodb",
"source-layer": "layer0",
"type": "line",
"paint": {
"line-width": 0.5,
"line-color": '#FFF',
"line-opacity": 1
}
}
]
},
raster: {
"version": 7,
"glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
"constants": {
"@sans": "Open Sans Regular, Arial Unicode MS Regular",
"@medium-label": "#f27a87",
"@small-label": "#384646",
"@label-halo": "rgba(255,255,255,0.5)",
"@label-halo-dark": "rgba(0,0,0,0.2)",
"@land": "#ededed",
"@water": "#7acad0",
"@province": "#FF6600"
},
"sources": {
"cartodb-light_nolabels": {
"type": "raster",
"tiles": [
"http://all.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png"
],
"tileSize": 256
},
"cartodb-light_labels": {
"type": "raster",
"tiles": [
"http://all.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png"
],
"tileSize": 256
},
"cartodb": {
"type": "vector",
"tiles": [
"http://rochoa.cartodb.com/api/v1/map/named/tpl_1adb092a_6b52_11e5_bc85_0e3ff518bd15/mapnik/{z}/{x}/{y}.mvt"
],
"maxzoom": 18
}
},
"layers": [
{
"id": "basemap",
"type": "raster",
"source": "cartodb-light_nolabels",
"minzoom": 0,
"maxzoom": 22
},
{
"id": "layer0",
"source": "cartodb",
"source-layer": "layer0",
"type": "fill",
"paint": {
"fill-color": "#FF6600",
"fill-opacity": 0.4
}
},
{
"id": "layer0-borders",
"source": "cartodb",
"source-layer": "layer0",
"type": "line",
"paint": {
"line-width": 1,
"line-color": '#FFF',
"line-opacity": 1
}
},
{
"id": "labels",
"type": "raster",
"source": "cartodb-light_labels",
"minzoom": 0,
"maxzoom": 22
}
]
}
};
@timrobertson100
Copy link

Hi @rochoa

These use a beta feature of CartoDB's Maps API: fixed URLs. So there is no need to use cartodb.js and tiles can be consumed using a named map name.

Can you please explain how you use fixed URLs without carto.js? I am trying to pull my own vector tiles and Carto vector tiles into the Mapbox GL JS but the carto URLs I am using seem to expire after a couple of days.

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment