Karten im Web mit React und Mapbox

Webanwendungen haben stark von der Einbeziehung von Karten profitiert und Benutzern wertvolle standortbezogene Informationen bereitgestellt. Karten haben unsere Interaktion mit der Welt verändert, von der Navigation durch unbekannte Orte bis hin zur Entdeckung nahegelegener Restaurants. Daher erfreut sich die Integration von Karten in Websites in letzter Zeit immer größerer Beliebtheit. Dennoch kann die Gestaltung von Karten, die sowohl funktional als auch benutzerfreundlich sind, eine Herausforderung darstellen, insbesondere für diejenigen, denen es an Erfahrung in diesem Bereich mangelt. In diesem Artikel gebe ich nützliche Tipps zum Erstellen effektiver Karten in Ihrem Browser.

Tech-Stack

Lassen Sie uns über Technologien diskutieren. Bei der Arbeit mit Karten verwenden wir normalerweise drei Ebenen:

• Rendern der Benutzeroberfläche, einschließlich Schaltflächen und Formularen. In unserem Stack übernimmt React diese Rolle;

• Rendern der Karte und Ermöglichen der Benutzerinteraktion. Wir verwenden hierfür Mapbox;

• Abrufen von Daten vom Server, z. B. Informationen zu Markierungen oder Polygonen. Zum Abrufen von Daten verwenden wir die integrierte Abruffunktion des Browsers.

  
  

Sehen wir uns jeden Punkt an, um ein besseres Verständnis unseres Technologie-Stacks bei der Arbeit mit Karten zu erlangen.

Reagieren

Der Reagieren Mit der Bibliothek können Sie bequem und effizient mit Seitenelementen arbeiten. Es wurde von Facebook für den Eigengebrauch entwickelt und beinhaltet zahlreiche Komponenten wie Buttons, Formulare und andere interaktive Elemente auf den Seiten. Facebook hat beispielsweise eine erstellt Versöhnungsalgorithmus um schnell verschiedene Zustände zu vergleichen.

Da das Ändern von Elementen auf einer Seite für einen Browser der teuerste Vorgang ist, ist es wichtig, ihn so effizient wie möglich durchzuführen. Um dieses Problem zu lösen, haben Facebook-Ingenieure die React-Bibliothek entwickelt, die schnelle und unkomplizierte Elementänderungen auf einer Seite ermöglicht. React sorgt nicht nur für schnelle Zustandsänderungen auf einer Seite, sondern ermöglicht uns auch, dies deklarativ zu tun, ohne direkt mit DOM-Elementen zu arbeiten. Stattdessen verwenden wir normalerweise eine Abstraktion JSX , das wie HTML aussieht. Betrachten wir ein Beispiel:

 // It's our state. Is the user our friend or not? // false by default const [isFriend, setIsFriend] = useState(false) // Depending on the state, we show the text on the button const buttonText = isFriend ? 'Your my Friend' : 'Add as Friend' // There is JSX, syntax for UI // In this case, we display a button, when clicked, we change the state return ( <button onClick={() => setIsFriend(true)}>{buttonText}</button> )

Es ist möglich, Komponenten mit gewöhnlichen DOM-Elementen wie Formularen, Schaltflächen und Eingaben am unteren Ende der Hierarchie zu verschachteln. Durch die Zusammenstellung dieser einfachen Elemente können wir komplexere Elemente erstellen, beispielsweise ein vollständiges Formular:

 const Form = () => ( <form> <input name="Email"/> <input name="Password"/> </form> ) const App = () => ( <main> <h1>My form!</h1> <Form /> </main> )

Wie unterstützt uns React im Kontext von Karten? Da die Karte auf der Seite interaktiv ist, ähnlich einer Schaltfläche oder einem Formular, ist es unser Ziel, ihre Darstellung und Interaktion durch Ereignisse wie Klicks auf der Karte zu optimieren. React kann dabei helfen, diese Optimierung zu erreichen. Hier ist ein Beispiel dafür, wie es funktioniert:

 // Use React to render the map with different event handlers // and render markers return ( <BaseMap onInitMap={() => console.log('I am alive!')} onClickMap={() => console.log('Click!')} onDestroyMap={() => console.log('Oh no!')} > <ClustersMarkers /> <PostsMarkers /> <ListingsMarkers /> </BaseMap> )

Bei der Arbeit mit React ist es wichtig zu bedenken, dass es eine effiziente Manipulation von Elementen auf der Seite, schnelle Änderungen und die Interaktion mit ihnen über Ereignisse ermöglicht. Dies wird durch eine HTML-ähnliche Abstraktion erreicht, die es einfach macht, komplexe Komponenten aus einfacheren zu erstellen.

Kartenbox

Lassen Sie uns nun die Karte selbst besprechen. Das Erstellen und Verwenden von Karten kann eine Herausforderung sein, und nur wenige Produktunternehmen können Karten von Grund auf entwerfen. Typischerweise verlassen sich die meisten Menschen auf vorgefertigte Bibliotheken mit einer benutzerfreundlichen API, die sich bewährt hat.

Es stehen zahlreiche Anbieter dynamischer Karten zur Verfügung, darunter Google Maps, Leaflet, Bing Maps, Mapbox und mehr. Wir werden uns jedoch darauf konzentrieren Kartenbox aufgrund seiner umfangreichen Funktionen und fairen Preispolitik. Beispielsweise erhebt Google Maps Gebühren 700 $ für 100.000 Kartenaufrufe pro Monat, während Mapbox nur Gebühren erhebt 250 $ . Darüber hinaus bietet Mapbox kostenlosen Zugang für bis zu 50.000 Kartenansichten pro Monat.

Mapbox-Angebote Mapbox Studio , ein Werkzeug, das oft mit Photoshop für Karten verglichen wird. Mit diesem Tool können Designer benutzerdefinierte Stile erstellen, unnötige Kartenelemente ausblenden und Hausanzeigen entfernen. Einer seiner Vorteile ist die Möglichkeit, die Sichtbarkeit zu verbessern Sehenswürdigkeiten . Ein weiterer Vorteil ist die Möglichkeit, mit der Kartengestaltung in Unternehmensfarben zu experimentieren. Es ist jedoch wichtig, das Benutzererlebnis zu berücksichtigen und eine vertraute Farbpalette beizubehalten, einschließlich grünem Gras und blauem Wasser. Das Beste an Mapbox Studio ist, dass es den Kartenentwurfsprozess vereinfacht, indem die Notwendigkeit der Entwicklung und Übertragung von Anforderungen entfällt, was letztendlich die Kosten für die Arbeit mit Karten senkt.

Darüber hinaus bietet Mapbox eine Geokodierungstool Das kann Adressen in Koordinaten umwandeln oder umgekehrt und vereinfacht so das Auffinden von Punkten auf einer Karte. Allerdings ist das Tool weltweite Abdeckung kann unzureichend sein, was bei bestimmten Projekten zu Schwierigkeiten führen kann. Mapbox sammelt Daten von zahlreiche Quellen , wie Regierungen, Open-Data-Initiativen wie OpenStreetMap und private Unternehmen.

Mapbox bietet eine Vielzahl von praktische Beispiele , Obwohl die Dokumentation könnte von einer gewissen Verbesserung profitieren. Bei der Einbindung von Markierungsfunktionen können Beispiele beispielsweise informativer sein als die Dokumentation. Darüber hinaus können beim Zusammenführen mehrerer Komponenten Herausforderungen auftreten, z. B. Markierungscluster, benutzerdefiniertes Laden von Daten, Normalisierung und Änderungen des Markierungsstatus.

Schauen wir uns die Mapbox-Karten noch einmal an. Was bedeutet das Mapbox-API Tun?

• Es initialisiert die Karte in einem HTML-Element auf der Seite;

• Es lädt und rendert Bilder, aus denen die Karte besteht.

• Es zeichnet zusätzliche Elemente, wie z. B. Markierungen, unter Verwendung von GeoJson als Eingabedaten;

• Es generiert Ereignisse wie Klicks oder Zoomänderungen, die verarbeitet werden können.

  
  

Schauen wir uns jeden dieser Artikel genauer an.

Mapbox ist auf die Kartendarstellung mithilfe von Kacheln spezialisiert. Kacheln sind kleine quadratische Bilder, die die größere Karte bilden. Die Standardgröße einer Kachel beträgt 512 x 512 Pixel und kann beides sein Vektor oder Raster . Vektor Kacheln werden zur Darstellung von Straßen, Gebäuden, Points of Interest (PoI) und mehr verwendet. Sie können dynamisch gestaltet werden, sind leichtgewichtig und ermöglichen eine reibungslose Interaktion mit der Karte. Raster Kacheln hingegen werden zur Darstellung von Satellitenbildern verwendet.

Nur damit Sie es wissen: Mit Mapbox Studio können wir die spezifischen Daten auswählen, die wir in die Kartenkacheln aufnehmen möchten. Diese Plättchen werden dann auf a gelegt Leinwand , ein spezielles DOM-Element im Browser, das Bilder und andere grafische Elemente im Web anzeigt. Um Ihnen eine Vorstellung zu geben: Es ähnelt der Anzeige von Dokumenten auf einer Leinwand in Google Docs.

 <canvas width="100" height="100" />

Mapbox übernimmt das Laden, Einfügen und Aktualisieren von Kacheln. Wir müssen lediglich angeben, wo die Karte angezeigt werden soll, und die Anfangsbedingungen angeben, z. B. die Zoomstufe oder die Koordinaten der Karte. Um Mapbox verwenden zu können, benötigen Sie eine Zugangstoken Dabei handelt es sich um einen eindeutigen Schlüssel, der in Ihrem Mapbox-Konto zu finden ist. Um eine einfache Karte einzurichten, finden Sie hier ein kurzes Beispiel. Weitere Informationen finden Sie unter Verknüpfung bereitgestellt:

 mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; const map = new mapboxgl.Map({ container: 'map', // we can use an Id or an element style: 'mapbox://styles/mapbox/streets-v11', // URL for styles center: [-74.5, 40], // initial coordinates [lng, lat] zoom: 9, // initial zoom });

Danach erhalten wir eine Karte auf der Seite in einem Element mit der ID „map“.

Um den Benutzern mehr Informationen auf der Karte zu bieten, zeigen wir häufig den Standort einer bestimmten Einrichtung oder die Grenzen eines bestimmten Gebiets an. Um dies zu erreichen, verwenden wir ein bestimmtes Datenformat namens GeoJSON und weisen Sie Mapbox an, wie diese Daten angezeigt werden sollen.

GeoJSON ist das Standardformat zum Speichern geografischer Strukturen auf Karten. Es kann verschiedene primitive Typen speichern, die geografische Objekte wie Adressen, Orte, Straßen, Autobahnen, Grenzen, Länder, Staaten und Kombinationen davon beschreiben, die als Multipart bezeichnet werden. GeoJSON wurde 2008 eingeführt und wird wie folgt dargestellt:

 { "type": "Feature", // also can be FeatureCollection, it's collection of Feature "geometry": { "type": "Point", // also can be LineString, Polygon, MultiPolygon "coordinates": [125.6, 10.1] // for other types you can use Array with coordinates }, "properties": { // it's metadata, we can you that to show something on the map "name": "Dinagat Islands" } }

Lassen Sie uns über das in Mapbox verwendete Koordinatensystem sprechen. Standardmäßig verwendet Mapbox EPSG 3857 Dabei handelt es sich um eine Möglichkeit, die Erde auf eine ebene Fläche zu projizieren, um mit Fliesen zu arbeiten. Dies wird als Web Mercator bezeichnet und ist der Standard für Online-Karten. Beim Umgang mit Daten über Markierungen und Polygone wird jedoch ein anderes Koordinatensystem namens „ EPSG 4326 . Dieses System basiert auf Breiten- und Längengraden, um Koordinaten auf dem Ellipsoid der Erde zu beschreiben. Mapbox und andere Kartenanbieter konvertieren automatisch Koordinaten von EPSG 4326 in EPSG 3857. Wenn wir mit anderen arbeiten müssen Projektionen können wir die Methode map.setProjection verwenden.

Jetzt besprechen wir, wie GeoJSON auf der Karte angezeigt wird. Mapbox bietet zwei Entitäten, die für uns hilfreich sein werden:

• Quelle – Das ist der Daten-Seed. Wir können eine neue Quelle mit GeoJSON-Daten erstellen und diese beispielsweise so konfigurieren, dass für jedes Feature in der Feature-Sammlung eine ID generiert wird.

• Schicht — Dies ist die Datendarstellung. Wir können die Daten aus der Quelle auf unterschiedliche Weise anzeigen, beispielsweise durch das Anzeigen von Grenzen.

  
  

Um Polygone oder Markierungen auf der Karte anzuzeigen, müssen wir die Daten im GeoJson-Format vom Server abrufen. Dann erstellen wir eine Quelle, geben die Daten ein und verbinden sie mit der erforderlichen Ebene.

 const geoJsonFeature = { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [-67.13734, 45.13745], [-66.96466, 44.8097], [-68.03252, 44.3252], [-67.13734, 45.13745] ] } } // Create source with our data map.addSource('ourSource', { 'type': 'geojson', 'data': geoJsonFeature }); // Add layer for background map.addLayer({ 'id': 'background', 'type': 'fill', 'source': 'ourSource', // название нашего source 'layout': {}, 'paint': { 'fill-color': '#0080ff', 'fill-opacity': 0.5 } }); // Add layer for border map.addLayer({ 'id': 'border', 'type': 'line', 'source': 'ourSource', 'layout': {}, 'paint': { 'line-color': '#000', 'line-width': 3 } });

Nachdem wir diesen Code ausgeführt haben, erhalten wir das Ergebnis:

Weitere Informationen zu diesem Thema finden Sie unter Dokumentation bereitgestellt von Mapbox. In diesem Tutorial haben wir den Prozess der Initialisierung der Karte und der Darstellung unserer Daten behandelt. Als Nächstes untersuchen wir, wie mit Ereignissen wie Klicken, Ziehen und Zoomen umgegangen wird. Beispielsweise können wir Mapbox verwenden, um Ereignisse zu überwachen und die Koordinaten in der Konsole anzuzeigen, während der Benutzer seinen Cursor auf der Karte bewegt. Um dies zu erreichen, rufen wir einfach die on Methode mit dem gewünschten Ereignistyp auf, ähnlich wie wir mit DOM-Elementen arbeiten.

 map.on('mousemove', (e) => { console.log(JSON.stringify(e.point)); }); // Result: {"x":330,"y":49}

Zusammenfassend: Woran müssen wir uns erinnern? Mit Mapbox können wir eine Karte anzeigen, unsere Daten darauf zeichnen und Kartenereignisse verarbeiten. Gleichzeitig übernimmt Mapbox das Laden und Anzeigen von Bildern (Kacheln).

Bringen

Ein Wort dazu bringen . Wir haben bereits gesehen, wie man Daten auf einer Karte rendert, aber zuerst müssen wir sie vom Server abrufen. Wenn wir im Hintergrund dynamisch Daten vom Server anfordern, ohne die Seite neu zu laden, nennen wir diesen Ansatz AJAX („ Ein synchrones JavaScript und X ML“). Es gibt viele Tools zum asynchronen Laden von Daten vom Server, wie zum Beispiel Axios oder XMLHttpRequest (nativ).

Was ist zu beachten? Wir rufen Daten vom Server ab, und dafür gibt es viele Bibliotheken, aber wir werden Fetch verwenden. Als nächstes werden wir uns ansehen, wie wir dies konkret bei der Arbeit mit Karten tun, da es hier Nuancen gibt.

Reagieren + Mapbox

Sehen wir uns nun an, wie die oben beschriebenen Technologien zusammenarbeiten. Zuerst rufen wir mit fetch die Daten zur Darstellung des Polygons ab. Dann deklarieren wir die Initialisierung der Karte und fügen nach dem Laden das Polygon zur Karte hinzu.

Ein funktionierendes Beispiel finden Sie auch unter Verknüpfung bereitgestellt.

 const useFetch = () => { /* Our data { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [-67.13734, 45.13745], [-68.03252, 44.3252], [-68.90478, 47.18479], [-67.13734, 45.13745], ] ] } } */ const [data, setData] = useState(null) useEffect(() => { fetch('https://our-api.com/polygon') .then(response => response.json()) .then(setData) .catch(e => { console.error(e) }) }, [setData]) return { data } } const BaseMap = () => { // Use the hook to fetch data const { data } = useFetch(GET_REGION); // Map instance const map = useRef(null); // DOM element const mapContainer = useRef(null); // Main logic - init the map and add the event useEffect(() => { if (map.current) { return; // initialize map only once } mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; map.current = new mapboxgl.Map({ container: mapContainer.current, style: 'mapbox://styles/mapbox/light-v10', // style URL (it's Mapbox's core style) center: [-68.137343, 45.137451], // starting position zoom: 5 // starting zoom }); // Handle event map.on('load', () => { const sourceId = 'source-region' // Add a data source containing GeoJSON data map.addSource(sourceId, { 'type': 'geojson', 'data': data.region // our data from Apollo }); // Add a new layer to visualize the polygon map.addLayer({ 'id': 'background', 'type': 'fill', 'source': sourceId, // reference the data source 'paint': { 'fill-color': '#0080ff', // blue color fill 'fill-opacity': 0.5 } }); // Add a black outline around the polygon map.addLayer({ 'id': 'outline', 'type': 'line', 'source': sourceId, 'paint': { 'line-color': '#000', 'line-width': 3 } }); }); }); return <div ref={mapContainer} />; } 

Abschluss

Wir haben uns den Technologie-Stack angesehen, der unserer zukünftigen Architektur zugrunde liegt. Im folgenden Artikel besprechen wir die Prinzipien, die beim Entwurf einer Kartenarchitektur helfen, wie man eine möglichst geringe Kopplung und hohe Kohäsion von Modulen erreicht und wie man ein skalierbares Kartensystem verwaltet und entwickelt.

Vielen Dank für eure Aufmerksamkeit! Ich wünsche ihnen einen wunderbaren Tag.