Mashups con Open Data Euskadi. Parte 2.

Este post es el segundo de una serie en que investigamos qué podemos hacer con los datos abiertos en nuestros sistemas de información geográfica.

Open Data (datos abiertos) persigue la publicación de datos gubernamentales bajo la idea de la transparencia y la gratuidad de los mismos. En Gobierno Vasco lanzó la iniciativa de Open Data Euskadi en 2009. Esto nos permite acceder a los catálogos de datos e integrarlos en nuestras aplicaciones. También podemos encontrar datos de carácter geográfico de Euskadi en GeoEuskadi.

Mapa estival

Con motivo del verano he decidido crear un mapa con los eventos culturales en Euskadi. Para ello utilizo el API de Kulturklik. Kulturklik es una inicativa del Gobierno Vasco:

Kulturklik, Espacio Interactivo de la Cultura Vasca, nace con el afán de ser una plataforma común, abierta y compartida con todos los actores de nuestra cultura, para la difusión y posible comercialización tanto de sus actividades como de aquellos contenidos de valor que se adecuen a los nuevos canales de interacción y comunicación. Con ese objetivo, buscará siempre que la cultura vasca, en todas sus manifestaciones y expresiones, se construya desde perspectivas dialógicas y abiertas y con el adecuado respeto tanto a los derechos de los creadores por su trabajo, como a las demandas de los ciudadanos.

Tecnologías utiliizadas:

• HTML
• Google Maps v3
• Javascript y jQuery
• jQuery UI
• AJAX

Funcionamiento:

He creado un mapa de Google Maps y controles con los que podemos seleccionar un día y el idioma  para geolocalizar eventos culturales en Euskadi. Por defecto, cargamos el mapa con todos los eventos del día de hoy en castellano. Estos se leen usando ajax. Cada vez que el usuario cambia el día o el idioma se recarga el mapa llamando a la funcion «LoadEvents». En este caso no elegimos un rango de fechas puesto que seleccionamos un día, pero la función acepta los parámetros de inicio y fin por separado.

function LoadEvents(start, end, lang) {
    if (infowindow != null) {
        infowindow.setMap(null);
    }

    var wsUrl = "http://www.kulturklik.euskadi.net/?api_call=events&from=" + start + "&to=" + end + "&lang=" + lang;
    $.ajax({
        type: 'GET',
        url: wsUrl,
        dataType: "jsonp",
        async: true,
        contentType: "application/json; charset=utf-8",
        success: GetLoadEventsSuccess,
        error: OnFailure
    });
}

Restricciones y condiciones del API:

• Hay un límite de 50 peticiones diarias por IP
• Los contenidos disponibles a través de la API están protegidos por la Licencia Creative Commons 3.0

Tanto el acceso a la web, como el uso que pueda hacerse de la información contenida en el mismo son de la exclusiva responsabilidad de quien lo realiza. La Administración de la CAE no responderá de ninguna consecuencia, daño o perjuicio que pudieran derivarse de dicho acceso o uso de información, con excepción de todas aquellas actuaciones que resulten de la aplicación de las disposiciones legales a las que deba someterse en el estricto ejercicio de sus competencias.
La Administración de la Comunidad Autónoma de Euskadi no asume responsabilidad alguna derivada de la conexión o contenidos de los enlaces de terceros a  os que se hace referencia en la web. La utilización no autorizada de la información contenida en esta web, así como los perjuicios y quebrantos ocasionados en los derechos de propiedad intelectual e industrial de la Administración de la Comunidad Autónoma de Euskadi dará lugar al ejercicio de las acciones que legalmente le correspondan a dicha Administración y en su caso, a las responsabilidades que de dicho ejercicio se deriven.

El código completo:

Html

<div id="mainDiv" style="width: 960px;">
<img src="http://www.kulturklik.euskadi.net/wp-content/uploads/2010/02/kulturklik.png" alt="" />
<table>
<tbody>
<tr>
<td style="background-color: #000000; color: #fff;"><input id="langRadioEu" onclick="LangChanged()" type="radio" name="langRadio" value="eu" />Euskara
 <input id="langRadioEs" onclick="LangChanged()" type="radio" name="langRadio" value="es" checked="checked" />Castellano
<div id="datepicker"></div>
<div style="vertical-align: bottom;">

<hr />

 <a href="http://opendata.euskadi.net" target="_blank"><img src="http://opendata.euskadi.net/images/w79-logo_opendata.gif" alt="" border="0" /></a>

 <a href="http://clevermaps.com" target="_blank"><img style="width: 250px;" src="http://clevermaps.s3.amazonaws.com/images/cleverMapsLogo.png" alt="" border="0/" /></a></div></td>
<td></td>
</tr>
</tbody>
</table>
</div>

Javascript

 var mapControl = null;
        var points = [];
        var infowindow = null;

        $(function () {
            $('#datepicker').datepicker({
                onSelect: function (dateText, inst) {
                    Reload();
                }
            });

            $("#datepicker").datepicker($.datepicker.regional['es']);
        });

        function LoadMap() {
            var latlng = new google.maps.LatLng(43.034768, -2.620239);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            mapControl = new google.maps.Map(document.getElementById("map"), myOptions);

            var today = $.datepicker.formatDate('yy-mm-dd', new Date());
            LoadEvents(today, today, 'es');
        }

        function LoadEvents(start, end, lang) {
            if (infowindow != null) {
                infowindow.setMap(null);
            }

            var wsUrl = "http://www.kulturklik.euskadi.net/?api_call=events&from=" + start + "&to=" + end + "&lang=" + lang;
            $.ajax({
                type: 'GET',
                url: wsUrl,
                dataType: "jsonp",
                async: true,
                contentType: "application/json; charset=utf-8",
                success: GetLoadEventsSuccess,
                error: OnFailure
            });
        }

        function GetLoadEventsSuccess(events) {
            //Eliminamos existents
            for (var i = 0; i < points.length; i++) {
                points[i].setMap(null);
            }

            //Cargamos eventos en mapa
            if (events != null) {
                var total = events.count;
                for (var i = 0; i < events.eventos.length; i++) {
                    AddEvent(events.eventos[i]);
                }
            }
        }

        function AddEvent(evt) {
            //Añadimos marcador al mapa
            var latlon = new google.maps.LatLng(evt.latitude, evt.longitude);
            var marker = new google.maps.Marker({
                map: mapControl,
                position: latlon,
                animation: google.maps.Animation.DROP,
                title: evt.evento_titulo.replace(/&quot;/g, "\"")
            });

            //Asignamos el evento click
            google.maps.event.addListener(marker, 'click', function () {
                ShowData(evt);
            });

            //Incluimos en array
            points.push(marker);
        }

        function ShowData(evt) {
            //Ocultamos el infowindow
            if (infowindow != null) {
                infowindow.setMap(null);
            }

            //Mostramos el infowidow con nuevos datos
            var latlon = new google.maps.LatLng(evt.latitude, evt.longitude);
            var content = "<div class='mapinfobox'><b>" + evt.evento_tipo + ":</b> " + evt.evento_titulo
                        + "<br/><br/><a target='_blank' href='" + evt.evento_url + "'> Ver Web </a></div>";
            infowindow = new google.maps.InfoWindow({
                content: content,
                position: latlon,
                disableAutoPan: true
            });

            infowindow.open(mapControl);
        }

        function OnFailure(error) {
            alert("ERROR: La restcción de 50 peticiones diarias se ha superado");
        }

        function LangChanged() {
            Reload();
        }

        function Reload() {
            var lang = $("input[name=langRadio]:radio:checked").val();
            var date = $.datepicker.formatDate('yy-mm-dd', $("#datepicker").datepicker('getDate'));
            LoadEvents(date, date, lang);
        }

Anuncio publicitario