Integrando OpenHeatMap en el Bazar Garum

EnglishFrenchGermanItalianPortugueseRussianSpanish

ACTUALIZACIÓN: Acabo de descubrir que Pete Warden es uno de los chicos que han levantado el escándalo del iPhone Tracker 😉

Ayer me encontré sin querer con una de esas joyas que genera el software libre: OpenHeatMap de Pete Warden.

Pete Warden es un auténtico crack. No solo por lo fácil que hace publicar datos, solo tenéis que ver los vídeos en los que cuenta como funciona OpenHeatMap para descubrir que además no se puede ser más abierto y humilde como persona.

La idea de OpenHeatMap es que creas un csv o una hoja de cálculo en google con la información que quieres representar geolocalizada, configuras como quieres el mapa y ya está. Pete ha creado un par de vídeos para explicarlo:

Este que es general para todo el mundo:

 

Y este otro más dirigido a periodistas:

 

Puede que exista una forma igual de sencilla para hacerlo con google maps, pero ¿quien no está hasta las narices de Google?

Además usa Openstreetmaps que desde siempre me han caído mucho mejor y están en la linea que tiene futuro: información abierta y libre para todo el mundo.

En modo server  va como la seda pero para incluirlo en tu proyecto, en mi caso en el bazar garum, he tenido que pelearme un poco. Estos son los pasos que he realizado:

* Meter lo includes necesarios:

OpenHeatMap requiere jquery y esto ya lo tengo incluido en Bazar.

<%= javascript_include_tag(“jquery.openheatmap.js”) %>

Me lo he bajado en local que no es cuestión de que Pete pague de más a Amazon por el almacenamiento.

* LLamar a OpenHeatMap

Esto es todo lo que se necesita:

<div id=”mapa-paises-container”></div>

<script type=’text/javascript’>

$(document).ready(function(){

// tamaño del mapa y tipo de render.

// no prefiero flash, pero html5 canvas no termina de ir bien todavía

$(‘#mapa-paises-container’).insertOpenHeatMap({

width: 800,  height: 500, prefer: ‘flash’

});

});

function onMapCreated() {

var map = $.getOpenHeatMap();

csv = ‘<%= Pais.paisestocsv -%>’;

map.loadWaysFromFile(‘http://static.openheatmap.com/world_countries.osm’);

map.loadValuesFromCSVString(csv);

map.setSetting(‘gradient_value_min’, 0);

map.setSetting(‘gradient_value_max’, 10);

map.setColorGradient([‘#ffbdf7a0’, ‘#ffff0000’]);

}

</script>

El método de rails que me devuelve las empresas que hay en cada país es muy sencillo:


def self.paisestocsv
csv = "country_code,value\\n"
max = Pais.count_by_sql("select max(total_empresas_mercado) from paises")
for pais in Pais.where ('total_empresas_mercado > 0')
csv += "#{pais.cod3},#{(pais.total_empresas_mercado*10)/max}\\n"
end
return csv
end

Como veis simplemente selecciono los países que tienen empresas y monto un string en formato CSV que luego uso en los scripts de OpenHeatMap. Con el código iso de país de 2 dígitos no funciona o no lo he conseguido yo. Pero echando mano de geonames lo he incluido en la tabla de países. En el modo servidor si subes un CSV con códigos de 2 dígitos funciona perfectamente. Si alguien se anima a corregirlo, seguro que Pete se alegra mucho.

He normalizado los valores del número de empresas para siempre devuelva valores entre 0 y 10 para poder ajustar mejor los gradientes pero no estoy seguro de que haga falta realmente.

El resultado ya integrado con Bazar Garum se puede ver en la página de datos de Bazar. En un par de semanas tendremos los nuevos bazares en funcionamiento y poco a poco se ira llenando el mapa.

 

 

 

 

 

 

 

 

 

 

 

Social Share Counters

Leave a Comment