Calles Mundiales de Buenos Aires

Hace unos días tuve que anotar una dirección en la calle Brasil.

Para saber cómo llegar, la busqué en el mapa de Buenos Aires y allí caí en la cuenta que hay muchas calles de Buenos Aires que son países.

En mi trabajo diario uso mucho la API del mapa de Buenos Aires para distintos requerimientos. Aprovechando esto se me ocurrió hacer un experimento rápido, sólo por curiosidad.

Los nombres de los países podrían ser las calles, pero… ¿y las alturas? La respuesta no tardó en llegar, dado que estamos en año mundialista. 😀

Me propuse entonces, encontrar qué países tienen su dirección exacta en Buenos Aires, considerando sede + año de los mundiales hasta el 2014. Y de paso hacer algún ejemplo de uso de la API.

planetario

Con una rápida consulta a wikipedia, confeccioné un listado para tener como base:

[code language=”javascript”]
CallesMundiales.data = [
{anio:1930, sede:"Uruguay"},
{anio:1934, sede:"Italia"},
{anio:1938, sede:"Francia"},
{anio:1950, sede:"Brasil"},
{anio:1954, sede:"Suiza"},
{anio:1958, sede:"Suecia"},
{anio:1962, sede:"Chile"},
{anio:1966, sede:"Inglaterra"},
{anio:1970, sede:"México"},
{anio:1974, sede:"Alemania"},
{anio:1978, sede:"Argentina"},
{anio:1982, sede:"España"},
{anio:1986, sede:"México"},
{anio:1990, sede:"Italia"},
{anio:1994, sede:"Estados Unidos"},
{anio:1998, sede:"Francia"},
{anio:2002, sede:"Corea"},
{anio:2002, sede:"Japon"},
{anio:2006, sede:"Alemania"},
{anio:2010, sede:"Sudáfrica"},
{anio:2014, sede:"Brasil"}
];
[/code]

Dada la sede compartida en 2002 entre Corea y Japón, hice dos entradas para ese año.

Para el proyecto utilicé como primera opción el normalizador de direcciones de USIG:

[code language=”html”]
<script src="http://servicios.usig.buenosaires.gob.ar/nd-js/1.4/normalizadorDirecciones.min.js"
type="text/javascript"></script>
[/code]

[code language=”javascript”]
var n = usig.NormalizadorDirecciones.init();
try {
var opts = n.normalizar(input.value, 10);
} catch (error) {
// …
}
[/code]

Si la calle era correctamente Normalizada, obtengo sus coordenadas X e Y… (cabe destacar que la Ciudad utiliza un sistema de coordenadas diferente al que puede usar Google Maps, o los gps’s comerciales. ACÁ se explica como convertirlas)

[code language=”javascript”]
var url_geocoder =
‘http://ws.usig.buenosaires.gob.ar/geocoder/2.2/geocoding/?callback=?&’;
//…
$.getJSON(url_geocoder+’cod_calle=’+codigoCalle+’&altura=’+altura, function(d){
//…
});
[/code]

… y también los datos útiles de este lugar:

[code language=”javascript”]
var url_datos =
‘http://ws.usig.buenosaires.gob.ar/datos_utiles/?callback=?&’;
//…
$.getJSON(url_datos+’calle=’+calle+’&altura=’+altura, function(d){
//…
});
[/code]

Si el normalizador me indicaba que esa combinación calle/altura no existe, informo las opciones posibles que me ofrece la librería. Por ejemplo:

[code language=”javascript”]
Texto: Uruguay 1930

La altura indicada no es válida para la calle ingresada.
A continuación se muestran algunas opciones válidas halladas:
URUGUAY 1-400
URUGUAY 801-1400
URUGUAY AV. 401-800
[/code]

En cambio, si directamente no existe ninguna calle que se acerque al nombre de la sede, busco otros puntos que puedan estar relacionados.

[code language=”javascript”]
var url_otros =
‘http://epok.buenosaires.gob.ar/buscar/?callback=?&start=0&limit=5&tipo=ranking&totalFull=false&’;

$.getJSON(url_otros+’texto=’+e.sede, function(d){
//…
});
[/code]

Por ejemplo:

[code language=”javascript”]
Texto: Sudáfrica

Embajada de Sudáfrica – Embajada
Consulado de Sudáfrica – Consulado
[/code]

Para graficar los puntos encontrados, utilicé el mapa estático…
[code language=”html”]
<script src="http://servicios.usig.buenosaires.gob.ar/usig-js/3.0/usig.MapaEstatico.min.js" type="text/javascript"></script>
[/code]

[code language=”javascript”]
var img = usig.MapaEstatico({ x: 106983.5920869, y: 103687.499668, marcarPunto: true, width: 600 });
$(‘#div’).append(img);
[/code]

…y el mapa interactivo de USIG:

[code language=”html”]
<script src="http://servicios.usig.buenosaires.gov.ar/usig-js/3.0/usig.MapaInteractivo.min.js" type="text/javascript"></script>
[/code]

[code language=”javascript”]
var ac = new usig.MapaInteractivo(‘id-div-mapa’, {
onReady: function() {
///…
}
});
[/code]

Documentación completa de los servicios de USIG y demos.

Para manejar DOM, templating y data-binding utilicé jQuery + knockout.js.

Aproveché la oportunidad de este mini experimento, para probar el UI kit de Metro CSS basado en bootstrap. Está muy bien hecho y queda una interfaz limpia. El responsive es un poco raro a veces.

Pueden ver los resultados del experimento, ACÁ.

El código fuente está en GITHUB.