PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : AMAP-Overlays in Google Map anzeigen



<MM>
08-10-2005, 03:10
Nach einigen Stunden des intensiven Beschäftigens mit der API von Google Map und abschließenden zwei Stunden des Kampfes mit MSIE (allerdings unabhängig von Google Map, weil bezogen auf fixierte Hintergrundgrafiken) kann ich bei Interesse ein kleines "How-to" verfassen - nämlich wie man direkt aus AMAP abgespeicherte ASCII-Overlays in - auf der eigenen Webseite eingebaute - Google Maps einblenden kann.

Das anlaßgebende Beispiel dazu findet sich unter www.probike.at ("Tag der offenen TOUR").

Wer also wissen will, wie's funktioniert: Aufzeigen! Dann post' ich die zugehörigen Infos.

(Anmerkung zu den Overlays: Selbige sind für die ersten Versuche nur ganz grob skizziert worden, bestehen also nur aus wenigen Wegpunkten und weichen daher tw. markant vom eigentlichen Tourverlauf ab. Sie dienen nur mal als Testobjekte und weniger zum metergenauen Dokumentieren der Tour.)

Mr.T
08-10-2005, 11:20
hey, das wäre nicht uninteressant.
aber gib's ev. ins touren-forum zu den gps-infos.

Harti
08-10-2005, 11:32
*mitbeidenhändenaufzeig*

<MM>
08-10-2005, 12:58
Paaßt! - Dann mach' i' mi' dran.

Z'eascht muaß i' aber auf a Hochzeit. "*grrml*" ;)

Voraus wichtige Links dazu:
API Google Map
http://www.google.com/apis/maps/
User Group Google Maps
http://groups.google.com/group/Google-Maps-API
Beispielanwendungen (UPS-Tracking, Plan des Bostoner U-Bahnsystems)
http://www.gnik.com/wiki/GoogleMaps

<MM>
09-10-2005, 17:40
Ich schmeiß den php-Code jetzt einfach mal so rein. Aus den Kommentaren sollt's ersichtlich sein, wie's im Detail funktioniert:



<?

// This single line creates the desired Google map
// (find the commented functionality below)
// php wrapper: <MM> 07.10.2005
//
echo gmap_create("gmap_silvertrophy",47.323000,11.777687,6);


// ------

// create a html page including all necessary javascript code to show a Google map with an overlayed AMAP path

// parameters:
// $filename - name of the AMAP file (needs to be ASCII-written ), *without* extension (test.ovl => test)
// $x - center of the displayed Google map (x-coordinate (latitude))
// $y - center of the displayed Google map (y-coordinate (longitude))
// $zoom - zoom factor (usually between 4 and 8 to get a nice overview)
// $out - the complete html page (just to get echoed)

function gmap_create($filename,$x,$y,$zoom) {

$key="ABQIAAAAsIMNA2kDF8MM8nXVZbQZORSubqgbYZa-g-oRbORzjrtB5HNCwhQLf_C9sZiHqDBbjal6iY-4WEwEgw"; // your Google map API key, c. f. http://www.google.com/apis/maps/signup.html

// some values influencing the appearence of the AMAP overlay
$weight=3; // line weight
$opacity=0.6; // line opacity (0 - 1)
$color="#FF0000"; // HTML coded line color
$points=ovl_ascii_read($filename); // parse the .ovl file (get pairs of coordinates as javascript lines)

// now for the Google map itself
$width="400px"; // width of the map (CSS attribute)
$height="300px"; // height of the map (CSS attribute)

// give the html page some skeleton, c. f. http://www.google.com/apis/maps/documentation/#The_Hello_World_of_Google_Maps and http://www.google.com/apis/maps/documentation/#XHTML_and_VML

$out='
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<title>AMAP-Overlays mit Google Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=1&key='.$key.'"></script>
';

// this part basically creates the Google map (a javascript function that is called on page load)
$out.='
<script type="text/javascript">
//<![CDATA[
function onLoad() {
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("'.$filename.'"));
map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint('.$y.', '.$x.'), '.$zoom.');
var points = [];
'.$points.'
map.addOverlay(new GPolyline(points,"'.$color.'",'.$weight.','.$opacity.'));
} // if
} // function
//]]>
</script>
';

$out.='
</head>
';

// define a <DIV>-tag that holds the map, the ID is important (the above javascript function refers to it)
$out.='
<body onload="onLoad();">
<div id="'.$filename.'" style="width:'.$width.'; height:'.$height.';"></div>
</body>
</html>
';

return $out;

} // function


// ------


// subfunction
// this one can be modified to read any gps data file (e. g. ".gpx")
// open a .ovl file (that was written in ASCII mode) and get the X/Y pairs of coordinates
// output all the pairs as javascript lines with recalculated coordinates (using GPoint class)
// $filename - name of the AMAP file (needs to be ASCII-written )

function ovl_ascii_read($filename) {
$root=$_SERVER["DOCUMENT_ROOT"];

$dir="/touren"; // where do we have our uploaded AMAP overlay available?

$contents=file($root.$dir."/".$filename.".ovl"); // read the file

$out="";
// walk through all the file's lines and check for pairs of coordinates
$lines=sizeof($contents);
for ($i=1;$i<$lines;$i++) {
$line=$contents[$i];
$begin=substr($line,0,3); // distinct lines containing coordinates by looking at the line's first 3 letters
switch ($begin) {
case "XKo": $x_find=explode("=",$line); $X=substr($x_find[1],0,strlen($x_find[1])-2); break;
case "YKo": $y_find=explode("=",$line); $Y=substr($y_find[1],0,strlen($y_find[1])-2); $out.="points.push(new GPoint($X,$Y));\n"; break;
} // switch
} // for
return $out;
} // function


?>


Prinzipiell wird 1:1 das gemacht, was die Beispiele zur Google map API vorgeben (no na ned).

Das einzig Andersartige ist erstens die javascript-Definition der Google map über eine "drübergestülpte" php-Ausgabe.

Und das Zweite sind die Koordinaten für den eingeblendeten GPS-Pfad, die direkt aus einer AMAP-Datei (ASCII-Format) übernommen werden (man sollte sich allerdings auf unter 50 Punkte beschränken, weil der redraw beim Scrollen über die Google map sonst recht lahm wird).

Voraussetzungen, daß die Sache läuft:
Webspace mit php (da ich auf Klassen verzichtet hab', müßt's mit jeder php-Version laufen)
der persönliche key für die Google map API (vgl. http://www.google.com/apis/maps/signup.html )
aktiviertes JavaScript auf Client-Seite

Online-Test genau dieses oben gezeigten Skripts unter:

http://81.2.133.38/probike/gmap_test.php

Im Anhang noch die im Beispiel verwendete Overlay-Datei.

<MM>
09-10-2005, 19:23
Wer's ganz bequem haben möcht' und sich die Zentrierung der Karte auch vom Skript erledigen lassen will, verwendet diese Version:



<?

// This single line creates the desired Google map
// (find the commented functionality below)
// php wrapper: <MM> 07.10.2005

// 09.10.2005 18:58 - 19:21 automatically arrange the map's with the path's center


echo gmap_create("gmap_silvertrophy",6);


// ------

// create a html page including all necessary javascript code to show a Google map with an overlayed AMAP path

// parameters:
// $filename - name of the AMAP file (needs to be ASCII-written ), *without* extension (test.ovl => test)
// $zoom - zoom factor (usually between 4 and 8 to get a nice overview)
// $out - the complete html page (just to get echoed)

function gmap_create($filename,$zoom) {
GLOBAL $x_center;
GLOBAL $y_center;

$key="ABQIAAAAsIMNA2kDF8MM8nXVZbQZORSubqgbYZa-g-oRbORzjrtB5HNCwhQLf_C9sZiHqDBbjal6iY-4WEwEgw"; // your Google map API key, c. f. http://www.google.com/apis/maps/signup.html

// some values influencing the appearence of the AMAP overlay
$weight=3; // line weight
$opacity=0.6; // line opacity (0 - 1)
$color="#FF0000"; // HTML coded line color
$points=ovl_ascii_read($filename); // parses the .ovl file (get pairs of coordinates as javascript lines) and sets the globally adressable variables ($x_center, $y_center) for the map's center

// now for the Google map itself
$width="400px"; // width of the map (CSS attribute)
$height="300px"; // height of the map (CSS attribute)

// give the html page some skeleton, c. f. http://www.google.com/apis/maps/documentation/#The_Hello_World_of_Google_Maps and http://www.google.com/apis/maps/documentation/#XHTML_and_VML

$out='
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<title>AMAP-Overlays mit Google Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=1&key='.$key.'"></script>
';

// this part basically creates the Google map (a javascript function that is called on page load)
$out.='
<script type="text/javascript">
//<![CDATA[
function onLoad() {
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("'.$filename.'"));
map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var points = [];
'.$points.'
map.centerAndZoom(new GPoint('.$x_center.', '.$y_center.'), '.$zoom.');
map.addOverlay(new GPolyline(points,"'.$color.'",'.$weight.','.$opacity.'));
} // if
} // function
//]]>
</script>
';

$out.='
</head>
';

// define a <DIV>-tag that holds the map, the ID is important (the above javascript function refers to it)
$out.='
<body onload="onLoad();">
<div id="'.$filename.'" style="width:'.$width.'; height:'.$height.';"></div>
</body>
</html>
';

return $out;

} // function


// ------


// subfunction
// this one can be modified to read any gps data file (e. g. ".gpx")
// open a .ovl file (that was written in ASCII mode) and get the X/Y pairs of coordinates
// output all the pairs as javascript lines with recalculated coordinates (using GPoint class)
// $filename - name of the AMAP file (needs to be ASCII-written )

function ovl_ascii_read($filename) {
GLOBAL $x_center; // x-coordinate of the map's center
GLOBAL $y_center; // y-coordinate of the map's center

$root=$_SERVER["DOCUMENT_ROOT"];

$dir="/touren"; // where do we have our uploaded AMAP overlay available?

$contents=file($root.$dir."/".$filename.".ovl"); // read the file

$out="";
// preset boundary-variables with values far off all borders (to be sure to find the real borders)
$x_min=190; $x_max=-190; $y_max=-100; $y_min=100;

// walk through all the file's lines and check for pairs of coordinates
$lines=sizeof($contents);
for ($i=1;$i<$lines;$i++) {
$line=$contents[$i];
$begin=substr($line,0,3); // distinct lines containing coordinates by looking at the line's first 3 letters
switch ($begin) {
case "XKo": {
$x_find=explode("=",$line); $X=substr($x_find[1],0,strlen($x_find[1])-2);
if ($X<$x_min) $x_min=$X;
if ($X>$x_max) $x_max=$X;
break;
}
case "YKo": {
$y_find=explode("=",$line); $Y=substr($y_find[1],0,strlen($y_find[1])-2);
$out.="points.push(new GPoint($X,$Y));\n"; // add found coordinates as one javascript-line
if ($Y<$y_min) $y_min=$Y;
if ($Y>$y_max) $y_max=$Y;
break;
}
} // switch
} // for
// determine the path's center (set the global variables)
$x_center=($x_min + $x_max)/2;
$y_center=($y_min + $y_max)/2;
return $out;
} // function


?>


Testlink: http://81.2.133.38/probike/gmap_center_test.php

criz
09-10-2005, 19:39
interessant. funktioniert ja super.

wenn folgendes nicht in den google terms of use stehen würd, würd ichs sofort verwenden.

You also may not rent, disclose, publish, sell, assign, lease, sublicense, market, or transfer the imagery or any part thereof or use it in any manner not expressly authorized by this agreement.

<MM>
09-10-2005, 19:57
Wo siehst denn da ein Problem?

Der Passus bezieht sich ja auf die Bilder selbst (also auf einen screenshot des Kartenmaterials) - nicht auf das Verwenden der API und der damit dynamisch generierten maps und deren Einbindung in eigene Webseiten.

Es ist ausdrücklich erwünscht, die API zu verwenden und eigene Applikationen damit zu verwirklichen; einzige Voraussetzung: Die so erstellten Seiten müssen für User frei zugänglich sein:


Subject to the limitations and conditions described below, You may use the API to display map images in conjunction with other information You provide to end users. The API may be used only for services that are generally accessible to consumers without charge.

Du kannst die API also ohne Bedenken verwenden und die dynamischen maps in eigene Seiten einbauen. (Das zeigen ja auch die Tausenden von Usern, die sich in der Google-map-Usegroup gegenseitig mit Informationen versorgen: http://groups.google.com/group/Google-Maps-API)

Aber die terms of use zu kennen, ist sicherlich ein wichtiger Punkt. Sehrwohl. :toll:

criz
09-10-2005, 20:05
okay, das hab ich wohl mißverstanden. thx für die info...

tiktak
09-10-2005, 20:12
also ich find das einfach nur MAGENTA! :love: :rofl:

criz
09-10-2005, 20:27
also ich find das einfach nur MAGENTA! :love: :rofl:

heut zu viel sauerstoff am berg erwischt? :f::D

tiktak
09-10-2005, 20:54
heut zu viel sauerstoff am berg erwischt? :f::D

eher zu wenig :rofl:

criz
09-10-2005, 21:02
eher zu wenig :rofl:

ja so ohne sauerstoffgerät passiert das schnell am berg...

@topic
wird wohl zeit für mich mir endlich amap anzuschaffen. ich find die sache dann eigentlich ideal für so tourenseiten...

<MM>
09-10-2005, 21:27
Damit's ein astreines Demo wird, hab' ich noch (ähnlich wie bei phpHAC (http://www.phphac.net.tf/)) die Möglichkeit zum Upload von eigenen Dateien dazugebastelt:

http://81.2.133.38/probike/gmap_upload_test.php

Wie geht man zum Testen vor?
AMAP starten
beliebigen Pfad malen
Overlay speichern (dabei in der Dialogbox unbedingt auf ASCII-Format umschalten)
http://81.2.133.38/probike/gmap_upload_test.php aufrufen
auf "Upload" und dann auf "Durchsuchen" klicken
die soeben lokal gespeicherte AMAP-Datei suchen und zum Hochladen bestätigen.
den Backlink zur Testseite mit der Google Map klicken
aus der Liste die eigene Datei auswählen und auf OK klicken (hat man FireFox, genügt die Auswahl in der Liste; die map aktualisiert sich dann von selber)

<MM>
14-10-2005, 18:22
...kann gpsvisualizer.com (ebenfalls ein kostenloser Service):

Wer ein GPS hat und seine Touren optisch ansprechend und auch brauchbar dokumentieren will, findet hier Möglichkeiten en masse, sein Datenmaterial aufbereiten zu lassen - die Beispiele im Anhang sprechen Bände. (Die eingeblendeten Beschriftungen sind übrigens Waypoints, die automatisch in der Karte platziert werden - d. h. das geht ruck-zuck, hat aber u. U. den Nachteil, daß sich Texte überlagern - wie ebenfalls im Beispiel sichtbar).

Im Höhenprofil sind (noch) keine Waypoint-Einträge möglich - trotzdem ist diese Art Höhenprofil mit der farbigen Codierung der Höhe eine großartige Idee - denn die Codierung korreliert mit jener der in der Karte verwendeten. D. h. man findet sich in den Pfaden ad hoc zurecht.

Die Möglichkeiten von gpsvisualizer stechen hinsichtlich Aufbereitung des Diagramms sogar TTQV aus (!) - das will was heißen. ;)

Das Nonplusultra ist's noch nicht (weil nur als Onlineapplikation verfügbar) - aber es erspart schon in dieser Form eine Menge Arbeit im Umgang mit solcherart Diagrammen. :toll: :toll: