Category Archives: webmapping

Curso GIS Cloud en UNIGIS


Por segundo año tutorizo el curso de GIS Cloud en el máster a distancia UNIGS. El curso se ofrece tanto como módulo para los alumnos del máster profesional en SIG como curso de especialización abierto a cualquiera que quiera profundizar en esta temática.

El curso se desarrolla entre el 14 de mayo y el 25 de junio y el período de inscripción acaba el 7 de mayo con un precio de 375 euros, bonificables a través de la Fundación Estatal para la Formación en el Empleo (anteriormente conocida como Fundación Tripartita).

El año pasado fue una experienca muy interesante. Como trabajador en remoto y además miembro de un equipo de soporte, la metodología didáctica de los cursos de UNIGS me resulta totalmente familiar. Desde sus casas o centros de trabajo los alumnos siguen los materiales a su ritmo y disponen de varios foros (en función del tipo de duda) para preguntar. Es muy interesante ver cómo poco a poco la gente se suelta y cómo acaban por ayudarse entre ellos. Para mí son unas semanas ajetreadas, de intentar resolver las dudas lo más rápido posible y a la vez dar la mejor información complementaria para que puedan aprender el máximo. A la vez algunos hasta descubren que se pueden incrustar gifs animados casi en cualquier lado 😄.

Personalmente creo que el curso me enriquece a mí tanto como a los alumnos, porque nada te da mejor perspectiva que el feedback que te devuelven aquellos que llegan por primera vez, con pocos prejuicios y diferenets backgrounds.

El temario es básicamente el mismo del año pasado con las inevitables actualizaciones de pantallas y pequeños detalles pero en general la estructura me parece muy balanceada para el tiempo del que disponen:

  • Una introducción genérica a qué son los servicios en la nube en general
  • Primera aproximación con Google Fusion Tables, un servicio ya veterano pero que sigue siendo muy válido para trabajar con datos sencillos
  • Luego seguimos con Mapbox, el mejor servicio (tanto entre los productos libres como privativos) para diseñar mapas vistosos y potencialmente complejos. Mapbox Studio es una herramienta que no te la acabas.
  • Acabamos con CARTO Builder, un completo SIG en la nube con el que hacer análisis y publicar cuadros de mando que van más allá de un simple mapa.
cloud5_20

Usando CARTO Builder para ver datos del servicio municipal de alquiler bicicletas de Barcelona

En realidad como en cualquier curso de este tipo, lo importante es aprender a valorar las herramientas, encontrar sus puntos fuertes y sus puntos débiles así como desarrollar las capacidades para criticar cualquier otro servicio al que los alumnos se enfrenten en el futuro. Como decía un excompañero de trabajo, es esto mismo lo que nos hace tecnólogos en lugar de simples operadores de un software concreto.

cloud4_8

Mapbox Studio es gloria bendita

Finalmente comentar que me encanta el flujo de trabajo que la gente del SIGTE lleva, usando para el control de la documentación repositorios git con tareas y pull requests asociadas y Sphinx para la edición de la documentación. Se nota que tienen mucha experiencia y saben lo que hacen.

2018-04-24_23:11:22-Selection

Poder escribir en restructuredText y mantener un control de cambios “sano” no se paga con dinero

Pues nada, eso es todo, que si lo que he contado te parece interesante y te apetece dedicar unas semanas de esta primavera a aprender más sobre los SIG en la nube, nos vemos en el Moodle de UNIGIS 😉.

Advertisements

Aggregating points: JSON on SQL and loops on infowindows


NOTE: I’ll use CARTO but you can apply all this to any webmapping technology backed by a modern database.

Get all the data

So we start with the typical use case where we have a one to many relationship like this:

    select e.cartodb_id,
           e.displayname,
           e.division,
           e.photourl,
           l.cartodb_id as locaction_id,
           l.location,
           l.the_geom_webmercator
      from locations l
inner join employees e
        on e.location = l.location
  order by location

Easy peasy, we have a map with many stacked points. From here you can jump to this excellent post by James Milner about dense point maps. My example is not about having thousands of scattered points that at certain zoom levels overlap. Mine is a small set of locations but many points “stacking” on them. In this case you can do two things: aggregate or not. When you aggregate you pay a prize for readability: reducing all your data to those locations and maybe using visual variables to show counts or averages or any other aggregated value and finally try to use the interactivity of your map to complete the picture.

So at this point we have something like this map, no aggregation yet, but using transparency we can see where CARTO has many employees. We could also use a composite operation instead of transparency to modify the color of the stacked points.

Stacking points using transparency

Stacking points using transparency

Aggregate and count

OK, let’s do a GROUP BY the geometry and an aggregation like counting. At least now we know how many people are there but that’s all, we loose the rest of the details.

    select l.the_geom_webmercator,
           min(e.cartodb_id) as cartodb_id,
           count(1) as counts
      from locations l
inner join employees e
        on e.location = l.location
  group by l.the_geom_webmercator
Grouping by location and counting

Grouping by location and counting

Aggregate one field

But in my case, with CARTO we have PostgreSQL at hand so we can do way more than that. PostgreSQL has many many cool features, handling JSON types is one of them. Mix that with the fact that almost all template systems for front-end applications allow you to iterate over JavaScript Objects and you have a winner here.

So we can combine the json_agg function with MustacheJS iteration over objects to allow rendering the names of our employees.

    select l.the_geom_webmercator,
           min(e.cartodb_id) as cartodb_id,
           l.location,
           json_agg(e.firstname) as names, -- JSON aggregation
           count(1) as counts
      from locations l
inner join employees e
        on e.location = l.location
  group by l.the_geom_webmercator,l.location

And this bit of HTML and Mustache template to create a list of employees we can add to the infowindow template:

<ul style="margin:1em;list-style-type: disc;max-height:10em;">
{{#names}}<li class="CDB-infowindow-title">{{.}}</li>{{/names}}
</ul>
{{^names}}loading...{{/names}}

List of employees on the infowindow

We could do this without JSON types, composing all the markup in the SQL statement but that’s generating quite a lot of content to move to the frontend and of course making the whole thing way harder to maintain.

Aggregate several fields

At this point we can repeat the same function for the rest of the fields but we need to iterate them separatedly. It’d be way better if we could create JSON objects with all the content we want to maintain in a single output field we could iterate on our infowindow. With PostgreSQL we can do this with the row_to_json function and nesting an inner double SELECT to give the properties names. We can use directly row_to_json(row(field1,field2,..)) but then our output fields would have generic names.

    select l.the_geom_webmercator,
           min(e.cartodb_id) as cartodb_id,
           l.location,           
           count(1) as counts,
           json_agg(row_to_json((
             SELECT r
               FROM (
                 SELECT photourl as photo,
                        coalesce(preferredname,firstname,'') as name
             ) r
           ),true)) as data
      from solutions.bamboo_locations l
inner join solutions.bamboo_employees e
        on e.location = l.location
  group by l.the_geom_webmercator,l.location
  order by counts asc

With this query now we have a data field with an array of objects with the display name and web address for the employee picture. Easy now to compose this in a simple infowindow where you can see the faces and names of my colleagues.

<div style="column-count:3;">
{{#data}}
<span style="display:inline-block;margin-bottom:5px;">
  <img style="height:35px;" src="{{photo}}"/> 
  <br/>
  <span style="font-size:0.55em;">{{name}}</span>
</span>
{{/data}}
</div>

{{^data}}
loading...
{{/data}}

Adding pictures and names

That’s it. You can do even more if you retrieve all the data directly from your database and render on the frontend, for example if you use D3 you probably can do fancy symbolizations and interactions.

One final note is that if you use UTF grids (like in these maps with CARTO) you need to be conservative with the amount of content you put on your interactivity because with medium and big datasets this can make your maps slow and too heavy for the front-end. On those cases you may want to change to an interactivity that works like WMS GetFeatureInfo workflow, where you retrieve the information directly from the backend when the user clicks on the map, instead of retrieving everything when loading your tiles.

Check the map below and how the interactions show the aggregated contents. What do you think of this technique? Any other procedure to display aggregated data that you think is more effective?