マーカークラスターを利用するメモ。
Leaflet.markerclusterプラグインでマーカークラスターを利用できる。
L.markerClusterGroupのオプションとして指定。今回はよく使うのだけ載せました。
| Option | Description |
|---|---|
| showCoverageOnHover | マーカー境界の表示設定 |
| spiderfyOnMaxZoom | マーカークラスターの解除表示設定 |
| removeOutsideVisibleBounds | 表示範囲外のマーカークラスタの設定 |
| disableClusteringAtZoom | 指定したzoomレベルでマーカークラスタ解除 |
npmでインストール。
npm install leaflet.markercluster
プラグインのJSとCSSを読み込み。
main.js
// CSS一式を読み込んでパッケージ
import "leaflet/dist/leaflet.css";
import "leaflet.markercluster/dist/MarkerCluster.css";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";
import "./css/style.css";
// JS一式を読み込んでパッケージ
import 'leaflet.markercluster';
import './js/script.js';
マーカークラスターを設定。
script.js
//マーカークラスター設定
var PointAll = L.markerClusterGroup({
showCoverageOnHover: false,
spiderfyOnMaxZoom: true,
removeOutsideVisibleBounds: true,
disableClusteringAtZoom: 18
});
//GeoJSON設定
var pointdata = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 5 }, "geometry": { "type": "Point", "coordinates": [ 139.73025667682498, 35.684728657838271 ] } },
{ "type": "Feature", "properties": { "id": 4 }, "geometry": { "type": "Point", "coordinates": [ 139.7404818862039, 35.630246376589362 ] } },
{ "type": "Feature", "properties": { "id": 3 }, "geometry": { "type": "Point", "coordinates": [ 139.77705667359774, 35.713791961149241 ] } },
{ "type": "Feature", "properties": { "id": 2 }, "geometry": { "type": "Point", "coordinates": [ 139.76722474150262, 35.68153424228494 ] } },
{ "type": "Feature", "properties": { "id": 1 }, "geometry": { "type": "Point", "coordinates": [ 139.7001709646139, 35.690318577295173 ] } }
]};
PointAll.addLayer(L.geoJson(pointdata, {
onEachFeature: function (feature, layer) {
var field = "id: " + feature.properties.id;
layer.bindPopup(field);
},
clickable: true
}));
map.addLayer(PointAll);
Leafletを手軽に始めるビルド環境公開しています。
leaflet-starter
