福野泰介の一日一創

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

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