dynamicinternet Wir machen Ihr Web dynamisch!

Stadtkarte mit benutzerdefinierten Feldern

geschrieben von Micha am 10. Dezember 2007 | 5 Kommentare

Im Augenblick bin ich dabei, mein Projekt Unser Görlitz etwas umzubauen (läuft mit WordPress). Die Hauptkategorien stehen soweit fest, jetzt geht es mir darum, alles etwas funktionaler aufzubereiten. Auch an den Farben wird Einiges verändert.
Worüber ich hier aber schreiben möchte, ist die Kategorie Baudenkmale. Mein Freund Frank, Architekt, hat all die Texte und Bilder erstellt und auch für Görlitz eine Stadtkarte selbst produziert. Dieses Ding liegt hochauflösend als Photoshop-Datei vor.

Vorhin bin ich auf die Idee gekommen, bei jedem Baudenkmal ein Ausschnitt der Karte anzuzeigen, damit der Besucher gleich sieht, wo es sich befindet. Soweit zur Vorrede.

Ich habe mir überlegt, das Ganze mit den Benutzerdefinierten Feldern zu realisieren. Zunächst ist aber ein bischen Vorplaung nötig. Die Karte ist einfach zu groß, um sie im Ganzen zu speichern. Also teile ich sie in 600×300 Pixel große Bilder und speichere diese im Photoshop für das Web als map-a.jpg, map-b.jpg usw. ab.

In der Sidebar habe ich so ca. 300 Pixel in der Breite Platz dafür. Also baue ich ein Container ein, der die Map als Hintergrundbild bekommt.

<div id="karte"></div>

/*Stylesheet*/
#karte {
 	width:97%;
	height:250px;
	border: 1px solid #e1dbcf;
 }

Ok, jetzt haben wir ein leeres div mit ca. 300 Pixel breit und 250 Pixel hoch. Auf die Maße kommt es nicht so genau an, wichtig für dieses Unterfangen ist nur die linke obere Ecke als Koordinatenursprung.

Als nächstes brauche ich ein Bild mit einem Kreis, welches den Standort in der Karte markieren soll. Ich habe ein transparentes Gif mit einem roten Kreis erstellt (28×28 Pixel groß). Dieses transparente Bild wird in die Mitte von dem Container gesetzt und wird die Karte später überlagern. Das Bild bekommt die Klasse “ziel”.

<div id="karte">
	<img src="<?php bloginfo('url'); ?>/layout/maps/kreis.gif" alt="Standortmarkierung" class="ziel"/>
</div>
/*Stylesheet*/
.ziel { margin: 111px 0 0 136px; }

Damit sitzt der Kreis nun in der Mitte von dem Div. Jetzt schaue ich im Photoshop meine map-a.jpg an und fahre mit irgendeinem Tool auf den Punkt, wo mein Baudenkmal steht. Die Pixelkoordinaten (251, 142 von der linken oberen Ecke aus) schreibe ich mir auf. Als nächstes lade ich die Seite mit meinem Baudenkmal in den WordPress Editor und lege 3 neue Benutzerdefinierte Felder an:
karte mit dem Wert map-a, kartenkoordinaten-x mit dem Wert 251 und kartenkoordinaten-y mit dem Wert 142.

Die Idee ist, die map-a.jpg so zu verschieben, das der Standort des Baudenkmals genau unter dem Kreis von dem kreis.gif liegt. Dazu bekommt das Div #karte ein Inline-Style, welcher die entsprechende Map als Hintergrundbild läd und natürlich Bildkoordinaten. Dazu lesen wir zuerst die Metadaten der Seite aus:

<?php
$pageID = get_the_ID();
$meta = get_post_custom($pageID);
$kartenbild = $meta['karte'][0].".jpg";
$positionX = ( 150 - $meta['kartenkoordinaten-x'][0] ) . "px" ;
$positionY = ( 125 - $meta['kartenkoordinaten-y'][0] ) . "px" ;
?>

Dieser Code kommt oben in die Sidebar. Mit get_the_ID() holen wir uns die ID der Seite und mit get_post_custom($pageID) lesen wir die Schlüssel-/Wert-Paare aus, welche als Array zurückgeliefert werden.

Die Werte der x- und y-Positionen errechnen sich aus der Hälfte der Länge/Breite von dem Div #karte minus der Werte aus den benutzerdefinierten Feldern. Jetzt müssen wir aus den Variablen noch den String für den Inlinestyle bauen:

$style = 'background-image: url('.get_bloginfo('url').'/layout/maps/'.$kartenbild.');';
$style .= 'background-repeat: no-repeat;';
$style .= 'background-position: '.$positionX.' '. $positionY.';';

Dieser String wird dann einfach dem Div #karte hinzugefügt:

<div id="karte" style="<?php echo $style; ?>">

Und so sieht das Resultat hier auf dem Rechner aus:

Das ganze geht sicher noch zu optimieren, aber ich wollte es erstmal aufschreiben. Vielleicht fällt mir auch noch eine bessere Lösung ein. Auf jeden Fall wieder einmal ein Beispiel, was man so alles mit den benutzerdefinierten Feldern anstellen kann.

Update: Die Karten sind jetzt auch online zu besichtigen.