以下の内容はhttps://kenfdev.hateblo.jp/entry/2025/11/21/154756より取得しました。

Web Developer Bootcamp YelpCampでMapTilerを使う その１

Web Developer BootcampのYelpCampアプリにてMapBoxを使用していたのですが、無料範囲内で使う場合であってもクレジットカードの登録が必須となりました。YelpCampでの使用に閉じていればまず無料枠を超えることが無いのでクレジットカードの登録を行っても良いのですが、不安に思う人も少なくないはず。

ということで、MapBoxの代わりに使うことのできるMapTilerを使用した方法についてこの記事で紹介します。

前提として Web Developer Bootcamp の 「セクション55: YelpCamp: 地図の追加」まで進んでいることとします。あくまでこの記事は「MapBoxのコードをMapTilerに置き換えた場合どうなるのか」を説明するものになっています。

とにかく修正が必要なコードをいっきに見たいという人は以下を参照ください。

github.com

ステップ1 MapTilerでユーザー登録

まず https://www.maptiler.com/ にアクセスします。「CREATE FREE ACCOUNT」をクリックしましょう。

Googleアカウントがある人はGoogleで登録を行い、持っていない人はメールアドレスで登録しましょう。

アンケートのポップアップが出てくるので必要に応じて答えましょう。

ステップ2 MapTilerのAPIキー確認

MapTilerにログインできたらAPIキーのページに行きましょう: https://cloud.maptiler.com/account/keys/

そこにデフォルトのAPIキーが既にあるはずなのでコピーしましょう。

このAPIキーをYelpCampプロジェクトの .env ファイルに設定します。ここまでのセクションでCloudinaryの設定をする際にこのファイルは作成済みのはずです。以下のように MAPTILER_API_KEY を設定しましょう。

MAPTILER_API_KEY=＜ここにコピーしたAPIキーを貼り付け＞

MAPTILER_API_KEY という文字列は絶対に間違えないようにしましょう。

ステップ3 MapTilerをコードから使えるようにする

以下のコマンドをターミナルで実行し、MapTilerがコードで使えるようにします。

npm install @maptiler/client@2.5.0

詳細ページでMapTilerの地図を使う

ステップ4 バックエンドの実装

controllers/campgrounds.js の実装

以下のコードをファイルの先頭に追加しましょう。 @maptiler/client を初期化します。

const maptilerClient = require("@maptiler/client");
maptilerClient.config.apiKey = process.env.MAPTILER_API_KEY;

createCampground のControllerにて以下のコードを追加します。「ここを追加」と書いている部分になります。

module.exports.createCampground = async (req, res) => {
    // ↓↓↓ここを追加
    const geoData = await maptilerClient.geocoding.forward(
      req.body.campground.location,
      { limit: 1 }
    );
    // console.log(geoData);
    // ↑↑↑ここを追加
    const campground = new Campground(req.body.campground);
    // ↓↓↓ここを追加
    campground.geometry = geoData.features[0].geometry;
    // ↑↑↑ここを追加
    campground.images = req.files.map(f => ({ url: f.path, filename: f.filename }));
    campground.author = req.user._id;
    await campground.save();
    console.log(campground);
    req.flash('success', '新しいキャンプ場を登録しました');
    res.redirect(`/campgrounds/${campground._id}`);
}

models/campground.js の実装

次に campgroundSchema に geometry の情報を追加します。MapTilerのAPIから取得するキャンプ場の地理情報をデータベースに保存するためです。Mongooseで地理情報を保存するときには以下の形で保存する必要があります。

geometry: {
    type: {
        type: String,
        enum: ['Point'],
        required: true
    },
    coordinates: {
        type: [Number],
        required: true
    }
}

参考: Mongoose Documentation - Using GeoJSON

よって、完全な campgroundSchema の形は以下のようになります。

const campgroundSchema = new Schema({
    title: String,
    images: [imageSchema],
    // ↓↓↓ここを追加
    geometry: {
        type: {
            type: String,
            enum: ['Point'],
            required: true
        },
        coordinates: {
            type: [Number],
            required: true
        }
    },
    // ↑↑↑ここを追加
    price: Number,
    description: String,
    location: String,
    author: {
        type: Schema.Types.ObjectId,
        ref: 'User'
    },
    reviews: [
        {
            type: Schema.Types.ObjectId,
            ref: 'Review'
        }
    ]
});

ステップ5 フロントエンドの実装

views/layouts/boilerplate.ejs の実装

では、MapTilerのSDKを使ってフロントエンドで地図が表示できるようにしましょう。まずは以下のコードを boilerplate.ejs の <head> の中に追加します。

    <title>YelpCamp</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- ↓↓↓ここを追加 -->
    <script src="https://cdn.maptiler.com/maptiler-sdk-js/v3.6.1/maptiler-sdk.umd.min.js"></script>
    <link
      href="https://cdn.maptiler.com/maptiler-sdk-js/v3.6.1/maptiler-sdk.css"
      rel="stylesheet"
    />
    <!-- ↑↑↑ここを追加 -->
</head>

参考: MapTiler Documentation - MapTiler SDK JS

public/javascripts/showPageMap.js の実装

まず、 public/javascripts/showPageMap.js というファイルを新規作成しましょう。中身は以下のようにします。これでひとまずMapTilerが使える状態にします。

maptilersdk.config.apiKey = maptilerApiKey;
// 地図は日本語にしたいので日本語の設定を入れておく
maptilersdk.config.primaryLanguage = maptilersdk.Language.JAPANESE;

const map = new maptilersdk.Map({
    container: 'map',
    style: maptilersdk.MapStyle.BRIGHT,
    center: campground.geometry.coordinates, // starting position [lng, lat]
    zoom: 10, // starting zoom
});

new maptilersdk.Marker()
    .setLngLat(campground.geometry.coordinates)
    .setPopup(
        new maptilersdk.Popup({ offset: 25 }).setHTML(
            `<h3>${campground.title}</h3><p>${campground.location}</p>`
        )
    )
    .addTo(map);

views/campgrounds/show.ejs の実装

MapTilerを使うためにAPIキーを渡し、キャンプ場の情報も渡します。よって、以下のようなコードを views/campgrounds/show.ejs の末尾に追加しましょう。

<script>
    const maptilerApiKey = '<%- process.env.MAPTILER_API_KEY %>';
    const campground = <%- JSON.stringify(campground) %>;
</script>

<script src="/javascripts/showPageMap.js"></script>

【注意点】 上記コードの <script> の順番は変えないでください。 /javascripts/showPageMap.js で maptilerApiKey や campground の変数を使うため、先に宣言しておく必要があります。

最後に、以下のように <div id="map" style="width: 100%; height: 300px"></div> を追加して、地図が表示される場所を確保しましょう。2個目の <div class="col-6"> の直下です（「レビュー」がある場所です）

    <div class="col-6">
        <!-- ↓↓↓ここを追加 -->
        <div id="map" style="width: 100%; height: 300px"></div>
        <!-- ↑↑↑ここを追加 -->
        <% if(currentUser) { %>
        <h2>レビュー</h2>
        <form action="/campgrounds/<%= campground._id %>/reviews" method="POST" class="mb-3 validated-form" novalidate>

ここまでの修正が完了すれば、キャンプ場を登録した際に以下のように地図が表示されるようになります！

続きは以下の記事となります。

kenfdev.hateblo.jp



以上の内容はhttps://kenfdev.hateblo.jp/entry/2025/11/21/154756より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます
不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14