Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Use your CartoDB table with Leaflet
JavaScript

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
dist
img
js
README.md
custompopup.html
index.html

README.md

What is the CartoDB library for Leaflet?

This library allows you to use your own CartoDB tables with Laeflet.

Creating an example

You will need to load these files to run the library:

Html(*):

<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
<script type="text/javascript" src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
<script type="text/javascript" src="wax.leaf.min-6.0.0-beta2.js"></script>
<script type="text/javascript" src="cartodb-leaflet-min.js"></script>
  • We strongly recommend to use the library files we have in this repository, they are fully tested.

Using the library

Using the library is really easy. It accepts the following parameters to manage the behavior of your CartoDB layers:

Parameter name Description Type Callback variables Required
map The Leaflet Map object. Object Yes
username Your CartoDB user name. String Yes
table_name Your CartoDB table name. String Yes
query A SQL query. String Yes
opacity If you want to change the opacity of the CartoDB layer. Number No
interactivity If you want to add interactivity to the layer without making requests. String (columns separated by commas) No
featureMouseOver A callback when hovers in a feature Function event: Mouse event object
latlng: The LatLng leaflet object where was clicked
data: The CartoDB data of the clicked feature with the `interactivity` param.
No (But only will work with `interactivity` specified)
featureMouseOut A callback when hovers out a feature Function No (But only will work with `interactivity` specified)
featureMouseClick A callback when clicks in a feature Function event: Mouse event object
latlng: The LatLng leaflet object where was clicked
data: The CartoDB data of the clicked feature with the `interactivity` param.
No (But only will work with `interactivity` specified)
tile_style If you want to add other style to the layer. String No
auto_bound If you want to zoom in the area where the layer is positioned. Boolean No
debug If you want to debug the library, set to true. Boolean No
tiler_protocol Tiler protocol (opcional - default = 'http'). No
tiler_domain Tiler domain (opcional - default = 'cartodb.com'). No
tiler_port Tiler port as a string (opcional - default = '80'). No
sql_protocol SQL API protocol (opcional - default = 'http'). String No
sql_domain SQL API domain (opcional - default = 'cartodb.com'). String No
sql_port SQL API port as a string (opcional - default = '80'). String No

Usage notes

If you want to get a feature clicked || hover data (via the interactivity parameter), the columns must be in a string separated by commas. If you don't want to write the name of the table several times, you can use {{table_name}} in the query or tile_style parameters. We strongly recommend the use of the files available in this repository. These are tested, and if you decide use updated ones, the library could not work.

Example

Here's a live example!

First of all add the necessary script and css files:

<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
<link  href="css/cartodb-leaflet.css" rel="stylesheet" type="text/css">
<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
<script type="text/javascript" src="js/wax.leaf.min-6.0.0-beta2.js"></script>
<script type="text/javascript" src="dist/cartodb-leaflet-min.js"></script>
<script type="text/javascript" src="dist/cartodb-popup.js"></script>

When the document is loaded, start creating the map:

var map = new L.Map('map');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
    cloudmadeAttrib = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
    cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});
map.addLayer(cloudmade);

When the document is loaded, start creating the map:

var cartodb_leaflet = new L.CartoDBLayer({
  map: map,
  user_name:'example',
  table_name: 'earthquakes',
  query: "SELECT * FROM {{table_name}}",
  tile_style: "#{{table_name}}{marker-fill:red}",
  interactivity: "cartodb_id, magnitude",
  featureMouseClick: function(ev, latlng, data) {alert(data)}
  auto_bound: true
});

And finally add it to the map:

map.addLayer(cartodb_leaflet);

Functions

New funcionalities are coming, in the meantime you can use:

  • removeLayer: Removes the cartodb layer from the map. Example: map.removeLayer(cartodb_leaflet);
  • hide: Hide the cartodb layer from the map. Example: cartodb_leaflet.hide();
  • show: Show again the cartodb layer in the map. Example: cartodb_leaflet.show();
  • setInteraction: Set the interaction of your layer to true or false. Example: cartodb_leaflet.setInteraction(false);
  • setOpacity: Change the opacity of the CartoDB layer. Example: cartodb_leaflet.setOpacity(0.3);
  • setQuery: Change the query parameter for the layer Example: cartodb_leaflet.setQuery("SELECT * FROM {{table_name}} WHERE cartodb_id > 10");
  • setStyle: Change the style of the layer tiles Example: cartodb_leaflet.setStyle("#{{table_name}}{marker-fill:blue}");
  • isVisible: Get the visibility of the layer Example: cartodb_leaflet.isVisible();
  • setInteractivity: Change the columns you want to get data (it needs to reload the tiles) Example: cartodb_leaflet.setInteractivity("cartodb_id, the_geom, magnitude");
  • setLayerOrder: Not available yet -> Waiting for this ticket fixed: https://github.com/CloudMade/Leaflet/issues/505
Something went wrong with that request. Please try again.