Draw Cartodb layers on leaflet powered maps using CartoDB.js

CartoDb javascript is a javascript application used to visualize layers created using CartoDb editor  in a web map or application. An advantage of using CartoDb javascript is that it gives the GI analyst PostGIS and SQL capabilities on a web map i.e. when changes or queries are made on the database table in CartoDb Editor, these changes are also reflected on the map hosted in the web application.

Using CartoDb layers with Leaflet adds the additional functionality of LeafletJS. User can also perform and visualize the result of queries within the web map environment.

For this demonstration, we will use the createVis and createLayer functions in CartoDb Javascript library to load projects from CartoDb and draw them as vector layers on a web map.

For our example, we create the HTML page and insert in the links to the CSS and JS libraries for CartoDb.js.

http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css

http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js

We are also loading in tiles from Mapbox for base map.

See sample source code below:

cool-001

 Using createVIS

Next, we re-write the code to look like the one below. We added a var vizjson_url

as well as the createVis function. This will create the visualization of the

data hosted in our CartoDb account online. Insert it between the opening and closing

script tags.
function main () {
var  map = new L.map(‘map’, {
zoomControl: true,
center: [7, 3],
zoom: 3
});
var attr = ‘<a href=”https://mapsnigeriainitiative.wordpress.com”>MapsNI</a>,’+'<a href=”http://mapbox.com”>tiles by mapbox</a>’;
L.tileLayer(‘https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ’, {
attribution: attr
}).addTo(map);
var vizjson_url = ‘https://mayotunde.cartodb.com/api/v2/viz/cbb7fd66-7a70-11e5-98ab-0e5db1731f59/viz.json’;

cartodb.createVIS(map, vizjson_url).addTo(map)
.on(‘done’, function(layer) {
})
.on(‘error’,  function() {
cartodb.log.log(“some error occurred”);
});
}
window.onload = main;
Capture-7

 

See Live map by clicking :

http://htmlpreview.github.io/?https://github.com/mayotunde/geojsonpoints/blob/gh-pages/cartodbViz

 

Download plain text version of the source code by clicking:

https://www.dropbox.com/s/9p49ain2ruayspo/cartodb%20create%20viz%20in%20leaflet.txt?dl=0

 

Using createLayer option

We can also use the createLayer function which will make the data from CartoDb

to act as a layer feature, instead of just been a visualization.

Replace the code in the opening and closing script tags with the one below

to use a layer instead of a visualization.

 

function main () {
map = new L.map(‘map’, {
zoomControl: true,
center: [7, 3],
zoom: 3
});
var attr = ‘<a href=”https://mapsnigeriainitiative.wordpress.com”>MapsNI</a>,’+'<a href=”http://mapbox.com”>tiles by mapbox</a>’;
L.tileLayer(‘https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ’, {
attribution: attr
}).addTo(map);

var layerurl = ‘https://mayotunde.cartodb.com/api/v2/viz/cbb7fd66-7a70-11e5-98ab-0e5db1731f59/viz.json’;

cartodb.createLayer(map, layerurl).addTo(map)

.on(‘done’, function(layer) {
})
.on(‘error’, function() {
cartodb.log.log(“some error occurred”);
});
}

window.onload = main;
Capture-9

 

See live nap by clicking:

https://github.com/mayotunde/geojsonpoints/blob/gh-pages/simplecartodblayer

Download the plain text version of the source code by clicking:

https://www.dropbox.com/s/6kl7u5axldalyla/createlayer%20in%20cartodb%20leaflet.txt?dl=0

 

Thank you for following the blog.

Advertisements

One response to “Draw Cartodb layers on leaflet powered maps using CartoDB.js

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s