Maptomo API <MaptomoScreen>
Maptomo API のドキュメントです。
Operating environment
Browser
- Chrome 最新版
- Firefox 最新版
Sample Program
Engine / Layer
Engine | Layer: code |
Leaflet |
|
Google Map ※利用には、別途 Google Maps Platform の Maps JavaScript API が必要 |
|
Overlay
Engine | Overlay: code |
ALL |
|
Methods
地図や図形、ポイントなどを操作するメソッドです。
Method | Return | Description | Counter |
---|---|---|---|
draw(<Object>certif, <Object>params) | -- | パラメータをもとに地図を描画する | +1 ※地図レイヤーを切り替えた時も含む |
getMapEngine | String | 地図エンジンの種類を文字列で返す | 0 |
getMapContainerId | String | 地図を描画する要素IDを文字列で返す | 0 |
getSelectShape() | JSON Object | 地図上で選択されているポイント、ライン、ポリゴンのカスタム情報を配列で返す | 0 |
moveLocation([] <point>) | -- | 指定の座標があればそこを中心に移動し、なければ中心に戻す | 0 |
exportGeoJson() | JSON Object | 地図上に描画されているデータを配列で返す | 0 |
locationGeocoder(address) | JSON Object | 住所や地名から地図を移動する(未搭載)
|
0 |
[未]geoCoder | JSON Object | 住所文字列からGeocode<lon, lat>を返す | -- |
* Counter: Maptomo API アクセスのカウント数
Properties
certif
Property | Type | Default | Description |
---|---|---|---|
maptomo | String | '' | MaptomoAPI Key |
gmap | String | '' | Google Maps API Key |
params
Property | Type | Default | Description |
---|---|---|---|
container | Object <container> | container を参照 | 地図を描画するHTML要素 |
center | [] <point> | point を参照 | 初期の中心座標 |
engine | String | 'leaflet' | 利用する地図エンジン
|
layer | String | 'osm' | エンジンごとのレイヤーの種類 |
size | Number | 16 | 地図の縮尺サイズ {1..20} サイズの最小値、最大値はレイヤーによって異なる |
lang | String | 'ja' | 言語 |
option | Object <option> | option を参照 | 地図オプション |
style | Object <style> | style を参照 | 描画する要素のスタイル情報 |
features | [] <features> | features を参照 | 描画する点、線、面の情報 |
Point
Property | Type | Default | Description |
---|---|---|---|
coordinates | [] | * | GeoJSONの仕様に則り、配列内は経度(longitude),緯度(latitude)の順番 |
Options
container
Property | Type | Default | Description |
---|---|---|---|
id | String | 'mt-map' | 地図を描画する要素ID |
height | String | '600px' | 地図の高さサイズ |
width | String | 'auto' | 地図の横サイズ |
margin | String | '0px' | 利用する地図エンジン |
option
Property | Type | Default | Description |
---|---|---|---|
mode | String | 'draw' |
|
//sidebar | Boolean | true | 描画のスライドの表示/非表示 * 未搭載 |
zoom | Boolean | true | 拡大縮小ボタンの表示/非表示 |
present | Boolean | true | 現在地に移動するボタンの表示/非表示 * 利用にはブラウザごとに現在地の認識の許可が必要 |
draw | Boolean | true | 描画ボタンの表示/非表示 * option.mode = show の際には、falseになる |
layer | Boolean | true | レイヤー切り替えボタンの表示/非表示 Layerの一覧 |
overlay | Boolean | true | オーバーレイ選択の表示/非表示 Overlayの一覧 |
scale | Boolean | true | 距離の表示/非表示 |
logo | Boolean | true | Maptomo ロゴの表示/非表示 |
dragging | Boolean | true | ドラッグで地図の中心地を移動する |
touchZoom | Boolean | true | タッチによるズーム操作 |
scrollWheelZoom | Boolean | true | マウスホイールによるズーム操作 |
doubleClickZoom | Boolean | true | ダブルクリックによるズーム操作 |
boxZoom | Boolean | true | [Shift] + ドラッグによるボックスズーム操作 |
tapOperation | Boolean | true | タップによるズーム操作 |
keyboardOperation | Boolean | true | キーボードによる操作 |
miniMap | Boolean | true | * 未搭載 |
selectColor | String | '#cc511a' | 選択色 |
style
Property | Type | Default | Description |
---|---|---|---|
selectedColor | String | '#cc511a' | 選択時の要素カラー |
presentColor | String | '#cc511a' | 現在地ポイントのカラー |
defalutTitle | String | 'Map title' | 描画時のタイトル名の接頭文字 |
defalutColor | String | '#0066ff' | |
defalutIconClass | String | 'fas fa-home' | |
defalutIconSize | String | 'normal' | ※未搭載 |
opacity | Number | 0.8 | |
fill | Boolean | true | |
drawColor | String | '#00bb00' |
features
Property | Type | Default | Description |
---|---|---|---|
id | Number | null | データ詳細ページに移動する際に利用するID |
type | String | null | 描画スタイル
|
coordinate | [] | null | 座標 point, line, polygon仕様 |
popup | Boolean | true | ポップアップを表示するかどうかのフラグ ※falseの場合、title,html,linkがあってもポップアップされない |
title | String | '' | ポップアップに表示される文字列 |
html | String | '' | ポップアップに表示されるHTML形式の文字列 ※この値があると、title, linkより優先される |
link | [] | null | ポップアップに表示される文字のリンク化 [url,target] ex. ['https://maptomo.com', '_blank'] |
class | String | 'fas fa-home' | ポイントアイコンを指定 Font Awesome Freeから選択 |
color | String | '#cc511a' | 選択色 |
selected | Boolean | false | 選択可否 |
center | [] | null | 描画矩形の中心座標 point ※pointの場合には、coordinateになる |
custom | Object | {} | 選択しているデータを外部連携サービスにJSON形式で返す |
coordinate
Property | Type | Example | Description |
---|---|---|---|
point | [] | [lng, lat] | 描画する点 *GeoJSON仕様(経度、緯度順に注意) |
line | [[]] | [[lng, lat], [lng1, lat1], [.., ..]] | 描画する線 *GeoJSON仕様(経度、緯度順に注意) |
polygon | [[[]]] | [[[lng, lat], [lng1, lat1], [.., ..]]] | 描画する面 *GeoJSON仕様(経度、緯度順に注意) |
geofile | [[]] | [[url],[url1],[..]] | 描画するGeoJSON形式のURL |