Use your CartoDB tables with a Leaflet map.
Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps. It is developed by CloudMade. It still has all the features most developers ever need for online maps, while providing a fast, pleasant user experience.
The code is available on Github. We encourage you to download the source files and not pointing them from GitHub. If you have any question there is a complete documentation or you can ask in the CartoDB mailing list.
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. Default: "SELECT * FROM {{table_name}}" | String | Yes | |
opacity | If you want to change the opacity of the CartoDB layer. Default: 1 | Number | No | |
interactivity | If you want to add interactivity to the layer without making requests. | String (columns separated by commas) | No | |
featureOver | A callback when hovers in a feature | Function |
event: Mouse event object latlng: The LatLng leaflet object where was clicked pos: Object with x and y position in the DOM map element data: The CartoDB data of the clicked feature with the `interactivity` param. |
No (But only will work with interactivity specified) |
featureOut | A callback when hovers out a feature | Function | No (But only will work with interactivity specified) | |
featureClick | A callback when clicks in a feature | Function |
event: Mouse event object latlng: The LatLng leaflet object where was clicked pos: Object with x and y position in the DOM map element data: The CartoDB data of the clicked feature with the `interactivity` param. |
No (But only will work with interactivity specified) |
attribution | Set the layer attribution. | String | No | |
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 | Protocol for the tiler URL. Default: "http" | String | No | |
tiler_domain | Base domain of the tiler URL. Default: "cartodb.com" | String | No | |
tiler_port | Port of the tiler URL. Default: "80" | String | 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 |
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.
First of all add the necessary script and css files:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" /> <!--[if IE]> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" /> <![endif]--> <link href="css/cartodb-leaflet.css" rel="stylesheet" type="text/css"> <script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script> <script type="text/javascript" src="https://raw.github.com/mapbox/wax/master/dist/wax.leaf.min.js"></script> <script type="text/javascript" src="https://raw.github.com/vizzuality/cartodb-leaflet/master/dist/cartodb-leaflet-min.js"></script>
When the document is loaded, start creating the map:
var map = new L.Map('map');
Then create the CartoDB layer:
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", featureClick: function(ev, latlng, pos, data) {alert(data)}, featureOut: function() {}, featureOver: function(ev, latlng, pos, data) {}, auto_bound: true });
And finally add it to the map:
map.addLayer(cartodb_leaflet);
New funcionalities are coming, in the meantime you can use:
removeLayer: Removes the cartodb layer from the map.
map.removeLayer(cartodb_leaflet);
hide: Hide the cartodb layer from the map.
cartodb_leaflet.hide();
show: Show again the cartodb layer in the map.
cartodb_leaflet.show();
setInteraction: Set the interaction of your layer to true or false.
cartodb_leaflet.setInteraction(false);
setAttribution: Set the layer attribution.
cartodb_leaflet.setAttribution("CartoDB");
setOpacity: Change the opacity of the CartoDB layer.
cartodb_leaflet.setOpacity(0.3);
setQuery: Change the query parameter for the layer.
cartodb_leaflet.setQuery("SELECT * FROM {{table_name}} WHERE cartodb_id > 10");
setStyle: Change the style of the layer tiles.
cartodb_leaflet.setStyle("#{{table_name}}{marker-fill:blue}");
isVisible: Get the visibility of the layer.
cartodb_leaflet.isVisible();
isAdded: Returns if the layer already belongs to the map.
cartodb_leaflet.isAdded();
setInteractivity: Change the columns you want to get data (it needs to reload the tiles).
cartodb_leaflet.setInteractivity("cartodb_id, the_geom, magnitude");
setBounds: Set bounds in the map using a new query or the default one.
cartodb_leaflet.setBounds(); || cartodb_leaflet.setBounds("SELECT * FROM {{table_name}} WHERE cartodb_id < 100");
setOptions: Change any parameter at the same time refreshing the tiles once.
cartodb_leaflet.setOptions({query: "SELECT * FROM {{table_name}} WHERE cartodb_id<100", interactivity: "cartodb_id,the_geom,magnitude"});
If you want to use the cartodb custom popup, you need to add the script in the html:
<script type="text/javascript" src="dist/cartodb-popup-min.js"></script>
Create the CartoDB popup:
var popup = new L.CartoDBPopup();
And then use as you want:
... featureClick: function(ev,latlng,pos,data) { // Set popup content // You can pass an Object, an Array or a String popup.setContent(data); // Set latlng popup.setLatLng(latlng); // Show it! map.openPopup(popup); }, ...
You can see an example using it here.
Visit our support area and get some help from the community.
Yes we have. Contact us for getting more information. We are quite friends of academics so, you will get a lot of benefits.
Need us to help you with your visualization or application? Does your organization have unique requirements that don’t quite fit our plans? Contact us.