◆ Custom Element 化して 位置情報やグリッドサイズを指定して使えるようにした
以前作ったツールのモジュール化です
地図関係のツールで 普通にマーカーで全部表示すると重すぎるし 見づらくなる量の位置情報を表示する用途で グリッドごとにまとめるツールを作りました
動かしてみる例では 場所が国内に散らばっていて数があり それでいて情報が公開されている郵便局を使いました

このツールを他のデータにも使おうとしたのですが 前回作ったときはモジュール分けもちゃんとしてなくて 使いまわしが難しい状態だったので Custom Element で使えるようにしました
ついでにグリッドの線を表示する新機能もつけてます

使用例

使う側はこういう感じです

<!DOCTYPE html>
<meta charset="UTF-8">
<title>poffice map</title>

<style>
	positions-map {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>

<positions-map id="pm"></positions-map>

<script type="module">
import "./positions-map.js"
const res = await fetch("poffice.json")
const data = await res.json()
const positions = data.map(d => ({ lat: d.lat, lng: d.lng, title: d.name }))

pm.init({
	positions,
	grid: true,
})
</script>

positions-map 要素を作り init メソッドで初期化します
使い方はこれだけです

設定内容

positions には { lat, lng, title } のオブジェクトの配列を指定します
rows と columns でグリッドの行数と列数を指定できます
threshold で指定した数値よりセル内の位置情報が多ければまとめてグループ表示にします
grid に true を入れるとグリッドラインを表示します

createMarkerIcon と createGroupIcon に関数を指定すると アイコンをカスタマイズできます
関数では leaflet の L.icon 関数に渡すオブジェクトを返す必要があります
セル内の位置情報の数に応じてグループアイコンの大きさや色を変えたりするのに使えます

init に渡すオブジェクトのデフォルト値はこうなっています

const defaults = {
	positions: [],
	rows: 10,
	columns: 10,
	threshold: 5,
	createMarkerIcon: null,
	createGroupIcon: null,
	grid: false,
}

ソースコード

https://gist.github.com/nexpr/4fb41c54afe25bb66ecd9764b5e1462c#file-positions-map-js

前回と同じ郵便局データを使ったページもあります
DEMO

データは前回のままなので情報としては古いです