In den letzten Jahren ist die Nachfrage unserer Kunden nach interaktiven Maps gestiegen, sei es für Einkaufszentren, Wohnanlagen oder einfach nur geografische Maps.
Vor kurzem wurden wir beauftragt, einen Masterplan für eine Immobilie zu erstellen. Sie benötigten zwei Versionen des Masterplans: eine Map, um die verfügbaren Wohnimmobilien hervorzuheben und eine Map für ihre Gewerbeimmobilien. Jedes Plot musste seine eigene, gut definierte Form und einen Schwebezustand haben.
Was wir vorhaben.
In diesem Tutorial werden wir Vektorgrafiken im Browser mit einer Kombination aus SVG (Scalable Vector Grapics) und einem ausgezeichneten JavaScript-Framework mit der Bezeichnung Raphael zeichnen, um eine Map des Vereinigten Königreichs zu erstellen.
SVG wird in den meisten Browsern außer IE8 und darunter unterstützt. Raphael macht das Zeichnen von Vektorgrafiken einfach und vor allem browserübergreifend kompatibel. Es unterstützt derzeit Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ und Internet Explorer 6.0+.
Das Vereinigte Königreich besteht aus England, Schottland, Wales, Nordirland und einer ziemlich vollständigen Liste von Tausenden kleinerer Inseln. Für den Zweck dieses Tutorials werden wir uns nur auf England und insbesondere seine Regionen konzentrieren. Wir haben England in neuen Regionen aufgeteilt: Nordwesten, Nordosten, Yorkshire und Humber, West Midlands, East Anglia, Greater London, Southeast und West Country.
Das SVG-Bild vorbereiten.
Sie benötigen zunächst ein SVG-Bild. Dieses können Sie aus verschiedenen Quellen beziehen wie z.B. Wikipedia.
Später, wenn wir Raphael benutzen, wird es und nach den Abmessungen für unsere Map fragen. Wir würden empfehlen, dass Sie eine neue Zeichenfläche in Adobe Illustrator in ihren bevorzugten Abmessungen erstellen und dann ihre Vektorobjekte entsprechend skalieren. Verwenden Sie Datei > Speichern unter, um ihre Map als .svg zu speichern, woraufhin ihnen das Dialogfenster SVG-Optionen angezeigt wird. Klicken Sie auf den Button „SVG-Code“, mit der Sie ihr Bild im XML-Format in SVG speichern können.
Konvertieren Sie das SVG in ein Raphael-freundliches Format.
Ihre .svg-Datei wird voll von Tags sein, die jeweils ein d`d`-Attribut mit Pfaddaten enthalten. Raphael verbraucht keine SVG-Daten, es verwendet nur die Pfaddaten, also verwenden wir einen SVG zu Raphael Konverter, um unseren Raphael JavaScript-Code auszugeben.
Fügen Sie den JavaScript-Code in eine leere Datei ein und speichern Sie ihn an einem geeigneten Ort, z.B. im js-Verzeichnis ihrer Website.
Wie sollte ihre JavaScript-Datei aussehen?
An dieser Stelle wird ihr JavaScript wie Spaghetti aussehen, obwohl es nicht unbedingt notwendig ist, würde ich ihnen raten, es zu entwirren und zu ordnen, um die zukünftigen Dinge zu klären.
Benennen Sie das erste Argument, das Raphael nimmt, um mit der ID ihres HTML-Elements zu korrespondieren, in dem sich die Map befindet:
Ändern Sie das zweite und dritte Argument in die Breite und Höhe, die Sie ursprünglich bei der Erstellung ihrer Zeichenfläche in Illustrator gewählt haben.
Benennen Sie ihre Variablen um, um sie beschreibender zu gestalten oder fügen Sie zumindest Kommentare über jede Zeile hinzu, um anzugeben, welcher Pfad welchem Teil ihrer Map entspricht:
Erstellen Sie ein Array mit einem geeigneten Namen, wie z.B. „Regionen“ in diesem Beispiel und schieben Sie dann jeden Pfad zu diesem Array weiter, während Sie fortfahren.
Häufig verwenden Designer Gruppen in Illustrator, um Ebenen zu gruppieren, um sie zu verschieben und leichter zu manipulieren. Diese Gruppen übersetzen ihren Code, aber sie sind nicht notwendig. Ich habe alle Code-Bits, welche Sie entfernen können, in einen Screenshot unten packt:
Das bedeutet, dass Sie auch Referenzen auf diese Gruppen aus ihren Pfadvariablen entfernen können wie zum Beispiel:
Entfernen Sie alle unnötigen Attribute aus ihren Pfaden, wie z.B. „id“, „nodetypes“ & „parent“.
Obwohl Datenargumente nicht unbedingt notwendig sind, können sie nützlich sein, wenn Sie die Pfadobjekte später in ihrem JavaScript manipulieren möchten. Wir haben die ID von Yorkshires Pfad in etwas Beschreibenderes geändert, wie zum Beispiel „Himmel auf Erden“. Später, wenn wir über unser Array „Regionen“ iterieren, können wir diese Daten-ID als Operanden verwenden, um sie mit dem aktuellen Objekt in dem Array zu vergleichen. Das wird später noch sinnvoller sein.
Sie werden nun mit einem wirklich schönen Abschnitt von JavaScript-Code konfrontiert, der wirklich verständlich und weniger aufgebläht ist.
Verwaltung vieler Pfade.
Wenn wir viele Objekte haben, dann ist es wirklich nützlich, mit regulären Ausdrücken vertraut zu sein, da Sie Codeabschnitte viel einfacher finden und ersetzen können. Seien Sie vorsichtig bei der Verwendung vom Massensuche und -ersatz, da das Debuggen fehlender Codeteile ein Alptraum sein kann, wenn Sie mit Hunderten von Objekten umgehen.
Die Pfade manipulieren.
Da wir die Daten-ID auf jedem unserer Pfade früher beibehalten haben, können wir unsere Objekte neu gestalten. Wir haben ein wenig JavaScript verwendet, um über das Regionen-Array zu iterieren und dann die Füllfarbe ändern, wenn wir den Yorkshire-Pfad gefunden haben.
Das Markup.
Das einzige HTML, das Sie benötigen, ist das Element, in dem ihre interaktive Map angezeigt werden soll, sowie die Verweise auf das Raphael-Skript und ihre JavaScript-Datei mit ihrem benutzerdefinierten Raphael-Code.
Im folgenden Beispiel haben wir dem Container der Map eine Klasse hinzugefügt, um ein Hintergrundbild hinzuzufügen, das die anderen Teile des Vereinigten Königreichs zeigt, um einen Kontext zu schaffen.
Wenn Sie ihre Seite laden, sehen Sie das folgende Ergebnis.
Da jeder einen Show-off liebt, fügen wir etwas mehr JavaScript hinzu, damit der Name der Region unter der Map erscheint, wenn wir über die Regionen fahren.
Hinweis: Wir haben jedem Pfad ein weiteres Datenattribut hinzugefügt, genannt „Region“, um einen lesbaren Namen anzuhängen. Um mehr als ein Attribut zu verwenden, müssen Sie es mit geschweiften Klammern als Objekt übergeben:
Wir fügen ein wenig mehr JavaScript hinzu, um Mouseover- und Mouseout-Events an jeden Pfad anzuhängen und damit ist unsere Map vollständig.
Vielen Dank für ihren Besuch.