Table Manager - Das "GEO" Plugin

Ziel des Tutorials

In diesem Tutorial sollen die Grundlagen vermittelt werden, wie man mittels des “GEO” Plugins für den Table Manger die geografische Zuordnung von Adressen im Table Manger verwalten und mittels GoogleMaps darstellen kann. Zur Veranschaulichung dient die Redaxo Demo (4.3.x – UTF8), die im Redaxo Downloadpaket enthalten ist.
(Redaxo Version 4.3.2, XForm / Table Manger Version 2.8 / GEO Plugin Version 2.8)

In diesem Beispiel verwende ich die schon erstellen Tabellen aus dem Tutorial Table Manager F/K/A EditMe

Installation des Plugins

Nachdem das Addon XForm installiert und aktiviert erscheint das XFrom GEO Plugin in der Liste. Dort muss es einfach installiert (1) und danach aktiviert (ohne Bild) werden.

Benötige Tabellenfelder anlegen

Für die Verwendung des Plugins müssen in der gewünschten Tabelle Textfelder für die Adresse (1), Lat (2) und Lng (3) anlgelegt werden. Die Bezeichnung der Felder kann natürlich frei gewählt werden.

Das Anlegen der Felder wird in dem oben angesprochenen Tutorial erklärt.
(Die in dem vorherigen Tutorial erstellten Felder “strasse, plz und ort” werden hier nicht benötigt.)

Anlegen des "GEO" Feldes

Jetzt muss das “GEO” Feld angelegt werden (1).

Die Felder im “GEO” Feld werden wie folgt ausgefüllt:

1. Bezeichnung des Feldes
2. Angabe lng und lat felder (wurden vorher angelegt)
3. Angabe des Adressfeldes (wurde vorher angelegt)
4. Breite und Höhe der Karte im Backend

Nach dem speichern des Feldes (Abschicken) bitte nicht vergessen die Tabellen zu aktualisieren (1).

Verwaltung der Daten im Backend

Wenn im Backend jetzt ein neuer Datensatz angelegt (oder ein bestehender Datensatz bearbeitet) wird sind die Felder Lat und Lng erst einmal leer und die Marker in der Karte zeigt auf keinem besonderen Punkt.

Nach eingabe der Daten in das Adressfeld (1) und Klick auf “Geodaten holen” (2) werden die Felder Lat und Lng gefüllt (3) und der Makrer in der Karte auf die gefundene Position gesetzt (4).

Somit ist die Bearbeitung im Backend beendet.

Das Modul für die Ausgabe

Der Ein- und Ausgabecode für das nötige Modul findet sich im Ordner xfom/plugins/geo/module die Dateien heissen rex_geo.in.php und rex_geo.out.php.

rex_geo.in.php (Moduleingabe)

BItte Tabelle auswählen:
<br /><input type="text" name="VALUE[1]" value="REX_VALUE[1]" size="70" />

<br /><br />Feldname für lng Position:
<br /><input type="text" name="VALUE[2]" value="REX_VALUE[2]" size="10" />

<br /><br />Feldname für lat Position:
<br /><input type="text" name="VALUE[3]" value="REX_VALUE[3]" size="10" />

<br /><br />Felder die übertragen werden sollen (kommasepariert):
<br /><input type="text" name="VALUE[4]" value="REX_VALUE[4]" size="70" />

<br /><br />Volltextsuchfelder (kommasepariert)
<br /><input type="text" name="VALUE[5]" value="REX_VALUE[5]" size="70" />

<br /><br />where (opt.)
<br /><input type="text" name="VALUE[6]" value="REX_VALUE[6]" size="70" />

<br /><br />Sidebar/Infobox Darstellung, HTML mit ###id### als Ersetzungen:
<br /><textarea cols="70" rows="3" name="VALUE[7]">REX_VALUE[7]</textarea>

<br /><br />

rex_geo.out.php (Modulausgabe)

<?php

$table = "REX_VALUE[1]";
$pos_lng = "REX_VALUE[2]";
$pos_lat = "REX_VALUE[3]";
$vt_fields = "REX_VALUE[4]";
$fields = "REX_VALUE[5]";
$where = "REX_VALUE[6]";
$view = str_replace("<br />","","REX_VALUE[7]");
$view = str_replace("\n","",html_entity_decode($view));
$view = str_replace("\r","",$view);

$page_size = 50;

// Data as json
$rex_geo_func = rex_request("rex_geo_func","string");
switch($rex_geo_func)
{
case("datalist"):
ob_end_clean();
ob_end_clean();

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

$geo_search_text = rex_request("geo_search_text","string");
$geo_search_page = rex_request("geo_search_page","int");
$geo_search_page_size = rex_request("geo_search_page_size","int",50);
if($geo_search_page_size < 0 or $geo_search_page_size > 200) $geo_search_page_size = 50;

$geo_bounds_top = rex_request("geo_bounds_top","string");
$geo_bounds_right = rex_request("geo_bounds_right","string");
$geo_bounds_bottom = rex_request("geo_bounds_bottom","string");
$geo_bounds_left = rex_request("geo_bounds_left","string");
$sql_pos_add = ' '.$pos_lng.'<>"" and '.$pos_lat.'<>"" ';
if($geo_bounds_top != "" && $geo_bounds_bottom != "" && $geo_bounds_left != "" && $geo_bounds_right != "") {
$sql_pos_add = '
('.$pos_lng.'>'.$geo_bounds_left.' and '.$pos_lng.'<'.$geo_bounds_right.')
and ('.$pos_lat.'<'.$geo_bounds_top.' and '.$pos_lat.'>'.$geo_bounds_bottom.')
';
}

$sql_where = "";
if($where != "") {
$sql_where = ' AND ('.$where.') ';
}

$sql_vt_add = '';
if($geo_search_text != "") {
$vtf = array();
foreach(explode(",",$vt_fields) as $f) {
$vtf[] = '('.trim($f).' LIKE "%'.mysql_real_escape_string(trim($geo_search_text)).'%" )';
}

$sql_vt_add = ' and ( '.implode(" OR ",$vtf).') ';
}

if($geo_search_page<0) $geo_search_page = 0;
$sql_limit_from = ($geo_search_page*$geo_search_page_size);
$sql_limit_to = (($geo_search_page+1)*$geo_search_page_size)+1;
$sql_limit = ' order by rand(20) LIMIT '.$sql_limit_from.','.$sql_limit_to;

$gd = rex_sql::factory();
// $gd->debugsql = 1;
$gd->setQuery('select '.$fields.','.$pos_lng.' as lng,'.$pos_lat.' as lat from '.$table.' where '.$sql_pos_add.$sql_where.$sql_vt_add.$sql_limit);
echo json_encode($gd->getArray());
exit;
break;
}

?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/files/addons/xform/plugins/geo/geo.js"></script>
<link rel="stylesheet" type="text/css" href="/files/addons/xform/plugins/geo/geo.css" />

<div id="rex-googlemap" style="width:725px; height:500px;"></div>

<script type="text/javascript">
<!--

jQuery(document).ready(function(){

var map_options = {
div_id: "rex-googlemap",
dataUrl: "/index.php?article_id=<?php echo $REX["ARTICLE_ID"]; ?>&rex_geo_func=datalist",
page_size: <?php echo $page_size; ?>,
page_loading: '<div class="rex-geo-loading"></div>',
sidebar_view: '<?php echo $view; ?>',
fulltext: 1,
zoom:6,
marker_icon_normal: "/files/addons/xform/plugins/geo/icon_normal.png",
marker_icon_active: "/files/addons/xform/plugins/geo/icon_active.png",
};

map_explorer = new rex_xform_geomap(map_options); //
map_explorer.initialize();

});

-->
</script>

Angaben bei der Benutzung des Moduls

In der Moduleingabe werden die vorher angelgeten Felder und natürlich die betreffende Tabelle abgegeben. Ich denke das Bild ist selbsterklärend.

Nach dem Speichern des Moduls sollte das Ergebnis so aussehen:

Nicht vergessen!

Für die Ausgabe im Frontend muss jQuery eingebunden werden (habt Ihr sicherlich schon :-)).

jQuery via Google Code einbinden

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>