Mashups con Open Data Euskadi. Parte 2. (OpenStreetMap)

Tras recibir un comentario de  @verlaciudad en el post “Mashups con Open Data Euskadi. Parte 2.”, he decidido hacerlo también con OpenStreetMap.

Demo

Podéis ver el mapa y probarlo:

Aquí os dejo el código.

En sí es lo mismo, la recogida de datos Kultuklik o el HTML no cambian, sólo las líneas de código relativas a la carga del mapa, muestra de eventos y apretura de popups.

HTML (sin cambios)

</pre>
<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>
<pre>

Javascript

var mapControl = null;
var points = null;
var popup = null;

$(function () {
	$('#datepicker').datepicker({
		onSelect: function (dateText, inst) {
			Reload();
		}
	});
	$("#datepicker").datepicker($.datepicker.regional['es']);
});

function LoadMap() {
	mapControl = new OpenLayers.Map("map");
	mapControl.addLayer(new OpenLayers.Layer.OSM());

	var lonLat = new OpenLayers.LonLat(-2.620239, 43.034768)
		  .transform(
			new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
			mapControl.getProjectionObject() // to Spherical Mercator Projection
		  );

	var zoom = 8;
	mapControl.setCenter(lonLat, zoom);

	points = new OpenLayers.Layer.Markers("Eventos");
	mapControl.addLayer(points);

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

function LoadEvents(start, end, lang) {
	if (mapControl.popups.length > 0) {
		mapControl.removePopup(mapControl.popups[0]);
	}

	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) {
	points.clearMarkers();
	//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) {              	//Obtener posicion              	var lonLat = new OpenLayers.LonLat(evt.longitude, evt.latitude)                    		.transform(                      		new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984                      		mapControl.getProjectionObject() // to Spherical Mercator Projection                    	);              	//Crear pin              	var marker = new OpenLayers.Marker(lonLat);                          	//var markerClick              	marker.events.register("mousedown", marker, function () {                  		ShowData(evt);              	});              	//Añadir al mapa              	points.addMarker(marker);          }          function ShowData(evt) {              	//Eliminar previos              	if (mapControl.popups.length > 0) {
		mapControl.removePopup(mapControl.popups[0]);
	}

	//Obtener posicion
	var lonLat = new OpenLayers.LonLat(evt.longitude, evt.latitude)
		  .transform(
			new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
			mapControl.getProjectionObject() // to Spherical Mercator Projection
		  );

	//Establecer datos popup
	var popup = new OpenLayers.Popup.FramedCloud("Popup",
			lonLat, null,
			"</pre>
<div class="mapinfobox"><strong>" + evt.evento_tipo + ":</strong> " + evt.evento_titulo + "<a href="&quot; + evt.evento_url + &quot;" target="_blank"> Ver Web </a></div>
<pre>
", null,
			true
		);

	//Mostrar
	mapControl.addPopup(popup);
	popup.show();
	OpenLayers.Event.stop(evt);
}

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);
}
Anuncios
  1. #1 por fercema1 el 31 agosto, 2012 - 1:54 pm

    Hola Belen: Openstreetmap es sin s al final, parece ser que no les gusta mucho que se la pongamos

    • #2 por belensaez el 31 agosto, 2012 - 1:59 pm

      Muchas gracias por el aviso, siempre caigo en ese error.

      • #3 por fercema1 el 31 agosto, 2012 - 2:15 pm

        de nada

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: