GEOMAP()
構文: GEOMAP( [geomapID()] [, tileTemplate()] [, size()] )
GEOMAP は、指定した座標に基づいて地図上にマーカーと図形を描画します。CHART と似ていますが、スカラー値の代わりに座標を使用します。対応する座標系は WGS84 です。
入力データはJavaScriptオブジェクトで指定します。各オブジェクトには type と coordinates フィールドが必須で、properties は省略可能です。type に応じたレイヤーを地図上に描画します。たとえば type: "circle" は、指定した座標に円を表示します。
tileTemplate()
構文: tileTemplate(url_template)
タイルサーバーのURLテンプレートを指定します。既定値は https://tile.openstreetmap.org/{z}/{x}/{y}.png です。
重要: 社内のファイアウォールやセキュリティポリシーによって既定のタイルサーバーにアクセスできない場合は、内部にタイルサーバーを構築し、
tileTemplate()でURLを設定してください。
タイルサーバーの構築方法はこの文書の対象外です。詳細は https://wiki.openstreetmap.org/wiki/Tile_servers を参照してください。
tileGrayscale()
構文: tileGrayscale(scale)
scalefloat:タイル画像をグレースケールで表示する際の値(0 ≤ scale ≤ 1.0、既定値は0)
geomapID()
構文: geomapID(id)
自動生成されるIDの代わりに使用する地図のID(文字列)を指定します。
size()
構文: size(width, height)
widthstring:地図の幅(例:'800px')heightstring:地図の高さ(例:'600px')
レイヤー
レイヤーは、地図上に表示するマーカーや図形です。GEOMAP() の入力はJavaScriptオブジェクトで表した辞書構造です。type と coordinates フィールドは必須で、properties は省略可能です。
形式
{
type: "circle", // marker、circleMarker、polylineなど
coordinates: [Lat, Lon],
properties: {
radius: Radius,
color: "#FF0000",
weight: 1
}
}| 名前 | 型 | 説明 |
|---|---|---|
type | String | レイヤーの種類(marker、circle、circleMarker など) |
coordinates | []Float, [][]Float… | 緯度と経度の配列 |
properties | Dictionary | レイヤーの種類に応じたオプション。プロパティを参照 |
marker
| |

circleMarker
プロパティ
| プロパティ | 既定値 | 説明 |
|---|---|---|
radius | 10 | ピクセル単位の半径 |
| |

circle
プロパティ
| プロパティ | 既定値 | 説明 |
|---|---|---|
radius | 10 | メートル単位の半径 |
| |

polyline
FAKE(json({
[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]
}))
SCRIPT({
var points = [];
function finalize() {
$.yield({
type: "polyline",
coordinates: points
});
}
},{
var lat = $.values[0];
var lon = $.values[1];
points.push( [lat, lon] );
})
GEOMAP()
polygon
FAKE(json({
[37, -109.05],
[41, -109.03],
[41, -102.05],
[37, -102.05]
}))
SCRIPT({
var points = [];
function finalize() {
$.yield({
type: "polygon",
coordinates: points
});
}
},{
var lat = $.values[0];
var lon = $.values[1];
points.push( [lat, lon] );
})
GEOMAP()
プロパティ
レイヤー共通のプロパティ
| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
stroke | Boolean | true | 輪郭線を描画するかどうか |
color | String | '#3388ff' | 輪郭線の色 |
weight | Number | 3 | 輪郭線の太さ(px) |
opacity | Number | 1.0 | レイヤーの不透明度 |
fillColor | String | 塗りつぶしの色(省略時は color と同じ) | |
fillOpacity | Number | 0.2 | 塗りつぶしの不透明度 |
popup | Object | null | ポップアップを参照 |
tooltip | Object | null | ツールチップを参照 |
ポップアップ
レイヤーの properties に popup オブジェクトを指定すると、クリック時にポップアップメッセージを表示します。
| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
content | String | テキストまたはHTMLコンテンツ | |
open | Boolean | false | 初期状態でポップアップを開くかどうか |
maxWidth | Number | 300 | ポップアップの最大幅(px) |
minWidth | Number | 50 | ポップアップの最小幅(px) |
| |

ツールチップ
Since v8.0.44地図のレイヤー上に短いテキストを表示します。
| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
content | String | テキストまたはHTMLコンテンツ | |
open | Boolean | false | 初期状態で表示するかどうか |
direction | String | auto | ツールチップの方向(right、left、top、bottom、center、auto) |
permanent | Boolean | false | マウスオーバーなしで常に表示するかどうか |
opacity | Number | 0.9 | ツールチップの不透明度 |
| |

例
CSVファイルからテストデータを読み込み、“TRIP” テーブルに挿入します。 このTQLは、指定したURLからCSVファイルをダウンロードし、 CSV文字列を適切なデータ型に変換してから、 TRIPテーブルにレコードを挿入します。
| |
軌跡
| |

距離と速度
ハバーサインの公式で2地点間の移動距離をメートル単位で計算し、 2地点の時刻差から移動速度を時速(km/h)で計算します。
| |
