a-blog cmsにおけるマーカークラスターの作成（Mapbox）
＊本記事は「a-blog cmsのカスタムフィールドとしてMapboxを使用する方法(IE11対応)」から続く内容となります。マーカークラスターの作成の際には先にそちらの記事をご参照ください。
マーカークラスターとは
マーカークラスター は、視覚的にマーカーを統合するのに便利なツールで、マップ上の近接するマーカーを組み合わせてクラスタ化することで、見る人がマップ全体を理解しやすくするものです。作業をすすめることで、「マップカテゴリ一の一覧画面」で以下のようなマーカークラスターを作成できるようになります。本実装では、マップカテゴリーのエントリーを作成する際に登録した、Mapboxカスタムフィールドのマーカーがクラスタ化されます。
モジュールIDの作成
管理画面でモジュールIDの作成を行います。
モジュールは「Entry_Summary」とし、モジュールIDは「mapbox_cluster」としてください。次に、引数のカテゴリーID（cid）にチェックをいれて保存します。
モジュールID作成後は、モジュール設定画面で表示件数の変更を行ってください。この表示件数によってマップカテゴリーの一覧画面で表示されるマーカーの数が変わります。
htmlの追加
/themes/利用中のテーマ/にmapディレクトリを追加し、index.htmlを追加します。
index.html
<!DOCTYPE html>
<html class="no-js" lang="ja">
<head>
@include("/include/head/meta.html")
@include("/include/head/link.html")
@include("/include/head/js.html")
</head>
<body>
<!-- ヘッダー -->
@include("/include/header.html")
<!-- ページタイトル -->
@include("/include/header/page-title.html")
<!-- トピックパス -->
@include("/include/header/topicpath.html")
<div class="acms-container js-pretty-scroll-container">
<!-- ※管理用パーツ -->
@include("/admin/action.html")
<div class="acms-grid">
<main class="acms-col-lg-9 main">
<div class="main-inner is-space-right">
<!-- タグフィルター -->
@include("/include/tag/filter.html")
<!-- Mapboxクラスター -->
@include("/include/entry/cluster.html")
<!-- エントリーサマリー（画像メイン表示） -->
@include("/include/entry/summary-image.html")
<!-- 確認用テンプレート -->
@include("/include/check-seo.html")
</div>
</main>
<div class="acms-col-lg-3 side">
<div class="js-pretty-scroll">
<!-- エントリーリスト -->
@include("/include/entry/list.html")
<!-- カテゴリーリスト -->
@include("/include/category/list.html")
<!-- 検索フォーム -->
@include("/include/parts/search.html")
<!-- ピックアップリスト -->
@include("/include/entry/summary-pickup.html")
<!-- バナー -->
@include("/include/siteparts/banner.html")
<!-- リンクリスト -->
@include("/include/siteparts/link-list.html")
<div class="acms-hide-pc">
<!-- モバイル：ナビゲーションメニュー -->
@include("/include/parts/mobile-nav.html")
<!-- SNSアカウントへのリンク -->
@include("/include/footer/sns-link.html")
</div>
</div>
</div>
</div>
</div>
<!-- お問い合わせ -->
@include("/include/footer/suggest.html")
<!-- フッター -->
@include("/include/footer.html")
</body>
</html>次に、/themes/利用中のテーマ/include/entry/にcluster.htmlを追加します。
cluster.html
<!-- BEGIN_MODULE Entry_Summary id="mapbox_cluster" -->
<!-- Maboxライブラリ読み込み -->
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<script src="/js/mapboxcluster.js"></script>
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
<!-- マップカテゴリのエントリーにおけるmapboxの値を取得するためのdivタグ -->
<div class="owndata" data-title="{title}" data-url="{url}" data-lng="{fmapbox-lng}"
data-lat="{fmapbox-lat}">
</div>
<!-- END entry:loop -->
<!-- END unit:loop -->
<!-- BEGIN_MODULE Blog_Field -->
<!-- 地図作成のためのアクセストークンとスタイルURL -->
<div id="accesstoken_styleurl" data-accesstoken="{mapbox_accesstoken}" data-styleurl="{mapbox_styleurl}"></div>
<!-- END_MODULE Blog_Field -->
<div id='mapwrapper' style="width: 820px; height: 320px; max-width: 100% ;">
<div id='fmap' style='width: 100%; height: 100%; max-width: 100%;' data-lat="{fmapbox-lat}" data-lng="{fmapbox-lng}"
data-zoom="{fmapbox-zoom}" data-styleurl="{fmapbox_styleurl}" data-comment='{fmapbox-comment}'
data-mapsize="{fmapbox-mapsize}" data-maptype="show">
</div>
</div>
<!-- END_MODULE Entry_Summary -->jsの追加
/themes/利用中のテーマ/js/ にmapboxcluster.jsを作成し、
以下のリンクのコードを貼り付けてください。
これで、カスタムフィールドで設定したMapboxの地図がエントリー一覧画面でマーカークラスターとして表示されます。
Mapboxを安全に使用する方法
本実装ではMapboxのアクセストークンが開発者ツールを通じて見られるようになっています。本番環境での使用の際には以下のリンクの内容に従い、URL制限の有効化を行ってください。URL制限を追加したトークンは指定URLから発信されたリクエストのみ処理をするため、Webアプリのアクセス・トークンをよりセキュアにする事が可能です。
https://docs.mapbox.com/jp/help/troubleshooting/how-to-use-mapbox-securely/
