Deutschland Karte: Rechteck über dhtml positionieren?

Dustin84

Erfahrenes Mitglied
Hallo,

ich habe hier eine Karte (Beispiel).

(Es geht um eine Standortkarte des Betriebs)

Ich habe dazu nun mehrere Fragen.

1.)
Die roten Quadrate sollen später dynamisch durch Koordinaten auf der Karte platziert werden. Wie kann ich der Karte ein Koordinatennetz mitgeben ?

2.)
Wenn der Webmaster einen neuen Standort hinzufügen möchte, muss er ja die Koordinaten wissen, wo das neue Quadrat platziert werden soll.
Es wäre schön, wenn der Webmaster einfach mit der Maus über der Karte navigieren kann und dann in 2 Feldern die X und Y koordinaten des Mauszeigers angezeigt werden. Die könnte ich dann in ein Objekt wegschreiben und dort mein Quadrat platzieren.
Nur habe ich keinen Ansatz, wie ich das am besten umsetzten könnte.


Hoffe, ihr könnt mir da helfen.


Gruß
D.
 
Grundsätzlich stellt sich hier erstmal die Frage, wie du das genau angehen sollst.

Die Koordinaten auf einem Bild kannst du dir in der Theorie über JavaScript auslesen. Dazu müsste ich aber auch entsprechend nochmal nachschlagen.

Wichtiger ist die Frage, mit welcher Technik die roten Quadrate eingefütgt werden sollen.
Willst du das mit HTML und CSS überlagern oder willst du diese entsprechend in das Bild reinrendern. Das kannst du mit der PHP Library GDLib machen.
 
Hallo,

ich habe das Problem mit den Koordinaten gelöst. Ich kann nun mit dem Mauszeiger über der Karte navigieren und erhalte die Koordinaten. :)

Jetzt muss ich nochmal schauen, wie ich das mit der Positioniereung der Quadrate machen. Wäre da für jeden Tipp dankbar! Am besten mit CSS/HTML/Javascript.


Gruß
D.
 
Hallo!

Die Koordinaten bekommst Du ganz einfach per Mausklick, in dem Du die Karte als Grafik-Button in einem Formular anlegst.
http://de.selfhtml.org/html/formulare/formularbuttons.htm#grafische

Die Koordinaten müssen allerdings irgendwo gespeichert werden. ;)

Mit PHP könntest Du dann die Kästchen in der Grafik einbinden.

Nur als Anregung:
Da Du ja die Koordinaten hast, könntest Du die Kästchen auch in einem Image Map verlinken (z.B. um die einzelnen Standortadressen anzuzeigen ;)).
http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren

Gruss Dr Dau
 
Hier ist eine Lösung mit GDLib, die ein transparentes PNG erzeugt.
PHP:
	$sql="SELECT xpos, ypos, hauptort FROM user;";
	$erg=mysql_query($sql,$verbindung);
	while($zeile=mysql_fetch_array($erg)){
		$userpos[] = $zeile;
	}
	$bg = imagecreatefrompng("karte_de.png");
	$punkt = imagecreatefrompng("punkt.png");
	$punktb = imagecreatefrompng("punktb.png");
	$width = imagesx($bg); 
	$height = imagesy($bg); 
	$bild = imagecreatetruecolor($width, $height);
	$weiss = imagecolorallocate ( $bild, 255, 255, 255);
	imagecolortransparent ( $bild, $weiss );
	imagecopymerge($bild, $bg, 0, 0, 0, 0, $width, $height, 100);
	foreach ($userpos as $wert){
		if ($wert[xpos]!=0 && $wert[ypos]!=0){
			$x1 = $wert[xpos] - 3;
			$y1 = $wert[ypos] - 3;
			if ($wert[hauptort])
				imagecopymerge($bild, $punkt, $x1, $y1, 0, 0, 8, 8, 100);
			else
				imagecopymerge($bild, $punktb, $x1, $y1, 0, 0, 8, 8, 100);
		}
	}
	$file_name_dest = "../../bilder/karte_d-trans.png";
	@unlink("../../bilder/karte_d-trans.png");
	imagepng($bild,$file_name_dest);
Hier werden zwei verschiedene Punkte gesetzt, je nachdem ob es sich um eine Hauptniederlassung oder einen Vertreter handelt. Die Koordinaten kommen aus der Datenbank.
 
Hallo,

leider komme ich mit deinem Script überhaupt nicht klar.
Geht das nicht evtl. anders, in etwa so:

xpos und ypos habe ich nun in 2 Variablen stehen:
PHP:
$xpos
$ypos

Dann muss ich ja noch irgendwie wieder die Deutschland Karte einbinden.

Jetzt müsste ich doch nur noch sagen, dass die Grafik (rotes Quadrat) an die Koordinaten in den Variablen xpos und ypos gesetzt werden soll.

Könnte das so gehen und würde das in etwa aussehen?

Gruß
D.
 
Hallo,

leider komme ich mit deinem Script überhaupt nicht klar.
Geht das nicht evtl. anders, in etwa so:

xpos und ypos habe ich nun in 2 Variablen stehen:
PHP:
$xpos
$ypos

Dann muss ich ja noch irgendwie wieder die Deutschland Karte einbinden.

Jetzt müsste ich doch nur noch sagen, dass die Grafik (rotes Quadrat) an die Koordinaten in den Variablen xpos und ypos gesetzt werden soll.

Könnte das so gehen und würde das in etwa aussehen?

Gruß
D.
Genau das macht das Script doch. Nur werden die Koordinaten hier vor der Bildverarbeitung in das Array $userpos gepackt. Wenn $xpos und $ypos einzelne eindimensionale Arrays sind, mußt du nur die foreach entsprechend anpassen.
PHP:
foreach ($xpos as $key => $wert){ 

//  $wert[xpos] tauschst du aus gegen $wert
// und statt $wert[$ypos] schreibst du $ypos[$key]

Wenn du nur eine Punktfarbe setzt, kannst du die Abfrage nach dem Hauptort natürlich rauswerfen und läßt nur das im if-Zweig stehen. Ansonsten mußt du das natürlich an deine Gegebenheiten anpassen.
 
Hm, ich versteh da nur Bahnhof.
Hier mal das Script mit Anmerkungen:

PHP:
			$xpos = $GLOBALS['lv']->f('xpos'); 
			$ypos = $GLOBALS['lv']->f('ypos');
			
			$bg = imagecreatefrompng("Karte_deutschland.gif"); // Das wird wohl meine Deutschlandkarte sein ?
			$punkt = imagecreatefrompng("punkt.png"); // 1 Pixel Bild, was das rote Quadrat später darstellt ?
			$punktb = imagecreatefrompng("punktb.png");
			$width = imagesx($bg); // Breite ermitteln
			$height = imagesy($bg); // Höhe ermitteln
			$bild = imagecreatetruecolor($width, $height); // keine Ahnung
			$weiss = imagecolorallocate ( $bild, 255, 255, 255);
			imagecolortransparent ( $bild, $weiss );
			imagecopymerge($bild, $bg, 0, 0, 0, 0, $width, $height, 100); // keine Ahnung
			foreach ($xpos as $key => $wert){
					if ($wert !=0 && $ypos[$key]!=0){
							$x1 = $wert - 3;
							$y1 = $ypos[$key] - 3;
							if ($wert[hauptort])
									imagecopymerge($bild, $punkt, $x1, $y1, 0, 0, 8, 8, 100);
							else
									imagecopymerge($bild, $punktb, $x1, $y1, 0, 0, 8, 8, 100);
					}
			}
			$file_name_dest = "../../bilder/karte_d-trans.png"; // wofür das ?
			@unlink("../../bilder/karte_d-trans.png"); // wofür das ?
			imagepng($bild,$file_name_dest);
 
Du mußt den Hauptort noch anpassen. $wert ist jetzt der Inhalt des jeweils aktuellen $xpos Wertes. Dann kann es $wert[hauptort] nicht geben. Ich hab doch gesagt, wenn du nur eine Art Punkte setzt, muß die if Abfrage auf den Hauptort raus. Also dürfen nur diese Zeilen bleiben:
PHP:
             if ($wert !=0 && $ypos[$key]!=0){ 
                            $x1 = $wert - 3; 
                            $y1 = $ypos[$key] - 3; 
                            imagecopymerge($bild, $punkt, $x1, $y1, 0, 0, 8, 8, 100); 
                    }
Wenn du zwei verschiedene Punkte setzt, mußt du die Bestimmung des Punkttyps anders anstellen.
Die 3 in der obigen Rechnung kommt übrigens daher, daß in meinem Script 6 x 6 Pixel große Punkte verwendet werden. Wenn deine anders sind, mußt du das entsprechend anpassen, damit der Mittelpunkt des Punktes auf die richtige Koordinate kommt.
 

Neue Beiträge

Zurück