Zum Inhalt springen

AMAP-Overlays in Google Map anzeigen


MM
 Teilen

Empfohlene Beiträge

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 http://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.)

gmap_silvertrophy_snapshot.jpg

Link zu diesem Kommentar
Auf anderen Seiten teilen

Paaßt! - Dann mach' i' mi' dran.

 

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

 

Voraus wichtige Links dazu:

Link zu diesem Kommentar
Auf anderen Seiten teilen

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:  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='



<br />
	    v\:* {<br />
	      behavior:url(#default#VML);<br />
	    }<br />
	  
AMAP-Overlays mit Google Maps

';

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

$out.='

'; 

// define a -tag that holds the map, the ID is important (the above javascript function refers to it)
$out.='




';

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		$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


?>
Link zu diesem Kommentar
Auf anderen Seiten teilen

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:  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='



<br />
	    v\:* {<br />
	      behavior:url(#default#VML);<br />
	    }<br />
	  
AMAP-Overlays mit Google Maps

';

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

$out.='

'; 

// define a -tag that holds the map, the ID is important (the above javascript function refers to it)
$out.='




';

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		$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				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				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


?>
Link zu diesem Kommentar
Auf anderen Seiten teilen

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.
Link zu diesem Kommentar
Auf anderen Seiten teilen

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:

Link zu diesem Kommentar
Auf anderen Seiten teilen

Damit's ein astreines Demo wird, hab' ich noch (ähnlich wie bei phpHAC) 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)

Link zu diesem Kommentar
Auf anderen Seiten teilen

...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:

gpsvis_map_beispiel.jpg

gpsvis_xy_beispiel.jpg

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung jetzt entfernen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

 Teilen

×
×
  • Neu erstellen...