Los programadores más influyentes de Github en un mapa con Leaflet

Hace tiempo que había visto esta lista con los programadores más influyentes de Github (o lo más activos, los que más contribuciones hacen, …). Hoy se me ha ocurrido hacer una pequeña visualización con esos datos, Leaflet y un poco de Javascript.

Si quieres saber cómo he llegado de esta lista a este mapa, sigue leyendo 🙂

¿Qué librerías Javascript he utilizado para el mapa?

Aunque no soy muy fan de Leaflet he decidido utilizarlo para este pet project. Normalmente utilizo OpenLayers en mi trabajo, pero la verdad que para este tipo de proyectos rápidos con Leaflet soy mucho más productivo.

La configuración del mapa Leaflet consiste en:

• Una capa base de Mapbox
• La librería MarkerCluster de Leaflet
• El plugin HeatMap de Leaflet

Para poder marranear un poco el DOM utilizo jQuery

¿Cómo geocodificar los datos de programadores más influyentes de Github?

En la lista con los programadores más influyentes de Github, una de las columnas indica la ciudad en la que vive el programador en cuestión. Así que, he programado una función Javascript muy sencilla para recorrer la tabla de programadores, obtener la columna con la ciudad y geocodificarla para obtener unas coordenadas que me permitieran añadirlos al mapa.

Para hacer la geocodificación he utilizado la instancia que tenemos en Prodevelop de POIProxy. El servicio que utilizo para geocodificar es la instancia de Nominatim de OSM que tiene MapQuest.

Lo bueno de POIProxy es que siempre devuelve GeoJSON, así que añadir las posiciones al mapa es automático.

Enséñame el código

El código (no llega a 100 líneas) está disponible en este repositorio de Github. Además, he publicado el mapa como una aplicación web desde Github utilizando la rama gh-pages y lo puedes ver aquí.

Respecto al código, hay dos versiones, una dinámica en el index.html y una estática con todas las posiciones pre-generadas en cont.html.

A todo esto, el resultado final es este mapa :). Si te acercas puedes hacer clic en los markers y ver estadísticas básicas del programador en Github.

Haz clic en la imagen para ver el mapa en pantalla completa: