dann wollen wir mal…ich nenne es GPX-View 0.01
Was ihr braucht:
-
Legt euch auf eurem Webserver am besten ein eigenes Verzeichnis an, in das alle Dateien rein kommen, die wir brauchen.
-
Legt in diesem Verzeichnis das Verzeichnis “files” an. In dieses Verzeichnis werden die gpx-daten geschrieben.
-
Erstellt die Datei GPX.js, wie im Wiki-Tutorial (JavaScript-Datei_erstellen).
-
Erstellt die CSS-Datei map.css, wie im Wiki-Tutorial (CSS-Datei_erstellen). Achso, ich hab folgende Änderung vorgenommen: Ich hab das background-color: von “#000000” in “#c0c0c0” geändert.
-
Jetzt gehts ans Eingemachte. Wir brauchen eine Datei, die uns das Formular und die Karte anzeigt. Erstellt also ähnlich wie im Wiki-Tutorial eine Datei mit dem Inhalt des ersten Code-Feldes unten.
Speichert diese als index.php. Diese Datei ist ähnlich der HTML-Datei aus dem Tutorial, sie zeigt keine Karte an, wenn sie nicht weiß, welche Position zu verwenden ist, sondern das Uploadformular.
Ist eine Datei hochgeladen, zeigt sie die Karte und den Permalink dazu - und kein Uploadformular mehr. Für den Permalink passt bitte das www.eure-domain.de/Verzeichnis/ an.
-
Jetzt kommt eine Datei, die es im originalen Tutorial so nicht gibt, sie entsteht aus dem zweiten Code-Feld unten.
Diese Datei bitte unter Layercontrol.php speichern. Diese Datei besteht im Wesentlichen aus dem langen JavasScript-Teil des originalen Tutorials (HTML-Datei_erstellen).
Die ersten Zeilen, die die anzuzeigenden Koordinaten beinhalten sind ersetzt durch ein wenig PHP-Spielerei, die aus dem GPX-File die ersten Koordinaten liest und als Kartenmittelpunkt wählt. Der Wert danach zeigt den Start-Zoom-Wert. Er kann geändert werden, wenn gewünscht. Weiter unten wird dem Layer dann noch einmal die anzuzeigende gpx-Datei übergeben.
-
Alle 4 Dateien in euer Verzeichnis auf dem Server laden.
-
www.eure-domain.de/Verzeichnis/ aufrufen - sich freuen.
Ich übernehme keine Garantie für Funktion, aus der Nutzung entstehende Schäden, insbesondere an der Integrität eures Webservers, usw.!
Für Verbesserungsvorschläge bin ich dankbar.
Optisch ist das Ganze kein Hingucker, wer sich in CSS auskennt, kann ja selbst was dagegen tun 


Ich hab das System testweise laufen, kann es wegen Trafficbeschränkungen aber nicht der Öffentlichkeit zugänglich machen. Für kleine Tests eurerseits bin ich bereit, euch die URL in einer privaten Nachricht zu nennen.
index.php:
<?
$filetype=0;
if($_FILES) {
$tempfile = $_FILES['file']['tmp_name'];
$filename = strtoupper($_FILES['file']['name']);
if(substr($filename, -4)==".GPX") $filetype=1;
}
if($tempfile!="" && $filetype==1)
{
$target = basename($filename);
move_uploaded_file($tempfile, "files/".$target);
chmod("files/".$target, 0604);
}
if ($_REQUEST['track'])
$target = $_REQUEST['track'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"
<head>
<title>OSM GpX Track</title>
<? if ($target!="") echo "
<script src=\"http://www.openlayers.org/api/OpenLayers.js\" type=\"text/javascript\"></script>
<script src=\"http://www.openstreetmap.org/openlayers/OpenStreetMap.js\" type=\"text/javascript\"></script>
<script src=\"http://www.openlayers.org/api/Ajax.js\" type=\"text/javascript\"></script>
<script src=\"GPX.js\" type=\"text/javascript\"></script>
<script src=\"Layercontrol.php?file=$target\" type=\"text/javascript\"></script>
";
?>
<link rel="stylesheet" type="text/css" href="map.css">
</head>
<body <? if ($target!="") echo "onload=\"init();\""; echo ">";
if ($target=="") echo "
<form enctype=\"multipart/form-data\" action=\"\" method=\"post\">
<fieldset>
<legend>Track anzeigen:</legend>
<input name=\"file\" type=\"file\" class=\"text\" /><br />
<input type=\"submit\" value=\"anzeigen\" class=\"submit\" />
</fieldset>
</form>
";
else echo "permalink: <a href=\"www.eure-domain.de/Verzeichnis/?track=$target\">www.eure-domain.de/Verzeichnis/?track=$target</a><br />
<div id=\"map\"></div>
Karte von <a href=\"http://www.openstreetmap.org\" target=\"_blank\">www.openstreetmap.org</a>";
?>
</body>
</html>
Layercontrol.php:
<?
header("Content-Type: text/javascript");
if ($_REQUEST['file'])
$file = $_REQUEST['file'];
$fp = fopen("files/".$file, "r");
while (! feof( $fp )) {
$zeile = fgets( $fp , 4096);
//$zeile = chop( $zeile );
if (strpos($zeile,"<trkpt")!==false) break;
}
fclose( $fp );
$zeile=preg_replace("@<trkpt @", "", $zeile);
$zeile=preg_replace("@>@", "", $zeile);
$zeile=trim($zeile);
$zeile=preg_replace("@\"@","",$zeile);
$zeile=preg_replace("@lat@","var lat",$zeile);
$zeile=preg_replace("@lon@","\n var lon",$zeile);
echo $zeile;
?>
var zoom=13
var map; //complex object of type OpenLayers.Map
//Initialise the 'map' object
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
map.addLayer(layerTilesAtHome);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
layerMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(layerMarkers);
var lgpx = new OpenLayers.Layer.GPX("Track", "<?php echo "files/".$file; ?>", "#0000FF");
map.addLayer(lgpx);
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, zoom);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
}