Tag Archives: geoinquietos

Bicipaseo 21Sep

Mapping for the busy cartographer: today moving dots

This article describes how to make a quick map using some nice services we have at our hands. Nowadays almost everyone can create a maps using services like CartoDB, Mapbox, uMap or even Google My Maps. In this case I’ll show how I used the incredible flexibility of CartoDB to combine some Postgres/PostGIS SQL with CartoCSS to animate some dots on top of OSM cartography rendered by Mapbox.

This combination is really unique and convenient, other services only allow you to upload or draw some features and decide some static styling for them. But with this combination, using old SQL you can adapt your data for different uses, with CartoCSS the power of the Mapnik rendering library is available and finally, using the awesome Torque capabilities, animation can be added to our map.


The idea of this map is to represent a crowd of cyclists running along the future bike line by the interior ring of the city of Valencia. Tomorrow Sunday 21 September there will be a march to show the interest of city bikers for this line so my idea was to make people think about how the city look like with this (still imaginary) bike lane full of cyclists, instead of cars.

Data preparation

  1. Trace a line that represents the route
  2. Transform the line to EPSG:3857
  3. Make the line denser, placing points every 25 meters using the «Densify geometries given an interval» QGIS processing tool
  4. Convert the line to points (again with Processing) and give them these properties:
    • route it will serve to produce more routes in the future
    • lap to separate the points of the route of other points of interest outside the route
    • id to order the rendering of the points


After uploading the dataset to my CartoDB account I’ve created a new visualization that will have these layers:

  1. A blurred line with the route
  2. A point marking the meeting place to start the activity, just in front of the city hall.
  3. The animated points moving over the route


Load the layer paseo and customise the SQL. The SQL is quite self-explanatory, first we filter the points over the line and then we use the ST_MakeLine aggregated function to rebuild our original line.

WITH route AS (
  FROM paseo
  WHERE route = 1 AND lap>0
  ORDER BY id)
  1 cartodb_id,
  ST_MakeLine(the_geom_webmercator) as the_geom_webmercator
FROM route

The styling of this layer is a simple CartoCSS rule with the only trick of a heavy blur filter.

    line-color: #A53ED5;
    line-width: 8;
    line-opacity: 0.7;
    line-comp-op: lighten;
    image-filters: agg-stack-blur(10,10);

Moving dots

This is the most important part of the map, of course. I have a path of points ordered and what I want is to show a more or less crowded ring of people moving. To do it, I’ve created a UNION of ten SELECTs to the table offsetting the id over the full range of id’s. To acieve that I’ve used this long SQL:

WITH route AS (
    SELECT * FROM paseo WHERE lap>0 AND route = 1
laps AS (
        cartodb_id, the_geom_webmercator,
    FROM route r1
        cartodb_id, the_geom_webmercator,
        CASE WHEN id  > 25 THEN id - 25 ELSE id - 25 + 254 END id
    FROM route r2
        cartodb_id, the_geom_webmercator,
        CASE WHEN id  > 50 THEN id - 50 ELSE id - 50 + 254 END id
    FROM route r3
        cartodb_id, the_geom_webmercator,
        CASE WHEN id  > 75 THEN id - 75 ELSE id - 75 + 254 END id
    FROM route r4
        cartodb_id, the_geom_webmercator,
        CASE WHEN id  > 100 THEN id - 100 ELSE id - 100 + 254 END id
    FROM route r5
        cartodb_id, the_geom_webmercator,
        CASE WHEN id  > 125 THEN id - 125 ELSE id - 125 + 254 END id
    FROM route r6
        cartodb_id, the_geom_webmercator,
        CASE WHEN id  > 150 THEN id - 150 ELSE id - 150 + 254 END id
    FROM route r7
        cartodb_id, the_geom_webmercator,
        CASE WHEN id  > 175 THEN id - 175 ELSE id - 175 + 254 END id
    FROM route r8
        cartodb_id, the_geom_webmercator,
        CASE WHEN id  > 200 THEN id - 200 ELSE id - 200 + 254 END id
    FROM route r9
        cartodb_id, the_geom_webmercator,
        CASE WHEN id  > 225 THEN id - 225 ELSE id - 225 + 254 END id
    FROM route r10
    cartodb_id, the_geom_webmercator,
    ((random()*10-10) + id) id
FROM laps

The first with subquery filters the points of the path for this route that feed the next subquery: 10 unions with an id offset separation of 25 points. This subquery is passed to the main query that finally randomizes the id by +-5 positions, that is the order, so the moving dots are not regular, giving a more interesting (anarchic?) effect.

Using the wizard, the main aspects of the Torque animation are set up. It’s important to use a proper resolution, duration and frame count to adjust the rendering to a nice motion. Afterwards some last touches to the CSS to adjust the compositing operation and specially the trails, leaving just one more rendering of a similar point, instead of the default bigger and more transparent feature.

Map {

  comp-op: minus;
  marker-fill-opacity: 1;
  marker-line-color: #FFFFFF;
  marker-line-width: 0.5;
  marker-line-opacity: 1;
  marker-type: ellipse;
  marker-width: 6;
  marker-fill: #41006D;
#paseo[frame-offset=2] {

Meeting point

To add a feature to the map to render the meeting point, I manually added a new feature to the layer using the CartoDB editor. This feature will have the property lap=0 so it won’t be on the other layers. The SQL for this layer is just a

SELECT * FROM paseo WHERE route = 1 and lap = 0

And the CartoCSS is quite simple with the only important trick to use an external SVG. I’ve used directly the town-hall marker from the Mapbox Maki repository.

  marker-fill-opacity: 0.9;
  marker-line-color: #FFF;
  marker-line-width: 1.5;
  marker-line-opacity: 1;
  marker-placement: point;
  marker-type: ellipse;
  marker-width: 40;
  marker-fill: #3B007F;
  marker-allow-overlap: true;

  marker-file: url(https://raw.githubusercontent.com/mapbox/maki/mb-pages/src/town-hall-24.svg);

Fixed info window

On this layer I’ve also configured an infowindow so when you click on the town hall icon you get some data about the schedule for the event.

Base map

I started using the Nokia day grey base map offered by CartoDB, but after a couple of iterations on the design, I thought it could be great to use a pale purple base map so I went to Mapbox web and quickly crafted a variation of their Mapbox Streets base layer.

Other components

Finally, using the new nice CartoDB layout capabilities I’ve added a simple title for the mobile version of the rendering and a couple of texts and an image (uploaded to imgur) for the logo of the group promoting this activity.


Well that’s all. You can check the visualization here. The job took like 4 to 5 hours. I finished the first animated version in 2/3 hours but you know, devil is in details and designing is always about iterations and refinement. Anyway I’m quite satisfied on the result and I think it serves for its purpose. Definitely I’ll have the opportunity to review and refine this process, as I imagine more routes and bike marches will happen in Valencia where bikers are winning the battle 🙂

What do you think about this visualization. What do you like and what do you hate? Improvements? I’d love to hear your thoughts and comments to make better maps.

Update: almost same effect without crazy UNION

This morning Pedro-Juan asked my, why so many UNIONs? why not using just one long CASE?. After accepting the challenge I did something with CASEs but then realized that I wast just looping over a smaller set of id values, so I could use the modulo function. So the long UNION SQL could be reduced to this easy and simple SQL:

    cartodb_id, the_geom_webmercator, 
    ((random()*10-10) + id%3) id
FROM paseo WHERE lap>0 AND route = 1

Wow, that’s so concise compared with the huge SQL above!! Using this id%3 I forced all the values to be just 1,2,3 but with the afterwards random the moving effect is achieved.

The CartoCSS would need also some changes to allow to “fill” the rendering over all the animation time. Check the differences with the above code, specially the number of offsets added:

Map {

  comp-op: minus;
  marker-fill-opacity: 1;
  marker-line-color: #FFFFFF;
  marker-line-width: 0.5;
  marker-line-opacity: 1;
  marker-type: ellipse;
  marker-width: 6;
  marker-fill: #41006D;
#paseo[frame-offset=4] {}
#paseo[frame-offset=8] {}
#paseo[frame-offset=12] {}
#paseo[frame-offset=14] {}
#paseo[frame-offset=16] {}
#paseo[frame-offset=18] {}
#paseo[frame-offset=20] {}
#paseo[frame-offset=22] {}

The resultant visualization can be accessed here. Which one do you like more? Do you think it’s worth the simplicity over the (in my opinion) slightly worse effect?

Ideas sobre geoinquietos

Me llega esta tarde este correo desde el formulario de contacto de geoinquietos.org que creo que vale la pena compartir por aquí por aquello de rentabilizar los ladrillos que mando. La idea es dar unas pinceladas sobre qué es geoinquietos, cómo se puede arrancar un grupo local, en fin, mover un poco el asunto. Estoy muy contento de ser parte de un ¿movimiento? que está consiguiendo fomentar las tecnologías de la información geográfica, la geomática, la cartografía colaborativa, los datos libres y tantos otros temas interesantes. Bueno, ahí va.

> Hola, estamos intentado organizar geoinquietos en XXXXX, ¿alguna
> recomendación?
> Saludos

Hola YYYYYY, hace mucho que no coincidimos en ningún sarao!

Mira yo lo que haría es buscar un foro en el que contactar con gente afín, el que sea. Puedes usar la lista de OSGeo Spanish para coordinar lo que haga falta y si al final tenéis mucha actividad pues ya os pedimos una lista de correo si queréis a OSGeo.

En realidad lo más importante es que quedéis aunque sea a tomar algo y planteéis qué tipo de actividades os apetecen más. No hay recetas, no hay guías, cada uno va a su aire y busca la forma de “enganchar” a la gente con las armas que tiene.

Esta charla de Micho está en gallego pero se entiende bastante bien, cuenta algunas cosas que igual os dan una idea.


En Valencia llevamos medio año quedando una vez al mes (el segundo viernes) y hemos hecho básicamente charlas con debate. La última fue con invitados, las anteriores por los sospechosos habituales, la próxima será un taller; en fin vamos variando y evolucionando sobre la marcha así que realmente uno no sabe muy bien qué será de esto en un año, la gente tiene ganas y si hay dos o tres personas que empujen tranquilamente hay fuerza para mover algo y luego la gente se puede ir sumando. Da trabajo pero en fin, la gente se lo está pasando bien así que no hay plan de dejarlo más bien al contrario, en mi opinión tiene aún mucho recorrido y hay mucho potencial, contactos que hacer, líneas a explorar… en fin hay muchas ideas en la recámara.

Oye me ha quedado un correo que lo voy a repostear en el blog 😛

Cualquier cosa nos preguntas aquí o por las listas de correo. Cierto es que no hay una lista de correo genérica de Geoinquietos y que estamos usando la de OSGeo Spanish para esto (y a mí me parece bien) así que tú mismo.

Venga seguimos en contacto.

Preparando la cuarta reunión de Geoinquietos Valencia

Parece mentira, con lo que nos ha costado arrancar la iniciativa Geoinquietos en Valencia, la inercia que está ganando. Ciertamente nos ha costado unos cuantos meses, quedando algún jueves que otro a tomar unas cervezas unos cuantos amigos, muchas discusiones sobre cómo arrancar el grupo, qué hacer, cómo organizarlo… pero al final se han juntado dos factores catalizadores del asunto: por un lado la llegada de dos geoinquietos madrileños, Roberto e Iván y por otro que la gente de la escuela de Cartografía de la UPV muy amablemente nos hayan cedido el espacio y lo que es mejor, se han subido al carro de los geoinquietos (lo que por otro lado me hace albergar todavía alguna esperanza para la universidad, aunque de eso ya hablaremos en otro artículo).

Martes, 29/11/11

Roberto e Iván se nos han vuelto a la meseta pero el empujón que le han dado a la iniciativa en Valencia es más que apreciado porque con su ayuda y el esfuerzo de un pequeño pero muy activo grupo hemos conseguido, creo, fijar una dinámica excelente: tenemos un día fijo al mes (el segundo viernes), un par de recursos que nos ayudan a coordinar las reuniones, una cuenta en twitter @geoinquietosvlc, una lista de temas bien nutrida, una lista de correo para discutir y como comentaba, un espacio casi excelente, diría que solo le falta un buen tirador de cerveza, aunque va a ser complicado verlo instalado en un laboratorio universitario de momento.

Miquel @meamoraga nos cuenta el estado del arte en SIG para carreteras

Bien, en la última reunión de febrero salimos de la misma ya con la agenda decidida para la siguiente reunión: ¿se puede pedir más?. La primera parte de la reunión tratará sobre el proyecto OpenStreetMap y la llevaremos Perico y un servidor. La segunda parte la llevará el profesor José Carlos Martínez y tratará sobre las novedades de PostGIS 2 y de PostgreSQL 9. Creo que esta sesión puede ser de interés para un público bastante amplio así que espero ver muchas caras nuevas el próximo 9 de marzo en la UPV. Si estás interesado en conocernos no dudes en apuntarte y pasarte por la reunión así como suscribirte a la lista de correo ¡y presentarte!

Por si alguno lo está pensando, de momento no hemos considerado grabar o hacer streaming de las reuniones aunque si alguno de los geoinquietos se anima a traer un algún equipo de grabación de vídeo/audio por supuesto es más que bienvenido.

Geo-Inquietos en Madrid

Micho ha enviado un correo a las listas convocando a los geoinquietos que hay por Madrid a una reunión, pego su mensaje, seguro que la iniciativa es todo un éxito.

¿Para cuándo una en Valencia?


aprovechando que este año se van a celebrar dos de los eventos mas importantes del software libre, FOSS4G2010[1] y State of the Map[2], se están realizando reuniones informales a lo largo del territorio con la intención de crear y afianzar las comunidades de personas interesadas en todo lo relacionado con temas SIG, GEO…
Son eventos informales donde los asistentes proponen los temas a tratar. Se pueden hacer presentaciones de desarrollos, experiencias, problemas, dudas, generar debates, etc
Hay un wiki donde se gestiona el evento [3] los interesados podéis editar directamente y apuntaros para ir organizando la reunión. Gracias a la colaboración del Laboratorio LatinGeo [4] de la UPM, el evento se realizará en un aula de la ETSI de Topografía, Geodesía y Cartografía el viernes 7 de mayo a partir de las 17:00 horas.

Agradeceriamos que por una mera cuestión organizativa os apuntaseis en el wiki y si queréis podéis indicar también la temática sobre la que estais interesados. Podeis preparar algo para la ocasión. Dispondremos de un proyector para hacer alguna presentación.

Animaos, y… ¡difundid este mensaje!

Saludos y gracias

[1] http://2010.foss4g.org
[2] http://stateofthemap.org/
[3] http://www.doowikis.com/m/tPYFnf11gf
[4] http://www.latingeo.net

Analista Programador SIG
GNU/Linux Counter 462666