@coconmap/leaflet.cocodoco NPM

Leaflet.CocoDoco

This is pre-release

Leaflet.CocoDoco 動作Demo

クリックした地点の位置情報を表示することができる Leaflet.js プラグインです。
Leaflet 地図上で右クリックをすると、その地点の大まかな住所とその土地の標高を知ることができます。
住所を求めるのにはオープンソースかつ無料で利用できる逆ジオコーダー geolonia/open-reverse-geocoder を、高度を求めるのには国土地理院の API を用いています。
外部の API を使用していますので、過剰な負荷をかけるような使用はご遠慮ください。

Demo

https://cocon.github.io/Leaflet.CocoDoco/demo/index.html

Usage

プラグインをインストールし、クラスCocoDocoを読み込んでください。クラスCocoDocoのインスタンスを作成し、ご自身で作成された L.Map インスタンスに追加してあげると Leaflet 地図上にコントロールが追加されます。
CocoDocoコンストラクタは次のような引数を取ります。コントロールを追加する位置を指定することができます。

new CocoDoco({
	position: "topright" | "topleft" | "bottonleft" | "bottonright",
});

CocoDocoインスタンスを地図に追加するには他の Leaflet プラグインと同様にaddToメソッドを用います。詳しい使い方は下記のコード例を参考にしてください。

With npm (Recommended)

パッケージマネージャやビルドツールを用いる場合の使用例です。

npm install -S @coconmap/leaflet.cocodoco

Sample code

import L from "leaflet";
import { CocoDoco } from "@coconmap/leaflet.cocodoco";

const map = new L.map("my_map", {
	center: [35.4477712, 139.6425415],
	zoom: 13,
});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
	attribution:
		'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
const cocodoco = new CocoDoco({
	position: "topleft",
});
cocodoco.addTo(map);

From CDN

CDN からコードをダウンロードして使うことができます。ただ、その際 Leaflet.js の読み込みが先になるようにご注意ください(本ライブラリが Leaflet.js に依存しているため)。

<script src="https://cdn.jsdelivr.net/npm/@coconmap/leaflet.cocodoco@latest/dist/bundle.js"></script>

Sample code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<!-- まずLeaflet.jsに同梱のスタイルファイルを -->
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css"
		/>
		<!-- 次にLeaflet.js本体を -->
		<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
		<!-- 本プラグインは最後に読み込んでください -->
		<script src="https://cdn.jsdelivr.net/npm/@coconmap/leaflet.cocodoco@latest/dist/bundle.js"></script>
	</head>

	<body>
		<div id="my_map" style="width: 500px; height: 500px;"></div>
		<script>
			const map = new L.map("my_map", {
				center: [35.4477712, 139.6425415],
				zoom: 13,
			});
			L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
				attribution:
					'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
			}).addTo(map);
			const cocodoco = new CocoDoco({
				position: "topleft",
			});
			cocodoco.addTo(map);
		</script>
	</body>
</html>

Author

ToriChan(@CoconMap)

ご不明点などあれば気軽にお声がけください！

leaflet

@infinitebrahmanuniverse/nolb-_coc @everything-registry/sub-chunk-182

0.0.2

2 years ago

0.0.1

2 years ago