リスボンの フォトスポット デジタルマップ を作った。

リスボンのフォトスポットを地図でわかりやすく紹介できるようにしてみました。
リスボン市内のいろんなところを歩いたなかで撮った写真たちの供養の場でもあります。

来たばかりの時の写真だけなので、スポットはこれから増やしていきます。時間ある時に訪れてみてね。

Tsukurue

[デジタルマップ]リスボンのフォトスポット | Tsukurue リスボンの人気フォトスポットを地図でわかりやすく紹介。歴史ある街並みや撮影ポイントを写真付きでチェックできます。観光や撮影旅行のプラン作りに便利です。

WordPressの管理画面でスポットの追加削除更新、Mapの全体設定などが含まれつつ、固定ページでフォトマップとして利用できるようにしました。

機能としては下記。

 インタラクティブ地図の作成・管理

• MapLibre GL JSを使用した高性能な地図表示
• カスタム投稿タイプ「Map List」で地図を管理
• 地図の中心座標、ズームレベル、表示範囲の設定
• マーカーのタイトル表示制御（ズームレベルに応じて表示/非表示）

2. スポット管理システム

• 地図上に位置情報付きスポットを配置
• 各スポットに画像、タイトル、説明文を設定
• スポットの表示/非表示切り替え
• カテゴリー分類機能
• ドラッグ&ドロップでスポット位置を調整

3. 画像管理・EXIF自動取得

• 画像アップロード時にEXIFデータ（GPS座標）を自動抽出
• 画像のサムネイル・フルサイズ表示
• Swiper.jsを使用した画像スライダー
• GLightboxによる画像モーダル表示

4. フロントエンド機能

• フルスクリーンモードでの地図表示
• スポット検索機能
• カテゴリーフィルタリング
• マーカークラスタリング（多数のスポットをグループ化）
• スポット情報パネル（画像スライダー付き）
• GoogleMap連携（位置検索・ルート検索）

5. SEO・SNS対応

• OGP（Open Graph Protocol）対応
• Twitter Card対応
• カスタムメタデータ設定
• 埋め込み設定

6. 多言語対応

• Polylangプラグインとの連携
• 言語切り替え機能

一番大変だったのは写真を探して、設定するところかな…。
面倒と思ったのは Safari とかのモバイル対応。

Polylangプラグインと連携して他言語化はできるけど、翻訳が手間なので後回し。翻訳APIに投げれば良さそうだけど、タイミングやリクエスト数を考える必要がありそうなので優先度は低め。

個人的には、このページが旅行の計画に少しでも役に立てば嬉しいところ。
今後は、モデルルート、スタンプラリー機能もつけてみるぞ。