Soracom

Users

ドキュメント
Home ドキュメント SORACOM Lagoon 3 Panel リファレンス

Soracom Map Panel

Panel の種類 で「Soracom Map Panel」を選択すると、Harvest Data に含まれる緯度経度をもとに地図上に円を表示します。

緯度と経度として扱うデータを選択できます

デフォルトでは、データに含まれる latitude を緯度、longitude を経度として地図に円を表示します。ほかの系列を利用する場合は、Panel に表示するデータを選択する (Query) ときに、データフォーマットとして「Map」を選択し、[Latitude] で緯度として扱う系列を選択し、[Longitude] で経度として扱う系列を選択してください。設定が反映されない場合は、[Apply] をクリックして、Dashboard に戻ると反映されます。

Soracom Map Panel Soracom Map Panel

Soracom Map Panel の主な特徴は以下のとおりです。

  • 地図のデザインを選択できます。
  • 選択したキーの値にあわせて、円の色や大きさ、カスタムアイコンを変更できます。
  • 円のかわりに画像 (カスタムアイコン) を表示できます。
  • GeoJSON を利用して、地図にマーカーを表示できます。

設定

ここでは Soracom Map Panel に特有の設定について説明します

ここで説明されていない設定は、Panel の種類によらない共通の設定です。詳しくは、Panel の可視化に関する共通オプション を参照してください。ただし、以下の機能は Soracom Map Panel では利用できません。

[Map Options]

ここでは、[Map Options][Map Visual Options][Language] で「日本語」を選択した場合の項目名で説明しています。

[マップ表示オプション]
項目説明
[言語][Map Options] の設定項目の表示言語を選択します。
[マッププロバイダー]

利用する地図のプロバイダーを選択します。

  • マッププロバイダーによっては、Dashboard を表示しているブラウザからの一定時間あたりのリクエスト数が多いと判断された場合に、地図が表示されない場合があります。地図が表示されないことが多い場合は、他のマッププロバイダーを利用してください。この動作は Lagoon 3 ではコントロールできません。
  • [マッププロバイダー] を選択したときに、上の図よりも白い地図が表示されることがあります。一度 Dashboard を保存する と、正しい表示に戻ります。
[表示範囲をマーカーに合わせる]

Dashboard を表示したときの地図の中心を設定します。

  • オン: すべてのデータの中心を、地図の中心として表示します。
  • オフ: [中央] で地域を選択したり、緯度経度を直接入力して、地図の中心を設定します。
[中央]

Dashboard を表示したときの地図の中心を設定します。

  • (0°, 0°): 緯度 0 °、経度 0 ° の地点。
  • North America: 北米。
  • Europe: ヨーロッパ。
  • West Asia: 西アジア。
  • SE Asia: 東南アジア。
  • custom: 任意の地点。緯度 (例: 35.7) と経度 (例: 139.7) を入力してください。
  • Last GeoHash: 最後の tags.geohash に設定された GeoHash で示された地点。

[表示範囲をマーカーに合わせる] をオフにしたときのみ表示されます。

[初期ズーム]

Dashboard を開いた際の拡大率を 118 で設定します。

[表示範囲をマーカーに合わせる] をオフにしたときのみ有効です。

[円のサイズの最小値][円のサイズの最大値]

Query ごとに、[クエリ {Query 名} オプション][値のキー] で選択したキーの値に応じて、地図に表示する円の半径 (ピクセル) を変更できます。

  • [円のサイズの最小値] では、値が最小値のときの円の半径を指定します。
  • [円のサイズの最大値] では、値が最大値のときの円の半径を指定します。
  • [クエリ {Query 名} オプション][値のキー] を設定した場合に有効です。
  • Query ごとに、最小値と最大値を設定することはできません。
[マウスホイールでのズーム]オンにすると、マウスホイールを回してズームイン / ズームアウトする機能を有効化します。
[クエリ {Query 名} オプション]

Query ごとに表示方法を設定できます。設定した Query 名が「A」の場合は [クエリ A オプション] と表示されます。

[クエリ {Query 名} オプション] が表示されないときは

Query の設定を確認してください。

  • Panel に表示するデータを選択する (Query) ときに、データフォーマットとして「Map」を選択し、[Latitude] で緯度として扱う系列を選択し、[Longitude] で経度として扱う系列を選択してください。
  • データフォーマットとして「Map」を選択しない場合でも、[Table view] をオンにしたときに latitudelongitude が表示されるときは、[クエリ {Query 名} オプション] が表示されます。
クエリオプションは Query 名に紐づけて保存されます

たとえば、「Device」という名前の Query に対してクエリオプションを設定した場合、設定後に Query 名を「Device ABC」に変更すると、クエリオプションが初期値に戻ります。ただしそのあとに、Query 名を「Device」に戻すと、クエリオプションが復元されます。

なお、クエリオプションは、Panel ごとに保存されます。以下の点に注意してください。

  • Query 名に紐づけて保存されたクエリオプションは、ほかの Dashboard や Panel で利用することはできません。
  • Query 名に紐づけて保存されたクエリオプションは、Dashboard または Panel を削除すると、復元できません。
項目説明
[最新データのみ表示]

オンにすると、最新の位置情報のみが円で表示され、過去の位置情報が非表示になります。

[最新データのみ表示] をオンに設定し、[軌跡を表示] をオンに設定すると、最新の位置情報の円と、軌跡が表示されます。

[値のキー]

地図に表示する値のキーを選択します。選択したキーの値にあわせて、円の色、円の大きさ、カスタムアイコンのデザインや大きさが自動的に変更されます。

3 つの入力欄には、以下の内容を設定します。

  • 地図に表示する値のキー (例: battery)。
  • 「低」と「中」のしきい値。ちょうどこの値のときは「中」の色 (画像) で表示されます。
  • 「中」と「高」のしきい値。ちょうどこの値のときは「中」の色 (画像) で表示されます。
円の色、円の大きさ、カスタムアイコンは設定できます
  • 円の色は、[色] で設定します。
  • 円の大きさは、[マップ表示オプション][円のサイズの最小値][円のサイズの最大値] で設定します。
  • カスタムアイコンは、[カスタムアイコン] で設定します。
[軌跡を表示]

オンにすると、データを時系列に結んだ線が表示されます。

  • [色]: 軌跡の色を 2 色選択します。指定した色はそのまま使われません。指定した色よりも少し暗い色が利用されます。
  • [アニメーション]: オンにすると、アニメーションで進行方向を表現できます。

[最新データのみ表示] をオンに設定し、[軌跡を表示] をオンに設定すると、最新の位置情報の円と、軌跡が表示されます。

[カスタムアイコン]

オンにすると、カスタムアイコンを表示できます。

  • [サイズ]: アイコンの横幅と高さを指定します。
  • [画像 URL (低)]: [値のキー] で選択したキーが、1 つ目のしきい値よりも小さいときに表示する画像の URL。
  • [画像 URL (中)]: [値のキー] で選択したキーが、1 つ目のしきい値 ~ 2 つ目のしきい値のときに表示する画像の URL。
  • [画像 URL (高)]: [値のキー] で選択したキーが、2 つ目のしきい値よりも大きいときに表示する画像の URL。
しきい値の境界に注意してください

たとえば、[値のキー] で、サンプルデータソース (Demo) の「battery」(0 ~ 1 の値をとります) を選択した場合は、1 つ目のしきい値に「0.2」、2 つ目のしきい値に「0.8」を指定します。この場合、「0 ~ 0.199」のときは [画像 URL (低)] の画像、「0.2 ~ 0.8」のときは [画像 URL (中)] の画像、「0.801 ~ 1」のときは [画像 URL (高)] の画像で表示されます。もし、しきい値に「0」と「1」を指定すると、すべて [画像 URL (中)] の画像で表示されます。

URL でアクセスできる画像を指定してください
  • https:// で始まる URL だけが利用できます。
  • 使用を許諾されている画像を使用してください。SORACOM アイコンセット は自由に利用できます。
  • Lagoon には、画像をアップロードできません。
  • Harvest Files にアップロードした画像は利用できません。
  • アクセスするために基本認証などが必要な画像は利用できません。
[色]

円の色を設定します。ここで設定する 3 色のうち、円がどの色で表示されるかは、[値のキー] で選択したキー、およびしきい値の設定によって決まります。

  • 1 色目: [値のキー] で選択したキーが、1 つ目のしきい値よりも小さいときの円の色です。
  • 2 色目: [値のキー] で選択したキーが、1 つ目のしきい値 ~ 2 つ目のしきい値のときの円の色です。
  • 3 色目: [値のキー] で選択したキーが、2 つ目のしきい値よりも大きいときの円の色です。
しきい値の境界に注意してください

たとえば、[値のキー] で、サンプルデータソース (Demo) の「battery」(0 ~ 1 の値をとります) を選択した場合は、1 つ目のしきい値に「0.2」、2 つ目のしきい値に「0.8」を指定します。この場合、「0 ~ 0.199」のときは 1 色目、「0.2 ~ 0.8」のときは 2 色目、「0.801 ~ 1」のときは 3 色目で表示されます。もし、しきい値に「0」と「1」を指定すると、すべて 2 色目で表示されます。

[非表示にする項目]
項目説明
[すべての値が空のとき][値のキー] で選択したキーの値が null のみの系列を非表示にします。
[すべての値が 0 のとき][値のキー] で選択したキーの値が 0 のみの系列を非表示にします。
[GeoJSON]

GeoJSON を入力して、地図にマーカーを表示できます。

東京駅にマーカーを表示する例:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "stroke": "#0000FF",
        "stroke-opacity": 1,
        "stroke-width": 1,
        "fill": "#0000FF",
        "fill-opacity": 0.1
      },
      "geometry": {
        "coordinates": [
          [
            [
              139.7656959616407,
              35.68457932389515
            ],
            [
              139.76359310977148,
              35.67811298023783
            ],
            [
              139.76689759127953,
              35.677415769033246
            ],
            [
              139.77071705691657,
              35.68349873150636
            ],
            [
              139.7656959616407,
              35.68457932389515
            ]
          ]
        ],
        "type": "Polygon"
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          139.76672592990087,
          35.68107605989954
        ],
        "type": "Point"
      }
    }
  ]
}