すみだメタ観光マップ / umap用Tips / データのダウンロード

すみだメタ観光マップは先日の記事の通りオープンソースのumapを使用しています。作成方法はそれほど難しいものではなく、データベース構造（といっても列/フィールドが何か）とそれを表現するumapのテンプレートがあれば同じものを作ることができます。この記事では、その２つ＋αのTipsを解説します。

データベース構造

メタ観光マップに掲載するタグは位置情報を持っている情報ですので、ごく簡単に行ってしまうと位置情報（umapでは緯度経度）とその内容があれば事足ります。すみだメタ観光マップではそれに加えて参照元のサイトなども掲載していますので、それらを別フィールドに格納して対応しています。データベースは次のような内容で構成されています。

ID　：マップ全体でユニーク。他所から参照する際にこのIDを使用します。
name　： タグの名称
author　：ワークショップや作品等でその作者の掲載が必要な時に使用
orig_URL　：参照元サイト
orig_Name　：参照元名称
spot_name　：場所の名前
layer　：レイヤー名称
layer_ID　：レイヤーID
description　：本文。この中にさまざまな内容を記入します。
img_URL　：画像のURL
license　：画像のライセンス
gm_URL　：グーグルマップへの参照URL
lat　：緯度
lon　：経度

umapではさまざまな形式（geojson, csv, gpx, kml, osm, georss, umap）をインポート対応していますが、緯度経度をフィールドで持たせたcsvをすみだメタ観光マップでは使用しました。
１つのレイヤーにつき１つのcsv、文字コードはUTF-8で用意すると良いでしょう。これをumapのデータインポートでインポートします。
最初にメタタグを整理する際には１つのシートになっている場合が多いと思います。それをレイヤーごとのファイルに分けるにはこちらのエクセル分割ツールなどが便利です。エクセル分割ツール（ハリーのジンジニアに俺はなる！！）。このツールを少しカスタマイズしてcsv出力にして使うと良いでしょう。

すみだメタ観光祭のタグはこちらからダウンロードできます。umapに読み込む際にはレイヤーごとに読み込むことになります。

umapで使用するテンプレート

umapではテンプレートを使って表示する内容をカスタマイズすることができます。今回のすみだメタ観光祭では次のようなテンプレートを使用しました。上のデータベースで記述されている内容が適所に使用されています。テンプレートで書ききれない内容は{description}に書いてしまえば良いのですが統一されているものについてはデータベース＋テンプレートの方が管理が簡単になります。なお、umapの機能として動画埋め込みなどもできますので、もし多くないようならその記述は{description}の中に書いてしまうと良いですし、ほとんど動画埋め込みを行うならその部分もテンプレート化すると良いでしょう。

※map_111111はそれぞれのマップのオリジナルIDとなります。
※自己参照を行うためにumapの設定でFeature identifier keyをIDに指定しておく必要があります。
※リンクとして使用する各SNSの画像は適宜用意してください。

## レイヤー：{layer}
{name}
場所：{spot_name}
{{{img_URL}|300}}
{description}
参照サイト：[[{orig_URL}|{orig_Name}]]
共有：
[[https://umap.openstreetmap.fr/ja/map/map_111111?feature={ID}#17/{lat}/{lon}|{{https://リンク用画像.png|15}}]]
[[https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fumap.openstreetmap.fr%2Fja%2Fmap%2Fmap_111111%3Ffeature%3D{ID}%2317%2F{lat}%2F{lon}|{{https://LINE用画像.png|15}}]]
[[https://twitter.com/share?url=https%3A%2F%2Fumap.openstreetmap.fr%2Fja%2Fmap%2Fmap_111111%3Ffeature%3D{ID}%2317%2F{lat}%2F{lon}&hashtags=すみだメタ観光マップ|{{https://Twitter用画像.png|15}}]]
[[https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&u=https%3A%2F%2Fumap.openstreetmap.fr%2Fja%2Fmap%2Fmap_111111%3Ffeature%3D{ID}%2317%2F{lat}%2F{lon}&display=popup&ref=plugin&src=share_button|{{https://Facebook用画像.png|15}}]]
[[{gm_URL}|Googleマップで見る]]
[[https://umap.openstreetmap.fr/ja/map/map_111111?datalayers={layer_ID}#15/{lat}/{lon}|このレイヤーだけを表示する]]
画像のライセンス：{license}

すみだメタ観光マップで使用したアイコン

すみだメタ観光マップではクールなフリーのアイコンやピクトグラムを使用しています。使いやすいアイコン類はこちらにありますので是非ご参照ください。墨田メタ観光マップではアイコンは白として背景色で大きな分類を表現するようなシンプルなものにしてあります。

EXPERIENCE JAPAN PICTOGRAMS
ICOON MONO

以上、すみだメタ観光マップのTipsでした。ぜひ皆さんもumapを活用してメタ観光マップを作ってみてください。