✔ Strassenkarte mit klickbaren Strassen

[StormChaser]

Das sieht doch schon mal gut aus.

 

[Sempervivum]

Danke. Das Zentrieren der Texte war doch recht einfach. Was ich dunkel erinnerte im Zusammenhang mit Text in SVG war der automatische Zeilenumbruch und das Ausrichten der Zeilen, wo es etwas komplizierter wird.

 

[StormChaser]

Mir ist grad aufgefallen, dass die Texte selbst nicht anklickbar sind. Liegt das an irgendeiner Reihenfolge? Kann man da irgendwas machen, dass die anklickbar werden?

edit;
Ja: echo '<a xlink:href="' . $href . '">' . $rect . $text .'</a>';

 

[Sempervivum]

Genau, ich habe es inzwischen auch bemerkt. So funktioniert es.

 

[StormChaser]

Mal eine kleine Spielerei mit SVG zum Stadtplan.
Momentan gibt es auch hier viel Gepixel, um die diagonalen Strassen in das vorhandene Strassengeflecht einzupassen.
Dazu kommt noch, dass bei unterschiedlichen StrassenFarben die Überschneidungen nicht wirklich ansprechend sind.
Da gibt es doch bestimmt auch irgendetwas, um bei Winkel X der Strasse das Strassenende senkrecht abschliessen zu lassen ? (sofern es auf eine senkrechte Strasse trifft; falls die auch noch gewinkelt ist, wird's ja noch schwieriger.)

 

[Sempervivum]

Wenn es um die Optik geht, würde ich eher empfehlen, die Enden abzurunden:

        function drawRoad($href, $name,
                $xstart, $ystart, $length, $width,
                $fillcolor, $rot = 0) {
            $x = $xstart - $width / 2;
            $y = $ystart - $width / 2;
            $rx = $ry = $width / 2;
            $w = $length + $width;
            $h = $width;
            $xtxt = $x + $length / 2;
            $ytxt = $ystart;
            $transform = ' transform="rotate(' . $rot . ',' . $xstart . ',' . $ystart . ')"';
            $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 .= '" rx="' . $rx . '" ry="' . $ry;
            $rect .= '" fill="' . $fillcolor . '"';
            $rect .= $transform . '>';
            $rect .= '</rect>';
            echo '<a xlink:href="' . $href . '">' . $rect . $text . '</a>';
        }
        function drawRoadStartDest($href, $name,
                $xstart, $ystart, $xend, $yend, $width,
                $fillcolor) {
            $length = hypot($xend - $xstart, $yend - $ystart);
            $angle = asin(($yend - $ystart) / $length);
            $rot = ($angle / pi()) * 180;
            drawRoad($href, $name,
                $xstart, $ystart, $length, $width,
                $fillcolor, $rot);
        }
        drawRoad('https://wiki.selfhtml.org', 'Hauptstraße', 20, 20, 200, 20, '#ff0000', 0);
        drawRoad('https://wiki.selfhtml.org', 'Unterstraße', 20, 20, 200, 20, '#ff0000', 90);
        drawRoadStartDest('https://wiki.selfhtml.org', 'Startzielstraße', 20, 20, 220, 220, 20, '#0000ff');
    ?>

Ich habe noch eine Funktion hinzu gefügt, um eine Straße auch nach Start und Ziel zu definieren.

 

[StormChaser]

Das mit der Winkelberechnung ist natürlich super

Abgerundet sieht auch nicht schlecht aus. Kann man bestimmt für viele selbstgezeichnete Anfahrtskizzen benutzen.

 

[isaack]

so ich habe mich jetzt auch mal noch ein wenig hingetzte und die functionen von sempervivum genommen.
eins ist mir dabei aufgefallen:
du schreibst folgendes:

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

wenn du hier

width="640" height="480"

raus nimmst, dann wird das ganze auch responsiv (kleiner tip vom anfänger ;-) )

dann habe ich mir die functionen auch noch in eine class geschrieben, zwar nicht bilderbuchmäßig aber es erfüllt jetzt voll und ganz den dienst, den ich gern haben wollte

hier ein auszug der class:

private function drawRoad($id, $name, $xstart, $ystart, $length, $width, $fillcolor, $rot = 0) {
        $x = $xstart - $width / 2;
        $y = $ystart - $width / 2;
        $rx = $ry = $width / 2;
        $w = $length + $width;
        $h = $width;
        $xtxt = $x + $length / 2;
        $ytxt = $ystart+2;
        $transform = ' transform="rotate(' . $rot . ',' . $xstart . ',' . $ystart . ')"';
        $text = '<text alignment-baseline="central" text-anchor="middle" style="font-size:8px;"';
        $text .= ' fill="black"';
        $text .= ' x="' . $xtxt . '" y="' . $ytxt . '"';
        $text .= $transform . '>';
        $text .= $name . '</text>';
        $rect = '<rect height="' . $h . '" width="' . $w;
        $rect .= '" x="' . $x . '" y="' . $y;
        $rect .= '" rx="' . $rx . '" ry="' . $ry;
        $rect .= '" fill="' . $fillcolor . '" fill-opacity="0.4"';
        $rect .= $transform . '>';
        $rect .= '</rect>';
        $this->karte .= '<a xlink:href="#" onclick="alert('. $id .');">' . $rect . $text . '</a>';
    }
    
    private function drawRoadStartDest($name, $xstart, $ystart, $xend, $yend, $width, $fillcolor) {
        $length = hypot($xend - $xstart, $yend - $ystart);
        $angle = asin(($yend - $ystart) / $length);
        $rot = ($angle / pi()) * 180;
        drawRoad($href, $name, $xstart, $ystart, $length, $width, $fillcolor, $rot);
    }
    
    public function StrResponsiv(){
        $str = $this->db->get_results("SELECT * FROM ". STR ." ORDER BY rand()");
        $y = 20;
        for($i = 1; $i <= 20; $i++){
            if($this->db->num_rows("SELECT id FROM ". STRI ." WHERE str_id = '". $str->{$i}->id ."' AND std_id = '". $this->user['stadt'] ."' AND besitzer = '". $this->session['uid'] ."' ") == 1){
                $bgcolor = 'green';
            }else{
                $bgcolor = 'red';
            }
            if($i <= 10){
                $this->drawRoad($str->{$i}->id,$str->{$i}->name, 0, $y, 500, 10, $bgcolor);
            }elseif($i > 10){
                $this->drawRoad($str->{$i}->id,$str->{$i}->name, $y, 0, 500, 10, $bgcolor, 90);
            }
            if($i == 10){ $y = 20; }else{ $y += 50;}
        }
        
        return $this->karte;
    }

damit wird dann auch die straße in rot oder grün angezeigt. so kann man gut unterscheiden, ob diese schon in dem besitz ist oder noch nicht und eine transparenz ist auch noch dazu gekommen

ich danke euch beiden wie verrückt für die hilfe die ihr hier gegeben habt