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
/ index.html
Last active Jul 9, 2020
View index.html
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <title>CARTO BQ Tiler Pre-view map</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' /> |
View index.html
| <!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> |
jatorre
/ index.html
Last active Jun 16, 2020
View index.html
| <!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> |
jatorre
/ index.html
Last active Apr 16, 2020
View index.html
| <!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" /> |
jatorre
/ index.html
Last active Apr 10, 2020
View index.html
| <!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" /> |
jatorre
/ example query by tile
Created Feb 3, 2020
View example query by tile
| 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, |
jatorre
/ index.html
Created Oct 29, 2019
View index.html
| <!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; } |
jatorre
/ index.html
Last active Jan 11, 2018
View index.html
| <!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> |
View carto-basemap.json
| { | |
| "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", |
NewerOlder