Skip to content

Instantly share code, notes, and snippets.

<!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.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/nanoajax/0.4.3/nanoajax.min.js"></script>
<style>
<!DOCTYPE html>
<html>
<head>
<title>COVID 19 Risk Index</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<!DOCTYPE html>
<html>
<head>
<title>COVID 19 Risk Index</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
CREATE TEMP FUNCTION bbox(x NUMERIC, y NUMERIC,zoom NUMERIC )
RETURNS ARRAY<FLOAT64>
LANGUAGE js AS """
var SphericalMercator = (function(){
// Closures including constants and other precalculated values.
var cache = {},
EPSLN = 1.0e-10,
D2R = Math.PI / 180,
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Load a public CARTO Builder URL dynamically</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>OpenLayers – Vector tiles – Points aggregation | CARTO</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
<script src="https://openlayers.org/en/v4.6.4/examples/resources/mapbox-streets-v6-style.js"></script>
<style>
@jatorre
jatorre / README.md
Last active April 23, 2020 13:10
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.

@jatorre
jatorre / carto-basemap.json
Last active June 8, 2017 15:08
Testing CARTO Vector Tiles
{
"tiles": ["https://cartobase-a.global.ssl.fastly.net/omtvector/{z}/{x}/{y}.vt?api_key=de0f3965167a84e25fb5573409f071e7406619ef",
"https://cartobase-b.global.ssl.fastly.net/omtvector/{z}/{x}/{y}.vt?api_key=de0f3965167a84e25fb5573409f071e7406619ef",
"https://cartobase-c.global.ssl.fastly.net/omtvector/{z}/{x}/{y}.vt?api_key=de0f3965167a84e25fb5573409f071e7406619ef",
"https://cartobase-d.global.ssl.fastly.net/omtvector/{z}/{x}/{y}.vt?api_key=de0f3965167a84e25fb5573409f071e7406619ef"],
"name": "CARTO Map Tiles",
"format": "pbf",
"basename": "v3.5.mbtiles",
"id": "openmaptiles",
@jatorre
jatorre / index.html
Last active May 26, 2016 16:33
Mapzen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2/leaflet.css">
<link rel="stylesheet" href="https://erasermap.com/css/main.css">
</head>
<body>
/** torque visualization */
Map {
-torque-frame-count:107;
-torque-animation-duration:7;
-torque-time-attribute:"time";
-torque-aggregation-function:"avg(value)";
-torque-resolution:2;
-torque-data-aggregation:linear;
}