Skip to content

Instantly share code, notes, and snippets.

View ramiroaznar's full-sized avatar

Ramiro Aznar ramiroaznar

109 followers · 10 following
View GitHub Profile
@ramiroaznar
ramiroaznar / index.html
Last active July 10, 2018 15:36
Dynamic legends with CARTO.js v4
<!DOCTYPE html>
<html>
<head>
<title>Dynamic legends with CARTO.js 4</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
<!-- leaflet, jquery & axios-->
@ramiroaznar
ramiroaznar / index.html
Created December 27, 2017 23:31
Change style and get metadata with CARTO.js 4
<!DOCTYPE html>
<html>
<head>
<title>Change style and get metadata with CARTO.js 4</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:300,400,600" rel="stylesheet">
<!-- leaflet + jquery -->
@ramiroaznar
ramiroaznar / index.html
Created December 21, 2017 09:17
Hexbin layer | CARTO.js 4
<!DOCTYPE html>
<html>
<head>
<title>Hexbin layer | CARTO.js 4</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet">
<!-- Include CARTO.js -->
<script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.0-beta.4/carto.min.js"></script>
@ramiroaznar
ramiroaznar / app.css
Last active July 20, 2018 08:08
CARTO.js GoT Distance Calculator
html, body {
margin: 0;
padding: 0;
font-family: 'MedievalSharp', sans-serif;
}
.title {
margin: 10px 0;
font-weight: bold;
font-size: 36px;
text-align: center;
@ramiroaznar
ramiroaznar / index.html
Last active October 19, 2019 07:37
leaflet.draw + CARTO
<!DOCTYPE html>
<html>
<head>
<title>leaflet.draw + CARTO</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
@ramiroaznar
ramiroaznar / index.html
Last active October 28, 2017 19:14
Enabling dragging to a CARTO map
<!DOCTYPE html>
<html>
<head>
<title>Enabling dragging to a CARTO map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
@ramiroaznar
ramiroaznar / style.css
Created October 11, 2017 14:17
New Generic CartoCSS
#layer['mapnik::geometry_type'=1] {
marker-width: 7;
marker-fill: #EE4D5A;
marker-fill-opacity: 0.9;
marker-line-color: #FFFFFF;
marker-line-width: 1;
marker-line-opacity: 1;
marker-type: ellipse;
marker-allow-overlap: true;
}
@ramiroaznar
ramiroaznar / index.html
Created October 6, 2017 13:35
CARTO.js | Get bbox from selected feature + zoom
<!DOCTYPE html>
<html>
<head>
<title>CARTO.js | Get bbox from selected feature + zoom</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
@ramiroaznar
ramiroaznar / query.sql
Created October 4, 2017 14:48
Routing with CARTO functions
WITH
origin as (
SELECT cartodb_id, name, the_geom FROM populated_places WHERE name ilike 'madrid'
),
destiny as (
SELECT cartodb_id, name, the_geom FROM populated_places WHERE adm0name ilike 'spain'
)
SELECT destiny.cartodb_id, origin.name || '-' || destiny.name as route, r.shape as the_geom, r.length, r.duration/60 as minutes
FROM origin, destiny, cdb_route_point_to_point(origin.the_geom, destiny.the_geom, 'car') r
WHERE origin.cartodb_id <> destiny.cartodb_id
@ramiroaznar
ramiroaznar / index.html
Created September 26, 2017 11:15
CARTO.js | close sublayer popups when opening other different sublayer popup
<!DOCTYPE html>
<html>
<head>
<title>CARTO.js | close popup when opening another</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>