Skip to content

Instantly share code, notes, and snippets.

@javisantana
javisantana / index.html
Created January 8, 2014 08:33
hover features in leaflet
<!DOCTYPE html>
<html>
<head>
<title>Leaflet example | 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%;
@javisantana
javisantana / index.html
Last active December 31, 2015 04:09
cartodb.js with autocomplete
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote datasource</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.core.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
@javisantana
javisantana / index.html
Created November 29, 2013 08:18
custom infowindow example without vizjson
<!DOCTYPE html>
<html>
<head>
<title>Leaflet multilayer example | 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%;
<!DOCTYPE html>
<html>
<head>
<title>Custom infowindow example | 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%;
<!DOCTYPE html>
<html>
<head>
<title>Easy example | 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%;
@javisantana
javisantana / parse_osm.js
Last active December 27, 2015 08:59
quick'n'dirty conversor from OSM xml to GeoJSON using d3
// you should use https://github.com/tyrasd/osmtogeojson if you are gonna build something real
function osm2geojson(xml) {
var parser = new DOMParser();
var doc = parser.parseFromString(xml, 'text/xml');
var points = {}
d3.select(doc).selectAll('node').each(function() {
var n = d3.select(this)
@javisantana
javisantana / index.html
Created October 28, 2013 17:14
mapbox.js + cartodb.js
<!DOCTYPE html>
<html>
<head>
<title>Leaflet example | 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%;
@javisantana
javisantana / migration.md
Last active December 24, 2015 06:59
Migration to Leaflet 0.6

information for developers using cartodb.js

Today we will migrate to leaflet 0.6, so cartodb.js located at the default location (*) will include it.

If you have developed an application with cartodb.js using Leaflet you should check if your application is compatible with leaflet 0.6 (likely it is).if you find that your visualization is having issues after this update, use the cartodb.js available here 3.1.14 (located at http://libs.cartocdn.com/cartodb.js/v3/3.1.14/cartodb.js ) which includes leaflet 0.5

We are not going to maintain two cartodb.js versions so from today only leaflet 0.6 will be supported. That means that if we add new functionality to cartodb.js you will not be able to use it if you application is attached to cartodb.js 3.1.14

If you have any question let us know:

@javisantana
javisantana / index.html
Created September 25, 2013 07:20
infowindow with custom size
<!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 {
height: 100%;
padding: 0;
@javisantana
javisantana / index.html
Created September 9, 2013 09:02
interactivity for each sublayer
<!DOCTYPE html>
<html>
<head>
<title>Leaflet multilayer example | 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%;