Yahoo! MAP のピンをまとめる Yahoo! Map Clusterを公開しました。

2019年01月26日（土）

Webサイトへの地図の埋め込みに Google Maps を利用する機会は多いと思います。昨年、Google Maps がクレジットカード情報の登録が必須になり、無料での利用が 28,000pv/月までと仕様が変更になりました。
そのため弊社の a-blog cms の地図埋め込みについては OpenStreetMap を標準とし、Google Maps を利用する際には切り替えて利用する仕様に変更することになりました。
というのは、Google Map APIを利用するにはクレジットカードの登録が必須という条件と、無料で利用できるAPI使用回数がYahoo! Mapの方がGoogle Mapに比べて多いからです。
以下は2019年1月26日時点でのAPI使用回数の無料枠の比較表になります。

サービス	無料PV数	APIキー取得	クレジットカード番号
Yahoo! Map	50,000 pv/日	必須	必要無し
Google Map	28,000 pv/月	必須	登録必須
OpenStreetMap	--	未設定	必要無し

第3の選択肢として、APIキーの設定は必要ありますが、1日 50,000pv と Google と比べると 50倍以上利用が可能ということで、日本国内の地図であれば、Yahoo!地図を利用することも検討に加えていいサービスではないかと弊社は考えております。

ピンの数が多い時に利用する Marker Clustering

地図に複数のピンを立てることについては、どのサービスでも可能ですが Google では公式に Marker Clustering という機能が提供されています。この機能を利用せずにピンが重なってたくさん表示されているような利用をみることもありますが、Marker Clustering を使うことで、集中して多くのピンがあったとしても分かりやすく情報を提供することができます。

「Google Maps でしか使えない」という問題を解決するために、弊社で Yahoo!地図を利用して Marker Clustering する Yahoo! Map Cluster を開発することになりました。
この記事ではそのライブラリの使い方をご紹介します。

デモ
使い方
オプション
メソッド
ダウンロード
リンク

デモ

使い方

JavaScriptの読み込み

<script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid=[YahooMapのAPIキー]"></script>
<script src="https://unpkg.com/yahoo-map-cluster@latest/bundle/ymap-cluster.js"></script>

JavaScriptの記述

var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 15, Y.LayerSetId.NORMAL);
var marker = new Y.Marker(new Y.LatLng(35.66572, 139.73100));
var marker2 = new Y.Marker(new Y.LatLng(35.66572, 139.73000));
var marker3 = new Y.Marker(new Y.LatLng(35.665, 139.734));
var marker4 = new Y.Marker(new Y.LatLng(35.6635, 139.734));
var marker5 = new Y.Marker(new Y.LatLng(35.665, 139.731));
var marker6 = new Y.Marker(new Y.LatLng(35.6642, 139.733));
var marker7 = new Y.Marker(new Y.LatLng(35.6635, 139.7328));
var marker8 = new Y.Marker(new Y.LatLng(35.665, 139.7343));
var marker9 = new Y.Marker(new Y.LatLng(35.6638, 139.7333));
var marker10 = new Y.Marker(new Y.LatLng(35.6628, 139.7333));
new YmapCluster(ymap, [marker, marker2, marker3, marker4, marker5, marker6, 
marker7, marker8, marker9, marker10]);

オプション

Yahoo! Map Cluster にはその他いくつかのオプションが用意されています。

オプション名	デフォルト値	説明
gridSize	60(px)	クラスターの半径。この半径に含まれるピンが同じクラスターにカテゴライズされます。
minClusterSize	2	クラスターの中のpinの最小の数。ピンが集まっていてもこの数以下だとクラスタリングされない。
imagePath	./images/cluster/	クラスター画像に使用するアセットのパス
injectStyle		.ymap-cluster-label, .ymap-cluster-icon などクラスターに関するクラスに対してスタイルを記述するための関数
getClusterSize		クラスターの中のピン数に応じてクラスターの色を変更するための関数

メソッド

Yahoo! Map Cluster ではインスタンスよりいくつかのメソッドを実行することができます。
下はそのメソッドの実行例です。

const ymapCluster = new YmapCluster(ymap, markers);
ymapCluster.addMarker(marker); // クラスターにピンを追加します。
ymapCluster.update(); // クラスタリング結果を再計算します。

ダウンロード

ダウンロードはこちらから行えます。
ダウンロード

もしくは、npm、yarnを使ったインストールが可能です。

npm install yahoo-map-cluster --save

yarn add yahoo-map-cluster

npmでのインストール後は、BrowserifyやWebpackなどのbundleツールを使ったrequireも可能です。

const FormStorage = require('yahoo-map-cluster');

Babelをお使いの方はimportもご利用いただけます。

import YmapCluster from 'yahoo-map-cluster';