Skip to content

Instantly share code, notes, and snippets.

@oriolbx
oriolbx / index.html
Created February 11, 2020 08:35
CARTO.js v4: Change zoom level when click on geometry
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<!-- Include Carto.js -->
<script src="https://libs.cartocdn.com/carto.js/v4.2.0/carto.min.js"></script>
<!-- Include Leaflet -->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
@oriolbx
oriolbx / app.py
Created June 3, 2019 09:14
Flask middleware to add api key on backend
from flask import Flask, request
import requests
app = Flask(__name__)
base_url = 'https://username.carto.com/api/v2/sql'
api_key = 'XXXXX'
# just return request.params
@app.route('/sql', methods=['GET', 'POST'])
@oriolbx
oriolbx / index.html
Last active April 12, 2019 09:28
CARTOVL: Hide/show layer depending on zoom level
<!DOCTYPE html>
<html>
<head>
<title>Add multiple layers | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<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>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
@oriolbx
oriolbx / index.html
Last active April 5, 2019 10:25
CARTO VL: Open popup from clicking barchart
<!DOCTYPE html>
<html>
<head>
<title>Category chart | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
@oriolbx
oriolbx / index.html
Created February 5, 2019 11:20
open popup from dropdown menu
<!DOCTYPE html>
<html>
<head>
<title>Pop-ups opened programmatically | CARTO</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">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<!-- Include Leaflet -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
@oriolbx
oriolbx / index.html
Last active October 16, 2018 15:06
CARTO.js v4: Change zoom level based on dropdown menu
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
html,
body,
@oriolbx
oriolbx / index.html
Created July 2, 2018 08:46
CARTO.js v4: Wrap carto layer
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
html,body,#map {
width: 100%;
height: 100%;
@oriolbx
oriolbx / index.html
Last active July 1, 2018 09:48
CARTO.js v4: Add geometries from map to dataset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carto.js Guide</title>
<!-- Include Leaflet 1.2.0 Library -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.13/leaflet.draw.css" />
@oriolbx
oriolbx / index.html
Last active June 13, 2018 07:06
CARTO.js v4: Category widget
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<!-- Include Carto.js -->
<script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.2/carto.min.js"></script>
<!-- Include Leaflet -->
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
@oriolbx
oriolbx / index.html
Created May 8, 2018 12:39
CARTO.js v4: Tile aggregation cluster of points
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0" />
<meta charset="utf-8" />
<!-- Include Carto.js -->
<script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.2/carto.min.js"></script>
<!-- Include Leaflet -->
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>