はじめに
地図アプリってどうやって作成すれば良いんだろう？って思ったことありませんか？今の時代、そんな時には ChatGPT を使えば良いのです。
という安易な発想で地図アプリを作成してみます。
ChatGPT に聞いてみた
ついでに artifacts.json のサンプルも作ってもらっちゃいましょう
実際に作ってみる
-
まずは、以下の手順を参考にして開発環境を作成します。
-
Leaflet をインストールします。
ターミナルnpm i leaflet -
SvelteKit を使うのでファイル名の対応関係は以下になります。
App.svelte → src/routes/+page.svelte
-
ChatGPT の出力内容をコピペします。
-
最終的なフォルダ構成はこんな感じです。
ターミナル/workspaces/relics-map-svelte (main) $ tree -I ".gitignore|.svelte-kit|node_modules". . ├── LICENSE ├── README.md ├── jsconfig.json ├── package-lock.json ├── package.json ├── playwright.config.js ├── src │ ├── app.d.ts │ ├── app.html │ ├── index.test.js │ └── routes │ ├── +page.svelte ←修正したファイル │ ├── Map.svelte ←追加したファイル │ └── artifacts.json ←追加したファイル ├── static │ └── favicon.png ├── svelte.config.js ├── tests │ └── test.js └── vite.config.js
結果
あれ？おかしい
タイルがバラバラになっちゃってます。。。
原因
Leaflet の CSS を適用していなかったのが原因でした。
修正
というわけで、以下の様に CSS をインポートします。参考: https://ja.vitejs.dev/guide/features.html#css
<script>
import { onMount } from 'svelte';
import L from 'leaflet';
import artifacts from './artifacts.json';
+ import css from 'leaflet/dist/leaflet.css';
let map;
onMount(() => {
map = L.map('map').setView([35.658068, 139.751599], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
artifacts.forEach(artifact => {
const { name, description, lat, lng } = artifact;
const marker = L.marker([lat, lng]).addTo(map);
marker.bindPopup(`<h3>${name}</h3><p>${description}</p>`);
});
});
</script>
<div id="map" style="height: 100vh;"></div>
修正後の結果
ちゃんと表示できましたー！
さて、ここからが本題です。プロットされてるかどうかも確認します。
マウススクロールで縮小して、東北方面にドラッグしてみると、、、
ちゃんとプロットされてましたー！
まとめ
ChatGPT を使って地図アプリを作成してみました。完璧とはいきませんでしたが、自分で調べて作成する場合を想像して比べてみると1時間ぐらいは短縮できたはずです。
また、結構曖昧な質問をしたにもかかわらず、Svelte と Leaflet という条件に問題なく答えてくれていることに驚きです。（最近は ChatGPT を使い慣れたせいか、この驚きが薄れてきているのを感じています。）
さらに質問すれば拡張の方法もきっと教えてくれるでしょう。
ChatGPT ってすごいですね！