基本タイプ

詳細は Documentation - Leaflet を熟読のこと。

LatLng

Leaflet.js ライブラリ中で緯度経度をまとめて表現する型が LatLng である。

L.latlng(latitude, longitude)

によって生成できる。ただし、Leaflet ライブラリのすべての関数は、 緯度経度を受けるべきところで、配列やオブジェクト形式も受け付ける。 たとえば以下の指定はいずれも同じ緯度経度扱いとなる。

map.setView(L.latlng(40, 140), 16);
map.setView([40, 140], 16);
map.setView({lat: 40, lng: 140}, 16); // lon:でも可
map.setView({lng: 140, lat: 40}, 16); // lon:でも可

LatLng のメソッド

LatLng で利用できるメソッドの主要なものを抜粋する。

もう一つの LatLng 値と(差 error 内で)同じ位置なら true を返す。 もう一つの LatLng 値との距離をm(メートル)で返す。Haversine の公式による。
メソッド働き
equals(otherLatLng[, error])
toString()文字列に変換した値を返す。
distanceTo(otherLatLng)
wrap() ±180度以内の数値に整えた新しい LatLng 値を返す。
toBounds(x) この位置を中心に一辺約 x メートルの正方形の LatLngBounds オブジェクトを新規に生成して返す。

LatLng のプロパティ

LatLng で参照できるプロパティの主要なものを抜粋する。

プロパティ意味
lat緯度(度)
lng経度(度)
altメートルによる高度(オプション)

LatLngBounds

地図中での矩形領域を表現する型で、以下のいずれかで生成する。

L.latLngBounds(latlng1, latlng2)
L.latLngBounds(latlng[])

第1の書式では、2つの LatLng 点を対角とする矩形を、 第2の書式では配列に含まれるすべての LatLng 点を包含する最小の矩形を返す。 この値をマップオブジェクトの fitBounds() 関数に渡すと、所望の点がすべて見えるような視点に変えることができる。

この latLngBounds オブジェクトから使えるメソッド一覧を示す。

メソッド働き
extend(latlng)
extend(latlngBounds)
pad(n)
getCenter(), getSouthWest(),
getNorthEast(), getNorthWest()
getWest(), getSouth(),
getEast(), getNorth()
contains(latlngBnds)
contains(latlng)
intersects(latlngBnds)
overlaps()
toBBoxString()
equals(latlngBnds)
isValid()

Bounds

latlngBounds と同様だが、地図上のピクセル値で表現する型である。

Point

★★★★★★★★★★★★★★★★★★

Icon

マーカとなるアイコンを保持するオブジェクトである。

L.icon(options)

の書式で生成する。指定できるオプションは以下のとおり。

プロパティ意味既定値
iconUrl(str) (必須)アイコン画像のURL文字列 null
iconRetinaUrl Retina液晶サイズ用アイコン画像のURLnull
iconSizePoint値 によるアイコンサイズ null
iconAnchor Point値 によるアンカー位置null
popupAnchornull
shadowUrlnull
shadowRetinaUrlnull
shadowSizenull
className''

DivIcon

HTMLのdiv要素をアイコンとして保持するオブジェクトである。 HTMLで表現できるものはすべてアイコン化できるので 色や文字を自在に変えることができる。またCSSで そのdivのスタイルも自由に変えられる。

L.divIcon(options)

の書式で生成する。使用する流れは以下のとおり。

var myIcon = L.divIcon({html: 'HTML文字列'});
L.marker(latLngオブジェクト, {icon: myIcon}).addTo(map);

使用できるオプションは以下のとおり。

プロパティ意味既定値
html(str) アイコンとして形成するHTML文字列

その他、Iconに与えるのと同じ オプションが利用できる。className プロパティを指定して、アイコンのスタイルを調整するとよい。 このとき iconSize プロパティに null を指定しておくと、 div要素本来の大きさで表示される。

<style>
div.mydivicon{
  width: 150px; height: 50px; border: 3px double green; padding: 1ex;
  background: #bbcc88dd;
  text-align: center; font-size: 200%;
}
</style>

// 以下JavaScript
var divIcon = L.divIcon({
html:		"やあやあ",
className:	"mydivicon",
iconSize:	null,
iconAnchor:	[0,50]
});
L.marker(center, {icon: divIcon}).addTo(mymap);

Divicon使用例

→ 目次