マップ(OpenStreetMap)が賑やかになる
ここまでのあらすじ
前回、小平市の公園マップをuMap(OpenStreetMap base)で公開しました。検索などしてみると、動画や音声をデータに挿入している例がありました。試してみたくて試作品を作ってみました。結果、なんとか動くものが出来ました。地図と関連づけたポイントの情報が豊かになります。説明、イベント、ゲーム、店舗などが楽しくなりそうでワクワクします。
試作品紹介
動画挿入
イメージ
音声挿入
イメージ
どちらかといえば動画や音声コンテンツを作成するのに時間がかかります。慣れると地図自体は簡単に作成できます。
今回の内容は以下のコンテンツの続き的な内容になります、なんだこれは！な人は以下のコンテンツをチェックしてください。
だったらどうするの
基本はuMapポップアップオプションiframeをいじってやるだけです。uMapの動的なプロパティのヘルプでは【引用開始】Iframe: {{{http://iframe.url.com}}}【引用終了】となっています。つまりiframe挿入は{{{ }}}で括ってやります。さらにデータ指定が{ }がつくのです。ー波括弧四重の嵐ですー 試作品では地図の表示範囲を狭くしているので、表示サイズも設定しています。実施にはヘルプ観ながらいろいろやってみてください。
ダメ押し iframeurlって
念ために、ifarmeurlは<iframe src=”url”> </iframe>内の「”」 と「”」に挟まれた部分です。動画や音声のオートプレイのオンオフはそちらのプラットホーム側で行ってください。この場合はsoundcloud、youtubeが該当します。
【追記】iframeurl再び 2021/05/24
動画挿入にiframeurlがについて、質問があったので追記します。やはり最初にトライしたとき、分かりにくくて2-3日かかり、日本語の検索ではヒットしないので、英文で検索をしてたぶん下記のページが正解です。 Import iframe into Umap popup
help.openstreetmap.org
My images are displaying property in the popup, but I’m seeing broken links for all the videos. I have tried adding the video links manually in the description box for the popup and it works fine: {{{https://www.youtube.com/embed/8hy8y-7FbVA}}}
上記の表記法に従えば本ページのyoutubeへのリンクはhttps://www.youtube.com/embed/6gK9vhalAQ8 で有ることを確認しました。
先の検索では
But when I import this same link via csv and geojson, it doesn’t display.
の表記もあるので、私はslideshare スライド3／8 に有るように、CSVをコピーして直接webに貼り付けております。もし問題がでた場合にはそちらも参照して下さい。
追記は以上です。
