Skip to content

Instantly share code, notes, and snippets.

View jsanz's full-sized avatar
🗺️
Mapping

Jorge Sanz jsanz

🗺️
Mapping
142 followers · 77 following
View GitHub Profile
@jsanz
jsanz / README.md
Last active August 29, 2015 14:21
D3 sample map from CartoDB SQL

This example generates a SVG graphic from a CartoDB SQL API request. The SVG is pasted on a text area so it can be used on any other editing software like Inskcape or Adobe Illustrator. The SQL generates some random data that emulates population information.

Check it. Use your mouse to pan and zoom, then copy the textarea contents into a new text file and open it with your browser or any SVG compatible software.

This example is heavily based on this one from Andrew Hill. More about D3 and CartoDB on this nice blog post.

@jsanz
jsanz / README.md
Last active August 29, 2015 14:22
CartoDB.js examples: minimal

Examples on using CartoDB.js.

Minimal example on calling a VizJSON

@jsanz
jsanz / README.md
Last active August 29, 2015 14:22
CartoDB.js examples: add layer

Examples on using CartoDB.js.

Adding a VizJSON to a Leaflet Map.

@jsanz
jsanz / README.md
Last active August 29, 2015 14:23
CartoDB.js: Education centers count

Add a layer that shows a bubble map of education centers. The point is calculated using simply the centroid of the grouped features.

SELECT 
  int4(row_number() OVER (ORDER BY pro)) AS cartodb_id,
  ST_Centroid(ST_Union(the_geom_webmercator)) AS the_geom_webmercator,
  count(*) as count,
  pro
FROM registro_centros_es
GROUP BY pro
@jsanz
jsanz / index.html
Created June 24, 2015 08:50
Basemap covering google maps
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo</title>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
@jsanz
jsanz / index.html
Last active August 29, 2015 14:23
CartoDB.js: when the url of a vizjson fails
<!DOCTYPE html>
<html>
<head>
<title>Mapas</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<style>
html {
height: 100%;
}
@jsanz
jsanz / index.html
Last active August 29, 2015 14:24
FOSS4G Odissey (WIP)
<!doctype><html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Odyssey.js Slides</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">
<link rel="icon" type="image/png" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">
@jsanz
jsanz / index.html
Created July 6, 2015 20:04
CartoDB.js Example: BiciMAD
<html>
<head>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#map { width: 100%; height:100%; background: black;}
#menu { position: absolute; top: 5px; right: 10px; width: 115px; height:60px; background: transparent; z-index:10;}
#menu a {
margin: 10px 5px 0 0;
float: right;
@jsanz
jsanz / index.html
Created July 10, 2015 18:52
Flickr album on Odissey
<!doctype><html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Odyssey.js Slides</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">
<link rel="icon" type="image/png" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">
@jsanz
jsanz / index.html
Last active August 29, 2015 14:27
CartoDB.JS: Error on IE9
<!DOCTYPE html>
<html>
<head>
<title>Named Map with Interactivity | CartoDB.js</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%;