Strassenkarte mit klickbaren Strassen

isaack

Mitglied
Halle zusammen,
ich bin ein wenig am überlegen und brauche eigentlich nur ein paar denkanstöße.
ich möchte gern eine kleine karte machen mit strassennamen, soll wie ein stadtplan aussehen, nur mit dem unterschied das es eine einfache rautenform haben soll.
es sind insgesammt 20 strassen. die strassen sollen allerdings per php farblich unterlegt werden und klickbar sein und einem link dann folgen.
wie kann ich das den am besten umsetzen?

hoffe auch, das ich hier auch richtig bin und nicht in die js ecke oder jquery ecke muss.

danke schonmal für die ratschläge.

beste grüße eric
 

StormChaser

Mitglied
Interessantes Projekt.
Aber um es nochmal zu verdeutlichen:
PHP findet auf dem Server statt.
Die Klicks auf die Karte geschehen beim Client.
Folglich muss der Client die Klicks auswerten - zumindest X/Y-Koordinate in irgendeinem definierten Bezugssystem - und an den Server schicken.
Der Server kann dann die weitere Ausgabe aufbereiten.

Am einfachsten wäre es mit Sempervivums Vorschlag umsetzbar; das wäre sogar mit statischen HTML-Seiten möglich.

Soll das mehr "interaktiv" werden, führt vermutlich kein Weg an JS/AJAX vorbei.

P.S.: Hast Du schon einen Screenshot vom "Stadtplan"? Fände ich ganz spannend mal anzusehen :)
 

isaack

Mitglied
naja am stadtplan ist nicht viel dabei.
soll halt wirklich nur eine raute sein, mit 10 vertikalen und 10 senkrechten linien.
die sollen aber durch verschiedene datenbankeinträge auch farblich unterteilt werden.

bei dem vorschlag von sempervivum stell ich mir die frage, ob es da dann auch eine möglichkeit gibt, die eventuell diagonal klickbar zu machen oder ob das dann einfach zu viel aufwand gibt.

habe da mal so eine skizze angehängt, wie ich das eigentlich machen wollte.
bitte nicht lachen, aber mit der maus und mal schnell auf die schnelle, habe ich das jetzt nicht hinbekommen :)
ist halt wirklich die frage, ob es diagonal gehen würde. es würden sich ja dann auch die straßen überschneiden.
 

Anhänge

  • skizze.png
    skizze.png
    143,7 KB · Aufrufe: 3

Sempervivum

Erfahrenes Mitglied
bei dem vorschlag von sempervivum stell ich mir die frage, ob es da dann auch eine möglichkeit gibt, die eventuell diagonal klickbar zu machen oder ob das dann einfach zu viel aufwand gibt.
Ja, bei Imagemap gibt es die Möglichkeit, den klickbaren Bereich als Polygon anzulegen, dann kannst Du nicht nur diagonale Bereiche definieren, sondern beliebig komplizierte Flächen. Z. B. auch eine Straße, die um die Ecke oder um eine Kurve geht.
Bevor Du jedoch mit Imagemap einsteigst, bedenke eine Einschränkung, auf die auch bei Selfhtml hingewiesen wird: Imagemaps sind nicht responsiv, d. h. zunächst mal von der Größe her fest.
 

StormChaser

Mitglied
Versuchen würde ich es erstmal mit PHP: imagepolygon - Manual
bzw
PHP: imagefilledpolygon - Manual

Dafür würde ich mir aber vermutlich noch ein Tool schreiben, um die Punkte durch anklicken in ein Array zu schreiben, falls es zu unregelmässig ist, sonst eben per Schleifendurchläufe berechnen.

Nachteil ist, dass es nur farbliche Bereiche in einer rechteckigen Grafik sind, Dann bräuchte man wieder eine JS-Routine, die die Farbe unter der Maus ermittelt (habe ich schon irgendwo gesehen), und daraus kann dann die Strasse ermittelt werden.

Vielleicht/wahrscheinlich gibt es noch einfachere Wege - die finde ich aber immer erst, wenn ich das Umständliche schon durch habe :)
 

isaack

Mitglied
ich schätze mal, wenn das ganze dann noch responsiv werden soll, ist es schon fast ein 10 seiten script dazu um die punkte zu berechnen oder?
aber ich denke mal für den anfang sollte es schon reichen wenn man es nicht responsiv macht :)
 

isaack

Mitglied
na wunderbar :)
da werde ich mich mal direkt an das werk machen :)
ich danke euch für eure hilfe und würde mich noch mal melden, sollte ich nicht weiter kommen :)
 

isaack

Mitglied
so habe es jetzt erst einmal ein wenig probiert.
komme aber jetzt ein wenig an grübeln. ich würde gern die einzelnen <rect> mit einem titel besetzen der dann auch angezeigt wird. so das man halt die straßennamen dann sehen kann.

bis jetzt habe ich es folgendermaßen:

HTML:
<figure id="imagemap"> 
<svg viewBox="0 0 1000 1000" > 
  <defs> 
    <style> 
      rect:hover { 
        fill: white; 
        opacity:0.5; 
      } 
    </style> 
  </defs>  
  
  <image width="1000" height="1000" xlink:href="image/str.png"> 
    <title>Straßen dieser Stadt</title> 
  </image>     
   
  <a xlink:href="#" onclick="alert('hallo');"> 
    <rect x="0" y="12" opacity="0" width="996" height="22"> 
        <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text> 
    </rect> 
  </a> 
  <a xlink:href="https://de.wikipedia.org/wiki/Thomas_Jefferson"> 
    <rect x="550" y="225" opacity="0" width="200" height="300" />da ist ein kopf 
  </a> 
  <a xlink:href="https://de.wikipedia.org/wiki/Theodore_Roosevelt"> 
    <rect x="750" y="375" opacity="0" width="200" height="300" /> 
  </a> 
  <a xlink:href="https://de.wikipedia.org/wiki/Abraham_Lincoln"> 
    <rect x="999" y="375" opacity="0" width="200" height="300" /> 
  </a> 
</svg>

allerdings wird mir das Hello leider nicht angezeigt. :-(
kann mir da vielleicht einer sagen warum?