Strassenkarte mit klickbaren Strassen

isaack

Mitglied
wäre es den nicht eigentlich auch möglich, das komplette bild mit php zu erstellen?
theoretisch müsste man doch die (bei dir schwarzen str) auch rein mit php erzeugen können und diese dann setzen lassen mit den image erweiterungen von php
 

isaack

Mitglied
im grunde müsste man doch einfach nur die areas bei dir in folgende form bringen:

HTML:
<a xlink:href="https://de.wikipedia.org/wiki/George_Washington">
    <rect x="300" y="125" opacity="0" width="250" height="300" />
  </a>
um dann das bild responsiv zu nutzen, wie ich das da hatte oder habe ich da jetzt ein denkfehler?

wenn ich ehrlich bin, dann würde mir das diagonale auch nicht wirklich optisch zusprechen :D
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
Ich empfehle auch, das Ganze gleich responsiv anzulegen. Wenn man sich den Link mit xlink ansieht, erkennt man, dass dort schon ein Rechteck mit opacity="0" drin ist. Füllt man das statt dessen mit einer Farbe, hat man gleich auch die grafische Darstellung des lang gesteckten Rechtecks für eine Straße und es braucht kein Bitmap mehr, um die Straße darzustellen.
 

isaack

Mitglied
also habe mir das jetzt mal ein wenig umgebstelt.
lasse mir die areas so abspeichern:

PHP:
$areas.=" 
            <a xlink:href=\"https://de.wikipedia.org/wiki/George_Washington\" style=\"fill:blue\"> 
                <rect x=\"$x1\" y=\"$y1\" opacity=\"0\" width=\"$x2\" height=\"20\"  style=\"fill: blue;\"></rect> 
                <text x=\"500px\" y=\"$yt1\" font-family=\"Verdana\" width=\"20\" font-size=\"15\" fill=\"red\">$strassenNamen[$streetID]</text> 
            </a> 
  
 ";

habe nur das problem, das ich kein background-color setzen kann. es kommt immer nur die farbe, wenn ich die maus drüber ziehe also hover los geht.
vielleicht kann mir hier noch einer weiter helfen?

edit: Anpassen von $areas;
 

Sempervivum

Erfahrenes Mitglied
Ich war auch nicht untätig und habe eine kleine Demo gemacht:
Code:
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480" version="1.1" viewBox="0 0 640 480">
    <?php
        function drawRoad($href, $xstart, $ystart, $length, $width, $fillcolor, $orientation = 'h') {
            if ($orientation == 'h') {
                $x = $xstart;
                $y = $ystart - $width / 2;
                $w = $length;
                $h = $width;
            } else {
                $x = $xstart- $width / 2;
                $y = $ystart;
                $w = $width;
                $h = $length;
            }
            $txtrect = '<rect height="' . $h . '" width="' . $w;
            $txtrect .= '" x="' . $x . '" y="' . $y;
            $txtrect .= '" fill="' . $fillcolor . '">';
            echo '<a xlink:href="' . $href . '">' . $txtrect . '</a>';
        }
        drawRoad('https://wiki.selfhtml.org', 20, 20, 200, 10, '#ff0000', 'h');
        drawRoad('https://wiki.selfhtml.org', 20, 40, 200, 10, '#ff0000', 'h');
        drawRoad('https://wiki.selfhtml.org', 20, 50, 200, 10, '#0000ff', 'v');
    ?>

    </svg>
Mit der Funktion kann man Straßen horizontal oder vertikal zeichnen. Fehlt nur noch der Text, der sich etwas schwieriger gestalten könnte, wenn man ihn schön zentrieren will.
 

Sempervivum

Erfahrenes Mitglied
Zentrierung des horizontalen Textes war einfacher als ich dachte:
Code:
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480" version="1.1" viewBox="0 0 640 480">
    <?php
        function drawRoad($href, $name,
            $xstart, $ystart, $length, $width,
            $fillcolor, $orientation = 'h') {
            if ($orientation == 'h') {
                $x = $xstart;
                $y = $ystart - $width / 2;
                $w = $length;
                $h = $width;
                $xtxt = $xstart + $length / 2;
                $ytxt = $ystart;
            } else {
                $x = $xstart- $width / 2;
                $y = $ystart;
                $w = $width;
                $h = $length;
            }
            $text = '<text alignment-baseline="central" text-anchor="middle"';
            $text .= ' fill="white"';
            $text .= ' x="' . $xtxt . '" y="' . $ytxt . '">';
            $text .= $name . '</text>';
            $rect = '<rect height="' . $h . '" width="' . $w;
            $rect .= '" x="' . $x . '" y="' . $y;
            $rect .= '" fill="' . $fillcolor . '">';
            $rect .= '</rect>';
            echo '<a xlink:href="' . $href . '">' . $rect . '</a>';
            echo $text;
        }
        drawRoad('https://wiki.selfhtml.org', 'Hauptstraße', 20, 20, 200, 20, '#ff0000', 'h');
        // drawRoad('https://wiki.selfhtml.org', 20, 40, 200, 10, '#ff0000', 'h');
        // drawRoad('https://wiki.selfhtml.org', 20, 50, 200, 10, '#0000ff', 'v');
    ?>

    </svg>
 

Sempervivum

Erfahrenes Mitglied
Jetzt die Beschriftung der vertikalen Straßen:
Code:
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480" version="1.1" viewBox="0 0 640 480">
    <?php
        function drawRoad($href, $name,
            $xstart, $ystart, $length, $width,
            $fillcolor, $orientation = 'h') {
            if ($orientation == 'h') {
                $x = $xstart;
                $y = $ystart - $width / 2;
                $w = $length;
                $h = $width;
                $xtxt = $xstart + $length / 2;
                $ytxt = $ystart;
                $transform ='';
            } else {
                $x = $xstart- $width / 2;
                $y = $ystart;
                $w = $width;
                $h = $length;
                $xtxt = $xstart + $length / 2;
                $ytxt = $ystart - $width / 2;
                $transform = ' transform="rotate(90,' . $x . ',' . $y . ')"';
            }
            $text = '<text alignment-baseline="central" text-anchor="middle"';
            $text .= ' fill="white"';
            $text .= ' x="' . $xtxt . '" y="' . $ytxt . '"';
            $text .= $transform . '>';
            $text .= $name . '</text>';
            $rect = '<rect height="' . $h . '" width="' . $w;
            $rect .= '" x="' . $x . '" y="' . $y;
            $rect .= '" fill="' . $fillcolor . '">';
            $rect .= '</rect>';
            echo '<a xlink:href="' . $href . '">' . $rect . '</a>';
            echo $text;
        }
        drawRoad('https://wiki.selfhtml.org', 'Hauptstraße', 20, 20, 200, 20, '#ff0000', 'h');
        drawRoad('https://wiki.selfhtml.org', 'Unterstraße', 20, 60, 200, 20, '#ff0000', 'h');
        drawRoad('https://wiki.selfhtml.org', 'Oberstraße', 20, 80, 200, 20, '#0000ff', 'v');
    ?>

    </svg>
Hinterher ist man immer klüger: Besser wäre es gewesen, das Rechteck und den Text einheitlich zu zeichnen und bei vertikaler Anordnung gemeinsam zu drehen. Dann wäre es auch kein Problem, diagonale Straßen zu zeichnen.
 

Sempervivum

Erfahrenes Mitglied
Besser wäre es gewesen, das Rechteck und den Text einheitlich zu zeichnen und bei vertikaler Anordnung gemeinsam zu drehen.
Das habe ich umgesetzt:
Code:
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480" version="1.1" viewBox="0 0 640 480">
    <?php 
        function drawRoad($href, $name,
                $xstart, $ystart, $length, $width,
                $fillcolor, $rot = 0) {
            $x = $xstart;
            $y = $ystart - $width / 2;
            $w = $length;
            $h = $width;
            $xtxt = $xstart + $length / 2;
            $ytxt = $ystart;
            $transform = ' transform="rotate(' . $rot . ',' . $x . ',' . $y . ')"';
            $text = '<text alignment-baseline="central" text-anchor="middle"';
            $text .= ' fill="white"';
            $text .= ' x="' . $xtxt . '" y="' . $ytxt . '"';
            $text .= $transform . '>';
            $text .= $name . '</text>';
            $rect = '<rect height="' . $h . '" width="' . $w;
            $rect .= '" x="' . $x . '" y="' . $y;
            $rect .= '" fill="' . $fillcolor . '"';
            $rect .= $transform . '>';
            $rect .= '</rect>';
            echo '<a xlink:href="' . $href . '">' . $rect . '</a>';
            echo $text;
        }
        drawRoad('https://wiki.selfhtml.org', 'Hauptstraße', 20, 20, 200, 20, '#ff0000', 0);
        drawRoad('https://wiki.selfhtml.org', 'Unterstraße', 20, 60, 200, 20, '#ff0000', 90);
        drawRoad('https://wiki.selfhtml.org', 'Diagonalstraße', 80, 80, 200, 20, '#0000ff', 45);
    ?>
    </svg>