‫-: Lassen Sie uns nun mit dem Aufbau unserer Kartenintegration fortfahren.
‫Kommen wir also nun zu Mapbox.
‫Und so verwende ich jetzt Mapbox anstelle von Google Maps und
‫das liegt daran,
‫dass Google Maps seit einiger Zeit tatsächlich
‫eine Kreditkarte von Ihnen verlangt, um
‫Google Maps nutzen zu können.
‫Und ich denke, das ist keine gute Idee für einen Kurs wie
‫diesen, und eigentlich mag ich Mapbox auch sehr,
‫und daher denke ich, dass es perfekt für uns ist, um es in diesem Kurs zu verwenden.
‫Sie haben auch eine ausgezeichnete
‫Dokumentation, die wir gleich hier ausprobieren werden.
‫Aber jetzt beginnen wir und erstellen ein neues Konto.
‫Also einfach hier klicken, um mit dem Bauen zu beginnen.
‫Und dann erstellen Sie natürlich Ihr kostenloses Konto.
‫Ich habe bereits einen und pausiere
‫das Video an dieser Stelle einfach, um dieses Konto zu erstellen.
‫Und nachdem Sie Ihr Konto erstellt haben,
‫sollten Sie auf einer Seite landen, die ungefähr so aussieht.
‫Jetzt, wenn Sie dieses Video
‫ansehen, könnte sich diese
‫Seite hier natürlich geändert haben, und
‫wahrscheinlich hat
‫sie sich geändert, aber jetzt müssen wir
‫einen Link finden, der so etwas sagt, also
‫installieren Sie die Karten-Softwareentwicklung kit, also diese hier, oder auch Mapbox
‫integrieren, was ziemlich ähnlich sein sollte.
‫Also klicke ich hier auf die Karten für JavaScript installieren.
‫Und was wir hier
‫tun werden, ist das Mapbox-CDN, also
‫das Content Delivery Network,
‫und vorerst
‫zumindest nicht den NPM-Modulbundler.
‫Der erste Schritt, wie es hier heißt, besteht
‫also darin, diese Dateien hier und in die had HTML-Datei aufzunehmen.
‫Und hier brauchen wir jetzt
‫die Extended Head-Technik, die wir vorher hatten.
‫Und da brauchen wir
‫jetzt eigentlich die Erweiterung der Kopftechnik.
‫Denken Sie hier in
‫der Tour daran, wie wir das eigentlich aus dem Kopf geschafft haben.
‫Aber jetzt brauchen wir noch ein paar Sachen, die
‫wir an den Kopf anhängen müssen.
‫Das ist also dieses Skript und auch dieses Stylesheet.
‫Lassen Sie uns das hier schnell in Mops übersetzen.
‫Und der Link auch, und das
‫war's dann auch schon.
‫Lassen Sie uns
‫diesen Teil loswerden und gehen wir hier zum nächsten Schritt zurück.
‫Als nächstes müssen wir diesen JavaScript-Code hier in
‫unsere Datei kopieren.
‫Und natürlich zu unserem Drehbuch.
‫Also gleich hier in Mapbox. js.
‫Jetzt werden Sie dieses Zugriffstoken wahrscheinlich zu diesem Zeitpunkt
‫noch nicht haben, und
‫daher war es entweder erforderlich, dass Sie es bereits tun,
‫oder ich werde Ihnen in einer Sekunde zeigen, wie es geht.
‫Lassen Sie uns diesen Teil hier einfach einrücken.
‫Damit sind wir eigentlich schon startklar.
‫Damit sollte eigentlich schon eine Karte
‫erstellt und auf unserer Seite angezeigt werden.
‫Das liegt daran, dass der Container hier auf map gesetzt ist.
‫Und das bedeutet, dass die Karte auf
‫ein Element mit der ID von Karte gelegt wird.
‫Deshalb haben wir hier in unserer Tour dieses
‫Element hier, oh, wo
‫ist das?
‫Hier haben wir also ein Element mit ID-Map.
‫Der Grund dafür ist, dass wir hier in Mapbox eigentlich
‫ein Element mit einer
‫ID brauchen, die wir dann hier angeben können.
‫Und die Vorgabe ist map,
‫und so habe ich es in html genannt.
‫Dann haben wir hier auch diesen Standardstil,
‫den wir gleich ändern werden.
‫Kehren wir vorerst zu unseren Anweisungen hier
‫zurück, und so heißt es, dass wir hier fertig sind.
‫Aber jetzt gehen wir tatsächlich zu
‫unserem Konto zurück und erstellen das Token, das wir
‫benötigen, um tatsächlich auf Mapbox zugreifen zu können.
‫Bitte kopieren Sie nicht einfach
‫mein Token, das wird für Sie nicht gut funktionieren.
‫Aber erstellen Sie stattdessen Ihre eigenen.
‫Sie können einfach einen neuen Namen dafür erstellen.
‫Nennen wir es einfach so.
‫Und dann hier Token erstellen.
‫Dann geben Sie
‫Ihr Passwort ein und können dann dieses Token verwenden.
‫Auch hier bin ich mir nicht sicher, ob dieses
‫Token bereits für Sie erstellt wurde oder ob Sie wirklich
‫ein neues erstellen mussten.
‫Wie auch immer, es ist auch schön, für jedes Projekt ein Token zu
‫haben, damit Sie
‫dieses Token dann nur auf dieses Projekt beschränken können.
‫Ich habe mein Konto hier vor langer Zeit erstellt und
‫bin mir daher wieder nicht ganz sicher, wie das
‫funktioniert hat, aber egal, mit diesem Token sollten Sie jetzt loslegen.
‫Tatsächlich sollte dies jetzt bereits unsere Standardkarte anzeigen.
‫Also lasst uns neu laden, und tatsächlich ist dies unsere Standardkarte.
‫Es sieht nicht wirklich schön aus,
‫gut, wir können
‫hineinzoomen, aber der Stil ist wirklich nicht
‫so schön und passt nicht wirklich zu
‫unserer Website,
‫und natürlich haben wir auch unsere
‫Standorte nirgendwo auf der Karte eingezeichnet Karte.
‫Und darum kümmern wir uns jetzt.
‫Kehren wir zu Mapbox zurück,
‫und jetzt gehen wir in unser Designstudio.
‫Lassen Sie uns einfach hier auf "mit dem
‫Entwurf einer Karte beginnen" klicken
‫oder, falls Ihre Website
‫jetzt etwas anders aussieht, suchen Sie einfach nach dem Designstudio.
‫Vielleicht taucht es hier irgendwo auf.
‫Versuchen wir es also.
‫Hier können wir wirklich alle möglichen Dinge
‫tun, um eine Karte zu entwerfen.
‫Eigentlich ist das nicht wirklich das, was ich
‫erwartet habe, weil es ein bisschen zu komplex
‫ist, all das
‫hier zu ändern, aber es gibt einige Standardstile, ah
‫ja, danach habe ich gesucht.
‫Lassen Sie uns hier einen neuen
‫Stil erstellen, und dann können wir von dort aus einen Standard auswählen.
‫Und was ich wirklich will, ist dieser leichte Stil.
‫Also kreiere, und eigentlich bin ich sehr zufrieden
‫damit, wie es aus dem Karton aussieht.
‫Nun, aus irgendeinem Grund sehe ich hier
‫nichts, okay, das liegt daran, dass es ins Meer gezoomt wurde.
‫Aber egal, lass uns jetzt hier irgendwo reinzoomen, und ich finde
‫es sieht schon ganz nett aus,
‫also fügen wir hier einfach einen Namen hinzu,
‫und deshalb
‫nenne ich es Natour's Video Recording, weil ich schon
‫einen Natour-Stil habe, aber du natürlich kann
‫man es nennen wie man will.
‫Bestätigen wir hier den Namen, gehen wir zurück und dann
‫hier weiter zum Teilen und Verwenden.
‫Und wir wollen nicht teilen, sondern nutzen.
‫Irgendwo hier unten sollten wir unsere Style-URL sehen, und also,
‫ja, das ist es.
‫Es muss sich also um eine URL handeln, die grundsätzlich mit Mapbox beginnt.
‫Kopieren wir es einfach, gehen zurück und ersetzen dann den
‫Stil, den wir hier als Standard haben, durch den,
‫den wir gerade erstellt haben.
‫Speichern Sie es,
‫und
‫ja, das sieht viel besser aus.
‫Und es ist genau der Stil, den wir gerade geschaffen haben.
‫So können wir jetzt hineinzoomen, herauszoomen oder
‫umgekehrt, wir können die Karte
‫an jede beliebige Stelle schwenken und
‫wir können auch eine Menge Eigenschaften und Optionen für
‫diese Karte definieren.
‫Wenn wir die Karte gerade laden,
‫sieht sie immer
‫gleich aus, immer zentriert hier in Boston.
‫Aber wir können das ändern, indem wir hier
‫das Zentrum angeben.
‫Also müssen wir ein Array von zwei Koordinaten eingeben.
‫Holen wir uns tatsächlich diejenige aus LA,
‫die wir zuvor in Postman verwendet haben.
‫Also
‫genau das, aber eigentlich ist Mapbox genau wie MongoDB,
‫insofern, als zuerst ein Längen- und dann ein
‫Breitengrad erforderlich ist.
‫Wir müssen sie hier umstellen.
‫Und schauen wir uns an, was wir bekommen.
‫Und, na ja, das bringt uns nicht wirklich weiter.
‫Lassen Sie uns hier auch eine Zoomstufe angeben.
‫Sagen wir vier.
‫Vielleicht behebt es das.
‫Und tatsächlich war das diese Illusion.
‫Es gibt also verschiedene Zoomstufen.
‫Zum Beispiel können wir hier auch einen
‫ausprobieren, und der sollte dann viel stärker hineingezoomt oder vielleicht
‫herausgezoomt werden, da bin ich mir nicht ganz sicher.
‫Ah, okay, das zoomt es wirklich ganz heraus.
‫Sagen wir hier zum Beispiel 10,
‫und wie Sie sehen, spiele ich wirklich
‫gerne mit dieser Art
‫von Sachen herum, und ja, bei 10 ist es jetzt wirklich nah gezoomt.
‫Wir können auch sagen, dass es nicht interaktiv sein soll,
‫und das ist sehr einfach.
‫Setzen wir Interactive auf false.
‫Und dann wird Ihre Karte
‫im Grunde wie ein einfaches Bild auf Ihrer Website aussehen.
‫Wie Sie sehen, kann ich hier nichts scrollen, und
‫ich kann es auch nicht schwenken.
‫Also kann ich jetzt nichts machen.
‫Und dies sind eigentlich nur ein paar Optionen, die wir
‫einstellen können.
‫Kehren wir hier zu
‫Mapbox zurück, zur Dokumentation und zu Mapbox-JavaScript.
‫Hier erhalten Sie die gesamte Dokumentation für
‫wirklich alles, was Sie mit der JavaScript-Version von Mapbox machen können.
‫Was ich Ihnen nur zeigen wollte, ist, dass das Zeug,
‫das ich Ihnen gerade gezeigt habe, tatsächlich hier ist.
‫Wir haben also den Container, den wir spezifiziert haben,
‫wir haben den Stil
‫und wir haben wirklich eine Menge Zeug.
‫So interaktiv, und wenn
‫Sie möchten, können Sie natürlich mit all diesen
‫Dingen herumspielen.
‫Ich wollte Ihnen nur zeigen, dass Sie
‫auf diese Weise mehr über Mapbox erfahren können.
‫Nun, wir wollen eigentlich nichts davon.
‫Weil wir die Karte nirgendwo zentrieren möchten,
‫sondern die Position der
‫Karte basierend auf unseren Tour-Standortpunkten automatisch ermitteln soll.
‫Was wir jetzt tun werden,
‫ist, alle Orte für eine bestimmte Tour auf der Karte
‫zu platzieren und dann der Karte
‫zu erlauben, automatisch herauszufinden, welcher Teil der Karte angezeigt
‫werden soll, um alle diese Punkte richtig einzupassen.
‫Als erstes müssen wir eine
‫gebundene Variable erstellen.
‫Bounds gleich einer neuen Mapbox GL. Breitengrad-Längengrenzen.
‫Und wir erhalten Zugriff auf dieses Mapbox-Objekt, weil
‫wir die Mapbox-Bibliothek am Anfang unserer
‫Seite eingefügt haben.
‫Genau
‫hier, einschließlich dieses Skripts
‫hier, also dieser Mapbox-Bibliothek, macht
‫dies das Mapbox GL-Objekt verfügbar, das wir dann
‫auf unserer gesamten Site verwenden können.
‫Dieses Begrenzungsobjekt hier ist im Grunde
‫der Bereich, der auf der Karte angezeigt wird.
‫Wir werden dies nun um alle Standorte erweitern, die
‫sich in unserem Standort-Array befinden.
‫Und das wird ein bisschen mehr Sinn machen,
‫sobald wir damit anfangen.
‫Lassen Sie uns nun alle unsere Standorte durchgehen und
‫für jeden von ihnen eine Markierung hinzufügen.
‫Sehen wir uns
‫für jeden Standort die Sperre
‫an, und hier möchten wir eine Markierung hinzufügen.
‫Und dafür müssen wir tatsächlich ein
‫neues HTML-Element erstellen, in dieser
‫Hinsicht ist es wirklich ein bisschen auf niedrigem Niveau, aber
‫das finde ich eigentlich
‫sehr schön, weil wir so viel Kontrolle
‫darüber haben, was tatsächlich passiert in unserer Karte.
‫Und was ich Ihnen hier
‫zeige, ist eigentlich nur ein winziger Bruchteil all
‫der großartigen Dinge, die Sie mit Mapbox machen können.
‫Dies hier ist nur ein Standard-JavaScript, und
‫wir können das Element
‫create verwenden, um Elemente zu erstellen.
‫Wie der Name schon sagt,
‫und hier wollen wir ein neues Diff erstellen.
‫Und wir möchten auch einen Klassennamen vergeben und diesen
‫auf Marker setzen.
‫Und hier ist es, es ist ein Semikolon.
‫Und so haben wir im CSS dann tatsächlich
‫eine Klasse für diesen Marker.
‫Marker, hier sehen Sie das angegebene Hintergrundbild, das
‫hier dieser grüne Pin ist.
‫Dieser Pin, den Sie gleich auf der Karte sehen werden, ist
‫eigentlich ein benutzerdefiniertes Bild, das ich entworfen habe.
‫Es kommt nicht direkt von Mapbox.
‫So können Sie es wirklich an Ihren eigenen Stil und Ihre eigene
‫Marke anpassen.
‫Ich habe hier auch die Größe des Markers definiert, ja,
‫er ist wirklich anpassbar.
‫Jetzt erstellen wir tatsächlich einen neuen Marker in Mapbox, indem wir
‫new Mapbox GL sagen. Marker.
‫Und dann übergeben wir dort das Element, das wir gerade erstellt haben, also
‫L, und dann geben wir auch eine Ankereigenschaft an.
‫Was ich
‫hier auf den Grund setze.
‫Und das bedeutet, dass es die Unterseite des Elements ist,
‫und in diesem Fall die Unterseite
‫dieses Pins, der sich an der genauen GPS-Position befindet.
‫Wir könnten es auch in
‫die Mitte setzen, aber ich denke, es
‫macht mehr Sinn, dass wir das Bild
‫noch einmal öffnen, ich denke, es ist sinnvoller,
‫dass dieses Ende des Bildes wirklich auf die
‫genaue GPS-Position hinweist.
‫Das machen wir mit dieser Ankereigenschaft.
‫Das ist also
‫der Marker, und jetzt können wir einige Methoden aufrufen.
‫Im Moment weiß Mapbox nichts über die GPS-Koordinaten
‫dieses Markers.
‫Das haben wir nirgendwo eingestellt.
‫Machen wir das
‫jetzt, also stellen Sie Längengrad, Breitengrad und gleich dem
‫Standort ein. Koordinaten.
‫Denken Sie daran, dass dies hier ein Array von Längen-
‫und Breitengraden ist.
‫Genau das erwartet Mapbox.
‫Um sicher zu gehen, dass Sie es wirklich verstehen,
‫schauen wir uns die Touren an.
‫Auch hier hat jeder Standort diese Koordinateneigenschaft, und daher lesen
‫wir jetzt die Koordinaten von dort.
‫Standort. Koordinaten.
‫Und dann fügen Sie schließlich zu und dann unsere Kartenvariable hinzu.
‫Diese Karte hier ist also diese Kartenvariable, in der wir
‫unsere neue Mapbox erstellt haben. Karte gleich am Anfang.
‫Und jetzt müssen wir nur noch
‫unsere Grenzen erweitern.
‫Also Grenzen. erweitern und auch mit Standorten, oder eigentlich "loc",
‫was der aktuelle Standort ist. Koordinaten.
‫Dieser erste Teil hier fügt tatsächlich den Marker
‫hinzu, oder
‫er erstellt, lass es uns
‫noch
‫spezifischer machen, Marker
‫erstellen, dann den Marker hinzufügen und dann hier die
‫Kartengrenzen erweitern, um den aktuellen Standort einzuschließen.
‫Aber das ist noch nicht genug, denn jetzt machen
‫wir es auch so, dass die Karte tatsächlich
‫in die Grenzen passt.
‫Also Karte. passen, nein, nicht finden, sondern Grenzen einpassen,
‫und dann natürlich unser Bounds-Objekt.
‫Wütend.
‫Es ist also eine Menge Arbeit, nur einige Markierungen auf der Karte zu setzen.
‫Aber auch hier finde ich es sehr angenehm,
‫mit dieser Bibliothek zu arbeiten.
‫Und jetzt schauen wir doch mal rein und
‫ich bin mir nicht ganz sicher, ob hier alles gut gelaufen ist.
‫Und tatsächlich war es nicht so, also
‫sind unsere Karten nicht wirklich nirgendwo zu finden. Zoomen wir einfach
‫ein wenig heraus, um zu sehen, ob sie sich
‫tatsächlich irgendwo befinden, und sie
‫sind es nicht.
‫Schauen wir uns unsere Konsole
‫an, und tatsächlich ist ein Fehler aufgetreten.
‫Breitengradgrenzen sind also kein Konstruktor, und
‫tatsächlich ist es umgekehrt.
‫Auch hier erwartet Mapbox, genau wie MongoDB,
‫als Koordinaten zuerst den Längengrad und
‫dann den Breitengrad.
‫Das haben wir
‫hier in diesem Namen, und hier
‫sollte es auch so sein.
‫Also Längengrad, Breitengrad.
‫Versuchen wir es hier noch einmal.
‫Ahh, das funktioniert jetzt.
‫Sehr schön.
‫Du hast diesen schönen Zoom gesehen.
‫Das ist, was die Fit Bounds-Methode macht.
‫Es bewegt und zoomt die Karte also bis an die
‫Grenzen, damit sie tatsächlich zu unseren Markierungen passt.
‫Nun sehen Sie, dass wir diese Art von anderen Elementen hier haben,
‫die unsere Karte überlappen.
‫Und das liegt an diesem Design, das ich
‫hier mit diesen Kanten erstellt habe.
‫Aber das ist kein
‫Problem, denn wir können diese Grenzen tatsächlich manuell auffüllen.
‫Wir können hier ein Objekt übergeben,
‫also sagen wir oben 200 Pixel, unten auch
‫200 Pixel und dann
‫links und rechts 100 Pixel.
‫Und wir müssen die Pixel hier nicht angeben, ich
‫schätze, das liegt nur daran, dass ich so viel CSS schreibe.
‫Versuchen wir es noch einmal.
‫Oh, schöne Zoom-Animation, aber
‫das hat unsere Einstellungen nicht wirklich respektiert.
‫Und das liegt tatsächlich daran, dass dies nicht richtig ist.
‫Also sollten wir stattdessen ein Objekt erstellen,
‫und dann müssen wir dort die padding-Eigenschaft angeben, die
‫dann all dies hat.
‫Also machen wir das.
‫Polsterung.
‫Und jetzt, schneiden
‫Sie das aus und legen Sie es dort ab.
‫Sparen Sie hier.
‫Ein Mal noch.
‫Mann, irgendwas stimmt hier noch nicht.
‫Was ist das?
‫Ahh, und dieser Code sollte natürlich nicht hier sein.
‫Es ist nicht in der Ausdehnung, es ist tatsächlich hier in geeigneten Grenzen.
‫Hier macht es also tatsächlich Sinn.
‫Lassen Sie uns diesen Code hier korrigieren, und das macht jetzt Sinn.
‫Natürlich muss es innerhalb
‫der Anpassungsgrenzen liegen, was letztendlich die Funktion ist,
‫die das Verschieben und das Zoomen ausführt.
‫Hier sollte die Auffüllung
‫sein, und wir könnten eine Reihe anderer Optionen angeben.
‫Und wenn Sie daran interessiert
‫sind, schauen Sie sich einfach die Dokumentation an.
‫Also ein dritter Versuch
‫hier, hoffentlich habe ich es diesmal
‫richtig gemacht, ahh, und ja, das sieht viel besser aus.
‫Aber es gibt noch einige Dinge, die wir hier verbessern können,
‫denn im Moment können wir nicht einmal wissen,
‫was jeder dieser Orte ist.
‫Und deshalb wollen wir hier eigentlich eine Art Pop-Up,
‫das dann Informationen zum Standort anzeigt.
‫Nicht nur die Markierung, sondern wir möchten auch ein Pop-up hinzufügen.
‫Und das ist ein bisschen ähnlich wie das Hinzufügen des Markers,
‫also sagen wir neue Mapbox GL. Pop-up.
‫Dann geben wir wie zuvor die Koordinaten
‫dieses Pop-ups an.
‫Also das hier.
‫Dann müssen wir auch den HTML-Code für dieses Popup
‫definieren, und ich werde das jetzt mit der
‫set html-Methode tun, weil ich dann etwas
‫Inhalt direkt in diesen
‫HTML-Code einfügen kann, also set html und dann a Vorlagenstring hier.
‫Ich möchte, dass dies ein Absatz
‫ist, und die Informationen, die ich hier anzeigen möchte,
‫sind der Tag, an dem wir an diesem Ort
‫sein werden, und dann der Name des Ortes.
‫Im Grunde möchte ich also den Tag anzeigen,
‫deshalb haben wir hier diese Tageseigenschaften erstellt und
‫dann die Beschreibung.
‫Tag und dann Standort, merken Sie sich, welcher der aktuelle
‫Standort-Indie für jede Schleife ist,
‫und dann Tag,
‫Standort. Bezeichnung.
‫Sparen Sie
‫hier, das sieht jetzt viel schöner aus.
‫Und dann, genau wie bei dem anderen,
‫müssen wir auch add to und dann unsere map-Variable machen.
‫Und das wird nicht perfekt aussehen, da
‫wir einige Optionen angeben müssen, aber das Ergebnis
‫wollte ich Ihnen an dieser Stelle dennoch zeigen.
‫Sie sehen also, dass sie die Markierungen
‫jetzt tatsächlich überlappen.
‫Wir können das tatsächlich mit einer Offset-Eigenschaft beheben.
‫Wir übergeben diese Optionen gleich hier in das neue Pop-up.
‫Wir
‫sagen Offset von 30 Pixeln.
‫Und mir ist auch
‫aufgefallen, dass wir unten etwas zu viel
‫Polsterung haben, also reduzieren wir das auf 150 und wiederholen das Ganze.
‫Und so sieht das ziemlich gut aus, finde ich.
‫Wer sich also jetzt unsere
‫Seite anschaut, kann sehr schnell erkennen, was
‫für ein Reiseverlauf diese Tour sein wird.
‫Und wenn es zu viele
‫Informationen gibt, können wir diese Pop-ups auch schließen.
‫Und wir könnten dieser Karte wirklich alle möglichen Dinge hinzufügen.
‫Zum Beispiel könnten wir diese Linien hier zwischen
‫diesen Punkten erstellen und
‫sie miteinander verbinden, wie eine grüne Linie hier oder so.
‫Oder wir könnten auch die reale Route
‫von einem Punkt zum
‫anderen anzeigen, indem wir im Grunde eine Wegbeschreibung
‫verwenden, aber halten wir es hier einfach.
‫Hier bleibt mir nur
‫noch, die Zoom-Funktionalität tatsächlich zu deaktivieren.
‫Denn gerade jetzt,
‫sagen wir, wir zoomen auf
‫diese Seite, oder tatsächlich, wenn
‫wir auf dieser Seite scrollen,
‫und wenn wir dies hier erreichen
‫und dann hier weiter scrollen, scrollen wir die Karte anstelle der Seite.
‫Das ist keine gute Benutzererfahrung, und
‫so müssen wir
‫jetzt nur noch die Scrollfunktion auf dieser
‫Karte deaktivieren.
‫Wir werden den Leuten weiterhin erlauben, so herumzuschwenken, aber
‫das Zoomen wird deaktiviert.
‫Gehen wir hier zu unserer Karte und fügen Sie das hinzu.
‫Und wir verwenden keine interaktiven Standardeinstellungen, weil wir dann
‫nicht einmal die Karte schwenken könnten.
‫Aber auch das sollte zumindest erlaubt sein.
‫Die Option, die ich hier einstelle, ist Scroll Zoom false.
‫Und noch einmal, für alle möglichen Optionen,
‫die Sie hier
‫einstellen könnten, werfen Sie einfach einen Blick auf die Referenz.
‫Wenn wir also jetzt unsere Maus hier platzieren und
‫scrollen, ändert sich die Zoomstufe nicht.
‫Perfekt.
‫Wir können immer noch schwenken, und so finde ich es jetzt wirklich schön.
‫Lassen Sie uns das in einem anderen testen.
‫Sagen wir hier den Waldwanderer.
‫Und so funktioniert das immer noch.
‫Und diese hier überlappen sich irgendwie, aber
‫kein Problem, wir können sie jederzeit schließen, wenn wir wollen.
‫Schauen wir uns hier zum Beispiel Sea Explorer an.
‫Und wenn wir
‫schnell genug sind, können wir sogar
‫sehen, wie die Zoom-Animation die Karte an diese Position bewegt.
‫Okay, perfekt.
‫Ich hoffe, Sie konnten diesem Beispiel
‫bei allem, was wir in Mapbox getan haben, wirklich folgen.
‫Falls etwas nicht funktioniert, stellen Sie bitte
‫sicher, dass Sie
‫eine ähnliche Version wie
‫meine verwenden, also meine ich eine ähnliche Version der Mapbox-Bibliothek.
‫Was in meinem Fall hier die Version 0 ist. 54.
‫Deiner sollte wahrscheinlich nicht 1 sein. etwas.
‫Wenn Sie sich dieses
‫Video also lange Zeit nach dieser Aufnahme ansehen und hier eine V1
‫haben, ändern Sie dies bitte auf 0. etwas, so dass es
‫dort im Grunde keine Breaking Changes gibt.
‫Wie auch immer, damit haben wir unsere Tourseite eigentlich abgeschlossen, und
‫so brauchen wir nichts
‫mehr davon, die Karte ist auch
‫da und damit ist dieser Teil der Website eigentlich fertig.
‫Fantastisch.
‫Herzlichen Glückwunsch, dass Sie dies in die Tat umgesetzt
‫haben, dass Sie wirklich begonnen haben, diese schöne Website mit all
‫diesen erstaunlichen Technologien zu erstellen, die
‫Sie bisher gelernt haben.