概要

Electron で地図を表示するアプリを作ってみます。
ライブラリとして地図ライブラリはleafletを、マーカークラスタのためにleaflet.markerclusterを使います。

それぞれのバージョンは以下のとおりです。

|ライブラリ|バージョン|
|---+---|
|electron|1.12.2|
|leaflet|1.6.0|
|leaflet.markercluster|1.4.1|

準備

node と npm

　ここからダウンロード　

最短の道

ディレクトリを作成

ディレクトリを名前はなんでもいいので作って、そこに以下の内容の package.json をおきます。ディレクトリの名前はとりあえず le にしておきます。

package.json

{
  "name": "le",
  "version": "1.0.0",
  "description": "Sample map application.",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": ""
}

Electron をインストール

npm i electron --save

アプリの作成

le の下に以下の3ファイルを作成します。

index.html

index.html

<!DOCTYPE html>
<html lang=zxx>
<link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
>
<script
    src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
></script>

<style>
html, body, #mapid { height: 100% }
body { margin: 0 }
</style>

<title>Electron-Leaflet</title>
<div id="mapid"></div>

main.js

main.js

const { app, BrowserWindow } = require('electron')

const
createWindow = () => {
	const mainWindow = new BrowserWindow(
		{	width			: 1000
		,	height			: 1000
		,	webPreferences	: {
				preload			: __dirname + '/preload.js'
			}
		}
	)

	mainWindow.loadFile( 'index.html' )
}

app.whenReady().then(
	() => {
		createWindow()
		app.on(
			'activate'
		,	() => !BrowserWindow.getAllWindows().length && createWindow()
		)
	}
)

app.on(
	'window-all-closed'
,	() => process.platform !== 'darwin' && app.quit()
)

preload.js

preload.js

window.onload = () => {
	const
	map = L.map( 'mapid' ).setView( [ 35.6825, 139.752778 ], 15 )
	L.tileLayer(
		'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
	).addTo( map )
}

デバッグ

npm run start

勘所

html, body, #mapid { height: 100% }

で地図を囲む全ての要素の height を 100% にしないと地図が表示されません。

body { margin: 0 }

がないと、地図の左上にちょっと余白ができて、右下が切れてしまいます。

L.map( 'mapid' ).setView( [ 35.6825, 139.752778 ], 15 )

で id が mapid の div に地図をつけています。
center と zoom の両方を指定しないと、地図が表示されません。

発展

デフォルトのマーカー

デフォルトのマーカーを皇居に置いてみます。

preload.js の onload の中に以下の内容を加えます。

    L.marker( [ 35.6825, 139.752778 ] ).addTo( map ).bindPopup( 'Imperial Palace.' ).openPopup()

divIcon を使ったマーカー

divIcon を使うと、マーカーのアイコンとして div を使えます。div なんでやりたい放題できます。とりあえず赤いぽっちにしてみます。

index.html の <style>に以下の内容を加えます。

.marker {
    text-align      : center
;   color           : white
;   font-size       : 16
;   border-radius   : 8px
;   box-shadow      : 8px 8px 8px rgba( 0, 0, 0, 0.4 )
}
.red {
    background      : red
}

preload.js の onload の中に以下の内容を加えます。

    const   redMarker = { icon: L.divIcon( { className: 'red marker', iconSize: [ 16, 16 ] } ) }
    L.marker( [ 35.6825, 139.752778 ], redMarker ).addTo( map ).bindPopup( 'Imperial Palace.' ).openPopup()

マーカークラスターグループ

leaflet.markercluster をインストールすると、地図にたくさんマーカーを置くとき、近接するマーカーをまとめて表示するような機能を実現できます。
とりあえず5個のマーカーのクラスターグループを北の丸公園においてみます。

index.html に以下の内容を加えます。

<link
    rel="stylesheet"
    href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"
>
<link
    rel="stylesheet"
    href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"
>
<script
    src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"
></script>

preload.js の unload の中に以下の内容を加えます。

	map.addLayer(
		L.markerClusterGroup().addLayer(
			L.marker( [ 35.691, 139.752 ], redMarker )
		).addLayer(
			L.marker( [ 35.692, 139.752 ], redMarker )
		).addLayer(
			L.marker( [ 35.690, 139.752 ], redMarker )
		).addLayer(
			L.marker( [ 35.691, 139.753 ], redMarker )
		).addLayer(
			L.marker( [ 35.691, 139.751 ], redMarker )
		)
	)

5個まとめて表示されています。

5 と書いてあるクラスターにズームしてみます。

余談

z-index について

この記事では地図の上に他の HTML エレメントがのっていませんが、たとえばメニューみたいなものを上にのせたいというような場合が考えられます。この時 #mapid の z-index を 0 にするか、上にのせたいものの z-index を 400 以上にする必要があります。

#mapid {
    z-index         : 0
}

警告について

View メニューから Toggle Developer Tools を選ぶと、HTML のデバッガが出てきて、console をみると以下のような警告が表示されています。

security-warnings.ts:179 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
    Policy set or a policy with "unsafe-eval" enabled. This exposes users of
    this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.

これが気になる方は preload.js の頭で

process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = '1'

としてください。

もう一つの方法としてスタンドアローンアプリであれば、index.html に以下のように書けばいいのですが、Leaflet を使う場合はこれを書くと地図データをダウンロードできなくなります。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

Leaflet 1.6.0

前回の記事（Vue で地図を表示する無料で最短の道）を書いた時に比べ Leaflet は少し書きやすくなりました。

また前回は npm でインストールしたのですが、いずれにしろネットワークが必ず必要なので今回は CDN にしてみました。

最後に

leaflet は機能豊富なライブラリなので、いくらでもネタはあるんですが、キリがないのでこのへんにしておきます。最後までおつきあいいただいてありがとうございました。