React+Electron+Vite+TypeScript
yarn create @quick-start/electron以下のことを聴かれるので、適当な回答をする。
√ Project name: ... electron-app
√ Select a framework: » react
√ Add TypeScript? ... No / [Yes]
√ Add Electron updater plugin? ... No / [Yes]
√ Enable Electron download mirror proxy? ... No / [Yes]できたプロジェクトディレクトリに入り.yarnrc.ymlがないので、追加して`yarn`する。
cd electron-app
echo "nodeLinker: node-modules" > .yarnrc.yml
yarnLeaflet
Leafletをインストール。
yarn add leaflet react-leaflet
yarn add -D @types/leaflet地図を表示
assets/base.cssやassets/main.cssに追加するのが良いと思いますが、分かりやすくファイルを分けassets/simpleMap.cssとして分離させています。
/* 地図を画面全体に表示 */
.leaflet-container {
width: 100vw;
height: 100vh;
}
/* 通常カーソル */
.leaflet-grab {
cursor: auto;
}マップを作成。マーカーは福岡タワーに設定。
import { LatLng } from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
import './assets/simpleMap.css'
function App(): JSX.Element {
const position = new LatLng(33.59337, 130.35152) // 福岡タワー
return (
<MapContainer center={position} zoom={13}>
<TileLayer
attribution='© <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
url="https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"
/>
<Marker position={position}>
<Popup>
PopUp!! PopUp!! PopUp!! <br /> ポップアップ
</Popup>
</Marker>
</MapContainer>
)
}
export default Appセキュリティポリシーを変更。ネット上から画像を取得するので、img-srcにhttps:を追加
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Electron</title>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>実行する
yarn dev
コメントを残す