The Web Developer Bootcamp 2023 セクション55/61

2023年4月29日 17:58

第55章 Webアプリケーションにマップを追加する
この章では、Webアプリケーションにおける地図の実装に焦点をあててお話しします。目標は、キャンプ場のショーページに地図を表示し、キャンプ場の位置を表すピンを表示することです。そのために、一般的な地図作成ツールであるMapboxを使用します。

ジオコーディング
まずはじめに、緯度経度座標の代わりに場所を入力するジオコーディングについて言及します。そして、その場所はツールやAPIを使って緯度経度に変換されます。この機能に、MapboxのジオコーディングAPIを使用しています。APIを使用するために、スピーカーはMapboxアカウントを設定します。これは無料で、クレジットカードを必要としません。Mapboxは、ブラウザのJavaScriptコードで使用されるトークンを提供します。公開トークンを使用しますが、これはデフォルトのものでも、新しく作成したものでもかまいません。Mapbox トークンは、他の API キーと一緒に .env ファイルに保存されます。

位置情報の保存
続いて、Mapboxから取得した経度、緯度、座標情報をキャンプ場モデルに格納する方法について説明します。地理空間データの標準フォーマットであるGeoJSONを使用し、Mongooseを使って情報を保存します。ここでは、geometryフィールドのスキーマを作成し、typeを「point」、座標を数値の配列に設定しています。この形式で情報を保存することで、Mongoの地理空間演算子を使って、さまざまな位置情報クエリを実行できるようになります。

マップを表示する
地図を表示するために、MapboxのGL JavaScript APIまたはMapライブラリを使用します。JavaScriptとCSSファイルを用意し、マップが表示されるHTMLファイルにid「map」を持つdivを追加します。講師はマップを有効にするためのコードを書き、アクセストークンをコードに追加する必要があることに言及します。しかし、JavaScriptファイルでアクセストークンにアクセスすることに問題があり、講演者はejsファイルからJavaScriptファイルにアクセストークンを渡すスクリプトを書くことで解決しています。

地図にマーカーを追加する
今回は、Mapbox GLライブラリを使用して、地図にマーカーを追加する方法を解説しています。マーカーインスタンスの作成、経度・緯度の設定、地図への追加という流れが説明されています。また、サーバーサイドからクライアントサイドにデータを渡すことで、特定の場所にマップをセンタリングする方法を実演しています。また、ジオコーディングの過程で起こりうる制限について言及し、エラーに対処する方法を提案します。

ポップアップマーカー
また、Mapbox GL JSを使用した地図へのポップアップマーカーの追加についても解説しています。クリックすると表示されるポップアップ付きのマーカーを作成する方法を説明し、ポップアップのHTMLコンテンツを設定する方法を実演しています。また、さまざまなプリセットを使って地図のスタイルを変更し、必要に応じてさらにカスタマイズする可能性についても言及されています。

バグフィックス
講師は、キャンプ場向けのウェブサイトを作成する際にバグに遭遇しました。キャンプ場をループして画像を表示する際、あるキャンプ場の画像がない場合、ウェブサイトが壊れてしまうことがわかったのです。これを解決するために、画像がないキャンプ場にはデフォルトの画像を追加したそうです。また、キャンプ場のスキーマを変更した後、データベースを再シードする必要があったこと、スキーマを変更するとユーザー情報が失われる可能性があるため、本番では大きな問題になることについても言及されています。また、開発ではより自由に変更できるが、本番ではその影響に注意する必要があるとも述べています。

以上のことから、Webアプリケーションに地図を追加することで、ユーザーエクスペリエンスを向上させることができます。地図を表示するためには、場所を緯度経度の座標に変換するジオコーディングが重要である。Mapboxは、カスタマイズのための無料トークンを備えた人気のある地図ツールです。MapboxのジオコーディングAPIをウェブサイトに組み込み、GeoJSONを使ってMongoDBデータベースに座標を保存することができます。Mapbox GL JavaScript APIまたはMapライブラリを使用すると、マーカーや追加情報のためのポップアップマーカーを使用して地図を表示できます。ジオコーディングの制限を考慮し、エラーを効果的に処理することが重要です。Mapbox では、Web アプリケーションへのマップの追加を簡単なプロセスで実現し、ユーザー体験を向上させます。

この記事が気に入ったらサポートをしてみませんか？