Mapbox入門

14545 ワード

react tutorial mapbox javascript テキストリンク

This post is part of my Building Interactive Maps with React course - a course for anyone wanting to learn how to build interactive maps and integrate them into their React applications. If you enjoy this guide, then chances are you will enjoy the course too!

何を学ぶ
このポストは、どのように取得し、Mapbox GLのJSと実行して反応するためのガイドとして機能するものです.これは、基本的な反応マップのコンポーネントを作成する方法と、地図にいくつかの共通のカスタマイズを追加する方法を歩いていきます.このガイドの終わりには、Mapbox GLのJSを使用して、基本的なフルスクリーンのインタラクティブマップを作成し、反応することができます.

必要条件

反応に関する基礎知識

Mapbox入門
既にMapboxに精通している場合は、先に行くと、アプリケーションの設定に進んでください.要するに、Mapboxは、ビルディングマップを構築するためのビルディングブロックを提供する強力なプラットフォームであり、ウェブ、モバイル、およびARのための場所駆動アプリケーション.主な製品は以下の通りです.

マップ:鮮やかな地図スタイルとSDKとの相互作用のための

ナビゲーション:ナビゲーション経験を開発するための強力なルーティングエンジン

ジオコーディングサービス

Studio:カスタムマップと可視化を開発するための強力なUI

ビジョン:カメラとAIを活用するツールのスイート

データ:境界、交通と運動データを含む堅牢なデータセット

このシリーズは、彼らの地図とスタジオ製品に集中します.私は、ナビゲーション、ビジョンのような他の製品のいくつかに掘るチャンスを得ることを望んで、道を下に検索します.
このガイドは、特にMapbox GL JSを使用してどのように反応するかに焦点をあてます.このJavaScriptライブラリは、コードの最小量を持つ任意の反応アプリケーションに美しく、非常にインタラクティブマップを追加することができます.

アプリケーションの設定
使いやすさのために、我々は使用するつもりですcreate-react-app 当社のアプリケーションを取得し、実行します.あなたが沿って続くことを望むならば、あなたは私のこのガイドを見つけることができますsandbox repo .
Mapboxは、MapboxのGL JSを使用するアカウントが必要です.あなたがアカウントを持っていない場合は、その上に頭をsignup page . アカウントを作成した後、ログインしてアカウントページに移動しますhttps://account.mapbox.com/ . 「アクセストークン」というタイトルのセクションを見てください.プロジェクトのルートで、新規作成.env あなたがちょうど追跡したあなたのアクセストークンをファイルして、コピーしてください.このトークンを.env ファイル.一般に、アクセストークンのような機密情報を保存するのに最適な方法です.env ファイルをバージョン管理から除外します.

# .env
REACT_APP_MAPBOX_TOKEN=<YOUR_TOKEN_HERE>

次に、依存関係としてプロジェクトにMapbox GL JSを追加する必要があります.

# yarn
yarn add mapbox-gl

# npm
npm install mapbox-gl

マップの作成
基本的なアプリケーションのインフラストラクチャのセットアップと依存関係をインストールすると、我々のフルスクリーンのインタラクティブマップを作成することができます.あなたがスニペットをつかむために探しているならば、あなたの方法に行ってください、以下のコード・ブロックはあなたのチケットです.さもなければ、私は彼らのキー概念が下でブロックによってブロックするのを歩いています.

import React, { useRef, useEffect } from "react";
import mapboxgl from "mapbox-gl";
// import the mapbox styles
// alternatively can use a link tag in the head of public/index.html
// see https://docs.mapbox.com/mapbox-gl-js/api/
import "mapbox-gl/dist/mapbox-gl.css";

// Grab the access token from your Mapbox account
// I typically like to store sensitive things like this
// in a .env file
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN;

const App = () => {
  const mapContainer = useRef();

  // this is where all of our map logic is going to live
  // adding the empty dependency array ensures that the map
  // is only rendered once
  useEffect(() => {
    // create the map and configure it
    // check out the API reference for more options
    // https://docs.mapbox.com/mapbox-gl-js/api/map/
    const map = new mapboxgl.Map({
      container: mapContainer.current,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-87.903982, 43.020403],
      zoom: 12,
    });

    // cleanup function to remove map on unmount
    return () => map.remove();
  }, []);

  return <div ref={mapContainer} style={{ width: "100%", height: "100vh" }} />;
};

export default App;

それでは、アクセストークンビットからの行で上記のスニペットラインを進めましょう.Mapboxは、それらのmapbox gl jsライブラリを使用するアクセストークンを持つ必要があります.我々は既にアプリケーションのセットアップステップでアクセストークンをつかんで、A.env ファイル.我々は現在、アプリケーション内の変数を参照することができます.

// Grab the access token from your Mapbox account
// I typically like to store sensitive things like this
// in a .env file
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN

を使用してマップコンテナの参照を作成します[useRef](https://reactjs.org/docs/hooks-reference.html#useref) フック.このリファレンスを使用してマップをどこに表示するかを指定します.しかし、私たちの地図のロジックの肉とジャガイモが住んでいるが[useEffect](https://reactjs.org/docs/hooks-reference.html#useeffect) フック.ロジックの配置useEffect フックは、コンポーネントがマウントされてフックに空の依存配列を渡すまでマップがレンダリングされないことを保証します.
マップを初期化するのに必要な実際のロジックはminusculeです.美しいインタラクティブマップを作成するコードの6行!必要なのは新しい変数を作成することですmap とMapBox GL jsマップの新しいインスタンスに値を設定します.コンストラクタは設定オプションの全体のスルーを取ることができます(これらの多くは後のポストでカバーされます)、しかし、我々はそれをこの例のために単純にしておきます.必要なオプションはcontainer and style . あなたはこれらの2つのオプションのすべての他の利用可能なオプションの素晴らしい説明を見つけることができますMapbox Docs . オプションで追加しましたcenter and zoom オプションミルウォーキーの良いマップをレンダリングします.
我々はクリーンアップ機能を追加しますuseEffect フックは、コンポーネントがアンマウントしたときにマップが削除されることを確認します.最後に、我々は我々のrefをdiv これはコンポーネントから返され、マップを完全ビューポート幅と高さを取るようにスタイルを割り当てます.それだ!あなたが今すぐあなたがズームすることができますパンと周りの完全にインタラクティブなフルスクリーンマップを持っているアプリケーションを起動する場合.

const App = () => {
  const mapContainer = useRef();

  // this is where all of our map logic is going to live
  // adding the empty dependency array ensures that the map
  // is only created once
  useEffect(() => {
    // create the map and configure it
    // check out the API reference for more options
    // https://docs.mapbox.com/mapbox-gl-js/api/map/
    const map = new mapboxgl.Map({
      container: mapContainer.current,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-87.903982, 43.020403],
      zoom: 12,
    });

    // cleanup function to remove map on unmount
    return () => map.remove();
  }, []);

  return <div ref={mapContainer} style={{ width: "100%", height: "100vh" }} />;
};

export default App;

次の手順
この最初のチュートリアルの範囲を超えているマップを改善するためにできることの全体のスルーがあります.このシリーズの次の記事は、簡単に任意のマップに追加することができます定義済みのMapboxスタイル(別名Basemaps)の無数を探る.チュートリアルでは、各スタイルに有用なコンテキストを提供し、それぞれの一般的なユースケースを歩いてください.
あなたがそれまで待つことができないならば、あなたが試すことができた若干の他の定義済みのMapboxスタイルのリストはここにあります.既存のスワップアウトstyle 以下のスタイルURLのうちの1つに対するオプション.

mapbox://styles/mapbox/streets-v11

mapbox://styles/mapbox/outdoors-v11

mapbox://styles/mapbox/light-v10

mapbox://styles/mapbox/dark-v10

mapbox://styles/mapbox/satellite-v9

mapbox://styles/mapbox/satellite-streets-v11

mapbox://styles/mapbox/navigation-preview-day-v4

mapbox://styles/mapbox/navigation-preview-night-v4

mapbox://styles/mapbox/navigation-guidance-day-v4

mapbox://styles/mapbox/navigation-guidance-night-v4

あなたがこのポスト役に立つならば、retweetしてくださいThe Mapbox Developer's Handbook !

役に立つリンクと資源

Mapboxのホームページhttps://www.mapbox.com/ )