マップ(OpenStreetMap)に動画と音声を挿入してみた

マップ(OpenStreetMap)が賑やかになる

ここまでのあらすじ

前回、小平市の公園マップをuMap(OpenStreetMap base)で公開しました。検索などしてみると、動画や音声をデータに挿入している例がありました。試してみたくて試作品を作ってみました。結果、なんとか動くものが出来ました。地図と関連づけたポイントの情報が豊かになります。説明、イベント、ゲーム、店舗などが楽しくなりそうでワクワクします。

試作品紹介

動画挿入

イメージ

地図へのリンク

音声挿入

イメージ

地図へのリンク

どちらかといえば動画や音声コンテンツを作成するのに時間がかかります。慣れると地図自体は簡単に作成できます。

今回の内容は以下のコンテンツの続き的な内容になります、なんだこれは!な人は以下のコンテンツをチェックしてください。

だったらどうするの

基本はuMapポップアップオプションiframeをいじってやるだけです。uMapの動的なプロパティのヘルプでは【引用開始】Iframe: {{{http://iframe.url.com}}}【引用終了】となっています。つまりiframe挿入は{{{ }}}で括ってやります。さらにデータ指定が{ }がつくのです。ー波括弧四重の嵐ですー 試作品では地図の表示範囲を狭くしているので、表示サイズも設定しています。実施にはヘルプ観ながらいろいろやってみてください。

ダメ押し iframeurlって

念ために、ifarmeurlは<iframe src=”url”> </iframe>内の「”」 と「”」に挟まれた部分です。動画や音声のオートプレイのオンオフはそちらのプラットホーム側で行ってください。この場合はsoundcloud、youtubeが該当します。

  • 19
    シェア
スポンサーリンク
スポンサーリンク




PHP Code Snippets Powered By : XYZScripts.com