Leafletで地図上に線を引いてみよう

更新日：2025-10-23

ブラウザ上で表示した地図に線を引いてみましょう。

https://github.com/inunosinsi/Leaflet_OpenStreetMap_Sample/blob/main/1.htmlで作成したコードにコードを追加していきます。

let lines = [
	{
		"type": "LineString",
		"coordinates": [
			[135.76198, 35.02320], 
			[135.76198, 35.02116], 
			[135.76383, 35.02111], 
			[135.76394, 35.02013],
			[135.76426, 35.02009],
			[135.76464, 35.01976]
		]
	}
];

L.geoJSON(lines).addTo(map);

ピンを立てる時と同様で配列とオブジェクト形式で指定します。

オブジェクト内の種別(type)をLineStringにすると線になり、coordinatesに開始点、曲がる場所、終了点の順に緯度経度の値(値の指定の時は経度lng、緯度latの順で指定)を指定します。

今回のコードはhttps://github.com/inunosinsi/Leaflet_OpenStreetMap_Sample/blob/main/9.htmlになります。

続いて、線の色を変えてみます。

線の色はHTMLのスタイルシート(CSS)と同じように指定します。

先程のコードの

L.geoJSON(lines).addTo(map);

を

let css = {
    "color": "#ff0000",
    "weight": 3,
    "opacity": 0.9
};

L.geoJSON(lines, {
	style: css
}).addTo(map);

のように書き換えます。

今回のコードはhttps://github.com/inunosinsi/Leaflet_OpenStreetMap_Sample/blob/main/10.htmlになります。

Using GeoJSON with Leaflet - Leaflet - a JavaScript library for interactive maps

追記

inunosinsiというアカウントで、オープンストリートマップに参加しています。

https://www.openstreetmap.org/user/inunosinsi