ちょっとやっかいな緯度経度(35.94370,136.18909)を1つのコードにするGeo3x3(E91387323479)。 気軽に場所を入力できるウェブコンポーネント input-geo3x3タグ を作りました。

input-geo3x3 tagsrc on GitHub
地図をスクロールすると、センターの十字がある場所の緯度経度をGeo3x3で表示します。

ソースコードのメインはすっきりシンプル! class InputGeo3x3 extends InputLatLng { constructor(lat, lng) { super(lat, lng); } set value(v) { super.value = v; } get value() { const ll = this.map.getCenter(); const lat = ll.lat; const lng = normalizeLng(ll.lng); const zoom = this.map.getZoom(); const level = Geo3x3Level.fromLeafletZoom(zoom); return Geo3x3.encode(lat, lng, level); } } 派生元のInputLatLngクラスがいろいろやってくれているので短いです。(leafletの経度/lngが-180から180の範囲を超えるのが予定外→normalizeLng)


input-geo3x3 tagsrc on GitHub
こちらが派生元の input-latlngタグ、valueが緯度経度を { lat, lng } 形式で返します。valueへのセットは input-geo3x3 と同じで、Geo3x3のセットにも対応しています。

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS