Maptomo API <MaptomoScreen>

Confidential

 

Engine / Layer

Engine Layer:  code
Leaflet
  • OpenStreetMap: osm
  • OpenStreetMap Monochrome: osm_monochrome
  • 国土地理院 標準地図: gsi_std
  • 国土地理院 淡色地図: gsi_pale
  • 国土地理院 写真: gsi_seamlessphoto
  • 国土地理院 白地図: gsi_blank
  • 国土地理院 陰影起伏図: gsi_hillshademap
  • MIERUNE: mierune
  • MIERUNE MONO: mierune_mono
  • Stamen Toner-Background: toner_background
  • Stamen Toner-Lite: toner_lite
  • Stamen Watercolor: watercolor
  • Esri World Topo Map: esri_world_top
  • Esri Ocean Base Map: esri_ocean_base
  • Geospatil Information Authority of Japan (GSI): gsi_stden
Google Map
※利用には、別途 Google Maps Platform の Maps JavaScript API が必要
  • ROADMAP: google_roadmap
  • SATELLITE: google_satelite
  • HYBRID: google_hybrid
  • TERRAIN: google_terrain

 

Overlay

Engine Overlay: code
ALL
  • OpenRailwayMap: openrailwaymap

 

Methods

Method Return Description
draw(<Object>certif, <Object>params) -- パラメータをもとに地図を描画する
getMapEngine String 地図エンジンの種類を文字列で返す
getSelectShape() JSON Object 地図上で選択されているポイント、ライン、ポリゴンのカスタム情報を配列で返す
moveDefaultLocation() -- 中心に戻す
exportGeoJson() JSON Object 地図上に描画されているデータを配列で返す
locationGeocoder(address) JSON Object 住所や地名から地図を移動する(未搭載)

  • 複数リストがある場合には先頭になる
  • 戻り値には経度緯度、地図サイズなど
[未]geoCoder JSON Object 住所文字列からGeocode<lon, lat>を返す

 

var mtScreen = new MaptomoScreen(certif, params);
mtScreen.draw();

 

Properties <certif>

Property Type Default Description
maptomo String '' MaptomoAPI Key
gmap String '' Google Maps API Key

 

Properties

params

Property Type Default Description
container Object <container> * 地図を描画するHTML要素
center [] <point> * 初期の中心座標
engine String 'leaflet' 利用する地図エンジン

  • leaflet: Leafletエンジン
  • gmap: Google Maps API
layer String 'osm' エンジンごとのレイヤーの種類
size Number * 地図の縮尺サイズ {1..20}
サイズの最小値、最大値はレイヤーによって異なる
lang String 'ja' 言語
option Object <option> * 地図オプション
style Object <style> * 描画する要素のスタイル情報
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'
  • draw: 描画可能
  • show: 閲覧のみ。矩形を操作できない
//sidebar Boolean true 描画のスライドの表示/非表示
* 未搭載
zoom Boolean true 拡大縮小ボタンの表示/非表示
present Boolean true 現在地に移動するボタンの表示/非表示
* 利用にはブラウザごとに現在地の認識の許可が必要
draw Boolean true 描画ボタンの表示/非表示
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 描画スタイル

  • point: 点
  • line: 線
  • polygon: 面
  • geofile: GeoJSON形式のファイル（未搭載）
coordinate [] null 座標
point, line, polygon仕様
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

 

 

 

投稿日：2019年11月17日 更新日：

Copyright© Maptomo , 2020 All Rights Reserved.