jsanz

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

This example is based on Jorge Arévalo example but using CartoDB.js entirely to interact with the Maps API.

jsanz

Examples on using CartoDB.js.

Minimal example on calling a VizJSON

jsanz

Examples on using CartoDB.js.

Adding a VizJSON to a Leaflet Map.

jsanz

Examples on using CartoDB.js.

Create a new layer based on a custom SQL and CSS

jsanz

On this map we create two CartodB layers, one of them is built with two sublayers. In order to control when they are added to the map, we save the promises objects and use the jQuery.when function to execute the code to add the layers to the map when both promises are executed.

jsanz

This example shows how to create a Leaflet map with a basemap and an empty CartoDB.js layer. Once the layer is created a function is attached the event of the layers selector checkboxes so on any state change, the sublayers are removed and recreated according to the user selection.

jsanz

This example loads a CartoDB layer using a crazy SQL from a small variation of this awesome Stack Overflow response. Note the use of CSS style tags for the CartoCSS to allow easy editing.

The uncompressed (and not perfect!) version of the SQL to draw the Voronoi diagram is:

WITH 
    Sample AS (
      SELECT st_setsrid(st_union(the_geom),0) as geom 
      FROM registro_centros_nz WHERE spanish = 1
    ),

jsanz

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

On this example I pass a vizjson object that defines a leaflet map with a layer, legend, tooltip and infowindows.