Skip to content

Instantly share code, notes, and snippets.

Ramiro Aznar ramiroaznar

View GitHub Profile
@ramiroaznar
ramiroaznar / index.html
Created Feb 27, 2019
CARTO VL + Interactivity + SVG Pie Chart
View index.html
<!DOCTYPE html>
<html>
<head>
<title>CARTO VL + Interactivity + Vega Pie Chart</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
<script src="https://libs.cartocdn.com/carto-vl/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
@ramiroaznar
ramiroaznar / index.html
Created Feb 26, 2019
CARTO.js + Category Dataviews + Vega Pie Chart
View index.html
<!DOCTYPE html>
<html>
<head>
<title>CARTO.js + Category Dataviews + Vega Pie Chart</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
<!-- Include Leaflet -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
@ramiroaznar
ramiroaznar / index.html
Created Feb 18, 2019
CARTO.js Histogram Dataview and Chart.js
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CARTO.js Histogram Dataview and Chart.js</title>
<!-- Include Leaflet -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
<!-- Include CARTO.js -->
@ramiroaznar
ramiroaznar / index.html
Created Nov 16, 2018
Bizi Routing | CARTO VL
View index.html
<!DOCTYPE html>
<html>
<head>
<title>Bizi Routing | CARTO VL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v1.0.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
@ramiroaznar
ramiroaznar / index.html
Created Oct 22, 2018
Animate origins, destinations and connections with CARTO VL
View index.html
<!DOCTYPE html>
<html>
<head>
<title>Bizi Movement | CARTO VL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
@ramiroaznar
ramiroaznar / index.html
Created Aug 24, 2018
Time Series widget with Chart.js and CARTO.js v4 dataviews
View index.html
<!DOCTYPE html>
<html>
<head>
<title>Time Series widget | CARTO</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<!-- Include Leaflet -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
<!-- Include CARTO.js -->
@ramiroaznar
ramiroaznar / app.js
Last active Jul 20, 2018
CARTO.js v4 Hack Autostyle
View app.js
const map = L.map('map').setView([30, 0], 3);
// add basemap
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
// add CARTO client
const client = new carto.Client({
apiKey: 'default_public',
@ramiroaznar
ramiroaznar / index.html
Created Jul 18, 2018
GR11 Vector Map | CARTO VL
View index.html
<!DOCTYPE html>
<html>
<head>
<title>GR11 Vector Map | CARTO VL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.5.3/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.45.0-carto1/mapbox-gl.js"></script>
@ramiroaznar
ramiroaznar / index.html
Created Jul 18, 2018
Click on button to open a Leaflet popup | CARTO.s v4.1
View index.html
<!DOCTYPE html>
<html>
<head>
<title>Click on button to open a Leaflet popup | CARTO.s v4.1</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<!-- Include jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Include Leaflet -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
@ramiroaznar
ramiroaznar / index.html
Created Jul 17, 2018
CARTO line styles | CARTO.s v4.1
View index.html
<!DOCTYPE html>
<html>
<head>
<title>CARTO line styles | CARTO.s v4.1</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<!-- Include Leaflet -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
<!-- Include CARTO.js -->
You can’t perform that action at this time.