IOException.de » jquery http://www.ioexception.de Ausgewählter Nerdkram von Informatikstudenten der Uni Ulm Wed, 19 Mar 2014 22:01:00 +0000 de-DE hourly 1 http://wordpress.org/?v=3.9.1 Einfache Visualisierung von Geodaten – Teil 2: Leaflet & jquery.couch.js http://www.ioexception.de/2011/08/30/einfache-visualisierung-von-geodaten-%e2%80%93-teil-2-leaflet-jquery-couch-js/ http://www.ioexception.de/2011/08/30/einfache-visualisierung-von-geodaten-%e2%80%93-teil-2-leaflet-jquery-couch-js/#comments Tue, 30 Aug 2011 09:48:49 +0000 http://www.ioexception.de/?p=1119 Im vorherigen Teil haben wir gesehen, wie man Geodaten mithilfe von CouchDB abspeichern kann. Da diese Datenbank zugleich ein Webserver ist und die Daten im JSON-Format gespeichert werden, eignet sie CouchDB auch gut für AJAX-Abfragen. Hierfür gibt es eine auf jQuery aufbauende Library namens jquery.couch.js, die von den AJAX-Requests abstrahiert und direkt browser-seitige Interaktionen mit der Datenbank ermöglicht.

Im diesem Beitrag soll gezeigt werden, wie man mit der offenen Karten-Library Leaflet und jquery.couch.js geographische Daten aus CouchDB heraus auf einer Karten anzeigen kann.

Beispiel-Visualisierung von ulmapi.de, ebenfalls basierend auf CouchDB und Leaflet.

Wir verwenden die CouchApp aus dem ersten Teil weiter, und fügen zu den bisherigen Map/Reduce Views noch statische HTML- und Javascript-Dateien hinzu (im _attachments Ordner), die dann im Browser abgerufen werden können. Beim Aufruf dieser Webseite wird ein HTML-Grundgerüst übertragen, sowie eine JavaScript-Datei, die beim Aufruf die eigentlichen Datensätze via jquery.couch.js aus der CouchDB nachlädt.

Als Mapping-Library verwenden wir Leaflet, eine Open-Source Bibliothek für Kartendarstellungen im Browser. Leaflet abstrahiert von verschiedenen Kartenprovidern und erlaubt es somit, unterschiedliche Datenquellen zu verwenden, wie zum Beispiel auch Bing Maps oder Cloudmade. Letzteres ist ein Service, der auf Basis der Open Street Map Daten Kartenkacheln mit individuellen Stilen rendert und hostet – für Visualisierungen oft sehr hilfreich, da reguläre Karten meist zu viele Karteninformationen enthalten oder farblich überladen sind. In unserem Fall haben wir einen einfach Graustufenkarte gewählt. Leaflet selbst lässt sich relativ leicht verwenden, es muss eine CSS-Datei sowie eine JavaScript-Datei importiert werden, und ein div-Block im HTML enthalten sein, worin später die Karte gerendert werden soll. Somit sieht unser HTML-Gerüst zu Beginn so aus:

<!doctype html>
<html>
<head>
	<link rel="stylesheet" href="style/leaflet.css" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.couch.js"></script>
	<script type="text/javascript" src="js/leaflet.js"></script>
	<script type="text/javascript" src="js/maploader.js"></script>
</head>
<body>
	<div id="map"></div>
</body>
</html>

Es werden jQuery, jquery.couch.js und die Leaflet-Libs geladen, und die letzte importierte JavaScript-Datei soll nun unseren Code zum initialisieren der Karte und dem Laden der Daten aus der CouchDB enthalten. Zunächst erstellen wir eine Karte und rendern sie, sobald die Seite vollständig geladen wurde (jQuery Callback für document.ready):

$(document).ready(function(){

		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/[YOUR_API_KEY]/33481/256/{z}/{x}/{y}.png';
		var cloudmadeAttribution = 'UlmApi.de / Shape Files: Stadt Ulm (cc-by-sa), Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade';
		var cloudmade = new L.TileLayer(
			cloudmadeUrl, {
				maxZoom : 18,
				attribution : cloudmadeAttribution
		});

		var map = new L.Map('map', {
			center : new L.LatLng(48.399976,9.995399),
			zoom : 12,
			layers : [ cloudmade ],
			zoomControl : false
		});
});

In der cloudmadeUrl muss für Cloudmade Karte ein korrekter API-Key angegeben werden, der nächste Parameter im Pfad identifiziert den Kartentyp. Beim Initialisieren der Karte wird dann die ID des divs angeben, bei uns ‘map’. Nun sollte unsere Karte bereits dargestellt werden, nachdem wir die CouchApp neu deployen (außerhalb des Fokus dieses Artikels, mehr dazu auf couchapp.org).

Was nun noch fehlt, ist das Nachladen der Geodaten aus der CouchDB und die Anzeige auf der Karte. Hierfür verwenden wir jquery.couch.js als Wrapper für die AJAX-Requests gegen CouchDB und die GeoJSON-Funktionalität von Leaflet:

$.couch.db('database_name').view('design_doc_name/view_name', {

	success: function(data){
		if(data && data.rows && data.rows.length){

			var geoJsonLayer = new L.GeoJSON();

			for(var i = 0;i<data.rows.length;i++){
				geoJsonLayer.addGeoJSON(data.rows[i].value.geometry);
			}

			map.addLayer(geoJsonLayer);
		}
	}
});

Das obige Snippet sollte im vorherigen Code hinter der Erzeugung der Karte eingefügt werden. Es ruft von der Datenbank ‘database_name’ den View ‘view_name’ des Design-Dokuments ‘design_doc_name’ auf, und iteriert bei erfolgreicher Abfrage über alle Zeilen. Von jeder Zeile wird dabei die geometry-Property zu einem GeoJSON-Layer hinzugefügt, der am Ende an die Karte übergeben wird. Da unser View aus Teil 1 bereits GeoJSON generiert, und Leaflet nativ GeoJSON lesen und darstellen kann, ist das Hinzufügen von Geodaten auf die Karte sehr einfach.

Hier noch ein paar weiterführende Links mit vertiefenden Inhalten zu den einzelnen Themen:

]]> http://www.ioexception.de/2011/08/30/einfache-visualisierung-von-geodaten-%e2%80%93-teil-2-leaflet-jquery-couch-js/feed/ 3 WordPress Navigation & jQuery http://www.ioexception.de/2009/06/22/wordpress-navigation-jquery/ http://www.ioexception.de/2009/06/22/wordpress-navigation-jquery/#comments Mon, 22 Jun 2009 14:08:56 +0000 http://www.ioexception.de/?p=98 Sobald es ein paar mehr Seiten werden, wird die Standard-Seitenanzeige von WordPress suboptimal und inflexibel. Also brauchte ich eine Methode um nur die Eltern-Elemente der aktuellen Seite anzuzeigen und den Rest einzuklappen. Bei der Suche nach einer Methode bin ich auf Folding menu for WordPress gestossen. Allerdings fand ich die Animation bei jedem Klick etwas störend.

$(".page_item ul").hide(); 
$(".current_page_item").parents("ul").show(); 
$(".current_page_item ul:first").slideDown();

Dies ist meine Version des Code-Schnipsels und tut eigentlich genau das was ich wollte (und animiert nur, wenn man ein Menüpunkt mit Unterpunkten angeklickt hat). Aber da ja sowieso schon die gesamte Navigation vorhanden ist (nur nicht sichtbar), könnte man ja auch den Rest ausklappbar machen …

$(".page_item > ul:hidden").before( '<a href="#" class="menuToggle menuToggleOpen">v</a>');
$(".page_item > ul:visible").before('<a href="#" class="menuToggle menuToggleClose">^</a>');
a = function(){
    $(this).text("^").next("ul").slideDown();
};
b = function(){
    $(this).text("v").next("ul").slideUp();
};
$(".menuToggleClose").toggle(b,a);
$(".menuToggleOpen").toggle(a,b);

Hab dazu auch mal ein kleines Demo hier aufgesetzt.

Einziges Problem ist natürlich mal wieder der Internet Explorer 6, der SlideDown/-Up nicht sonderlich schön darstellt. Aber es ist benutzbar. Je nach erwarteter IE6-Dichte könnte man einen Switch einbauen, der dann im IE 6 die Animation nicht anzeigt (und nur show()/hide() nutzt).

Originalartikel: WordPress Navigation & jQuery

]]> http://www.ioexception.de/2009/06/22/wordpress-navigation-jquery/feed/ 0