今日やったこと
1. 天気&地図アプリの基本機能作成
- Svelteを使い、都市名を入力して天気を検索できるインターフェースを実装。
2. Leafletによる地図表示の導入
- Leafletライブラリで地図を表示。
- 初期表示は東京周辺(緯度35.68, 経度139.76)に設定。
3. OpenWeatherMap API連携
- APIを利用し、入力された都市の現在の天気情報を取得。
- 気温、湿度、風速、天気説明を画面に表示。
4. マーカーの動的更新処理
- 検索都市に合わせて地図の中心を移動。
- 既存マーカーを削除し、新たにマーカーを設置して重複表示を防止。
5. UI・レイアウト調整
- 検索バーをページ上部に配置し、その下に地図を表示。
- 地図のサイズ調整やエラーメッセージ表示でユーザビリティ向上。
6. 環境変数の活用
- APIキーを環境変数で管理し、セキュリティを確保。
https://svelte-weather-app-psi.vercel.app/