OpenLayers7 OpenStreetMap 最新版7.1.0 地図

オープンストリートマップ 7.1.0

自分のサイトに地図を埋め込みたいとき手段はいくつかあります。

google mapが今一番の主流ですが、

「googleは急に有料化とか言ってきそう」というのはありえます。念のため別の手段で地図を使いたい人用です。

OpenLayersとは

OpenLayers – Wikipedia

OpenLayersはブラウザで地図データを表示する、JavaScriptで組まれたオープンソースライブラリである。

読者が見るのはOpenStreetMapで、開発者が使うライブラリの呼び方はOpenLayersということらしい。

実装方法を解説していきますが、

途中にあるコードを丸コピーしてご自身のサーバーに置けば動くので、全くコードが読めないコピペコーダーでも大丈夫です。

公式リファレンスなんてめんどいから読みたくない人でも一撃でいけます。

つくるもの

こちらが完成品です

OpenStreetMapTEST

実装方法

最小限のコードで本当に地図を表示させるだけのコードです。

公式サイト

OpenLayers – Welcome

CDN

CDNで済むなら、CDNにした方が良いと思います。めんどいし。

OpenLayers – Get the Code

Hosted build for development

の下のコードをhtmlのヘッダーに貼ります。

HTML

<html>
	<head>
		<title>OpenStreetMapTEST</title>
		<meta http-equiv='content-type' charset='utf-8'>
		<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css">
		<script src="script.js"></script>
	</head>
	<body>
		<h1>OpenStreetMap</h1>
		<div id='mapcontainer' style='width:80%; height:600px;'></div>
	</body>
</html>

<html>

<head>

<title>OpenStreetMapTEST</title>

</head>

<body>

<h1>OpenStreetMap</h1>

</body>

</html>

HTMLで必要なのは

jQuery そもそもこれがないと動きません
OpenLayers のJSファイルをCDNで取得
OpenLayers のcssファイルをCDNで取得
地図を設置するターゲットとなるID (今回は#mapcontainer)

です。それぞれ

5行目: jQuery
6行目: OpenLayersのJS
7行目: CSS
12行目: 地図を設置するID

javascript

function init_map() {
	var map = new ol.Map({
		target: 'mapcontainer',
		layers: [
			new ol.layer.Tile({
				source: new ol.source.OSM()
			})
		],
		view: new ol.View({
			center: ol.proj.fromLonLat([142.14, 43.65]),  //初期の中心位置 [経度, 緯度]
			zoom: 6 //ズームレベル
		})
	});
}
$(function() {
	//ダウンロード時に初期化する
	window.addEventListener('DOMContentLoaded', init_map());
});

function init_map() {

var map = new ol.Map({

target: 'mapcontainer',

layers: [

new ol.layer.Tile({

source: new ol.source.OSM()

})

view: new ol.View({

center: ol.proj.fromLonLat([142.14, 43.65]), //初期の中心位置 [経度, 緯度]

zoom: 6 //ズームレベル

})

});

}

$(function() {

//ダウンロード時に初期化する

window.addEventListener('DOMContentLoaded', init_map());

});

1行目: OpenLayer用のfanctionを作ります。
2行目: var map に ol (OpenLayer)のマップを突っ込んで、ターゲットやレイヤー、初期位置を突っ込みます。
17行目: 最後に、無記名functionで、html,jsを読み込んだ瞬間発動します。(ジョジョっぽい)

過アクセス防止

実際には、$(“#id”).click(function() { OOO~~~OOO });

などでクリック時にのみ表示　つまりクリックイベントにバインドすると、openstreetmapに過アクセスを防げると思います。

参考

1個バージョン古いですが参考になります

【OpenLayers 6】埋め込み地図を表示させる方法 | DrawTrail

自分用

あるあるon clickイベントが、後で生成された部分で発火しないやつの対応

jQueryで後から追加生成した要素にクリックイベントを発生させる方法

オープンストリートマップ 7.1.0

OpenLayersとは

つくるもの

実装方法

公式サイト

CDN

HTML

javascript

過アクセス防止

参考

これも読んでみませんか

電車の画像投稿サイトを作った。撮り鉄用【Laravel】

写真のEXIF情報をjavasriptで読み込む EXIF.js サンプルコード

【Python】Exif 画像回転情報 読み取り 最も単純なコード

【Python】Exif 画像回転情報読み取り最も単純なコード