kepler.gl
v3.0.0
Kepler.glは、大規模なジオロケーションデータセットを視覚的に探索するためのデータに依存しない高性能Webベースのアプリケーションです。 Maplibre GLとDeck.glの上に構築されたKepler.glは、数千の旅行を表す何百万ポイントのポイントをレンダリングし、その場で空間的な集計を実行できます。
Kepler.glは、Reduxを使用して状態およびデータフローを管理するReactコンポーネントでもあります。他のReact-Reduxアプリケーションに組み込むことができ、高度にカスタマイズ可能です。アプリにKepler.glを埋め込む方法については、vis.academyのこのステップバイステップのチュートリアルをご覧ください。
ノード18.18.2以上を使用して、古いノードバージョンはサポート/テストされていません。最良の結果を得るには、NVM nvm install使用してください。
ノード（ > 18.18.2 ）、YARN、およびプロジェクトの依存関係
npm install --save kepler.gl
// or
yarn add kepler.glKepler.glはMapBoxに基づいて構築されています。使用するには、マップボックスアクセストークンが必要です。
モジュールバンドラーを使用しない場合は、問題ありません。 Kepler.gl NPMパッケージには、UMDフォルダーに事前コンパイルされた生産UMDビルドが含まれています。次のように、スクリプトタグをHTMLファイルに追加できます。
< script src =" https://unpkg.com/kepler.gl/umd/keplergl.min.js " />または、必要に応じて、特定のバージョンをロードできます
< script src =" https://unpkg.com/[email protected]/umd/keplergl.min.js " />Development Guideを見て、Kepler.glをローカルに開発してください。
Kepler.glをアプリにインポートするための基本的な手順を次に示します。また、例フォルダーをご覧ください。フォルダー内の各例をインストールしてローカルで実行できます。
Kepler.glは、Reduxを使用して内部状態を管理し、React-PALMミドルウェアとともに副作用を処理します。
react-palmのtaskMiddlewareストアに追加する必要があります。私たちは、 react-palmが必要ないソリューションに積極的に取り組んでいますが、それは依然として非常に軽量の副作用管理ツールであり、React-Thunkよりもテストしやすいです。
import { createStore , combineReducers , applyMiddleware , compose } from 'redux' ;
import keplerGlReducer from '@kepler.gl/reducers' ;
import { enhanceReduxMiddleware } from '@kepler.gl/middleware' ;
const initialState = { } ;
const reducers = combineReducers ( {
// <-- mount kepler.gl reducer in your app
keplerGl : keplerGlReducer ,
// Your other reducers here
app : appReducer
} ) ;
// using createStore
export default createStore (
reducer ,
initialState ,
applyMiddleware (
enhanceReduxMiddleware ( [
/* Add other middlewares here */
] )
)
) ;またはエンハンサーを使用する場合：
// using enhancers
const initialState = { } ;
const middlewares = enhanceReduxMiddleware ( [
// Add other middlewares here
] ) ;
const enhancers = [ applyMiddleware ( ... middlewares ) ] ;
export default createStore ( reducer , initialState , compose ( ... enhancers ) ) ; keplerGlの代わりに別のアドレスにKepler.glをマウントするか、Kepler.gl Reducerが状態のルートにマウントされていない場合、 getState Propでコンポーネントをマウントするときにパスを指定する必要があります。
Reducerの詳細をご覧ください。
import KeplerGl from '@kepler.gl/components' ;
const Map = props => (
< KeplerGl id = "foo" width = { width } mapboxApiAccessToken = { token } height = { height } / >
) ; id （文字列、必須）mapこのkeplerglインスタンスのID。アプリに複数のkeplerglインスタンスがある場合は、 idが必要です。 Keplergl Reducerに保存されているKeplergl状態のプロップ名を定義します。たとえば、ID fooを使用したKeplerglコンポーネントの状態は、 state.keplerGl.fooに保存されます。
同じIDを使用して複数のkepler.glインスタンスを作成した場合、エントリで定義されたkepler.gl状態は最新のインスタンスによってオーバーライドされ、空白状態にリセットされます。
mapboxApiAccessToken （文字列、必須*）undefinedデフォルトでは、Kepler.glはMapbox-gl.jsを使用してベースマップをレンダリングします。 Mapboxで無料アカウントを作成し、www.mapbox.com/account/accestokensでトークンを作成できます。
kepler.glのデフォルトマップスタイルを独自に置き換えた場合、それらはマップボックススタイルではありません。 mapboxApiAccessToken必要ありません。
カスタムマップスタイルの詳細をご覧ください。
getState （関数、オプション）state => state.keplerGl還元剤のルートケプルグル状態への道。
width （数、オプション）800keplergl uiの幅。
height （数、オプション）800 appName （string、optional）Kepler.Glサイドパネルヘッダーに表示されるアプリ名
version （文字列、オプション）v1.0サイドパネルヘッダーに表示されるバージョン
onSaveMap （function、optional）undefined[サイドパネルヘッダーにマップURLを保存]をクリックするときに呼び出されるアクション。
onViewStateChange （function、optional）undefinedviewState経度、緯度、ズームなどのパラメーターを含む更新されたビュー状態オブジェクトマップビューポートが更新されると、アクションがトリガーされます。
getMapboxRef(mapbox, index) （function、optional）undefined KeplerGL内側のマップボックスマップを持つMapContainerコンポーネントを追加または削除するときに呼び出される関数。
mapbox引数は、追加するとMapRefまたは削除されたときにnullです。
index引数は、単一のマップで0または追加のマップの場合は1です（ KeplerGLオプションのスプリットマップビューをサポートするため）。
actions （オブジェクト、オプション）{}デフォルトのkepler.glアクションクリエーターを置き換えるアクションクリエーター。アクションペイロードを変更する場合にのみ、カスタムアクションを使用します。
mint （ブール、オプション）trueコンポーネントがマウントされたときに新鮮な空の状態をロードするかどうか。 Parse mint: true Kepler.glコンポーネントは、同じコンポーネントを再マウントするときに常に新鮮な状態をロードします。このコンポーネント内の状態は、マウントされていないと破壊されます。 mint: false Kepler.glは、マウントされていない場合でもコンポーネント状態をストアに保ち、再度取り付けられたときに初期状態として使用します。これは、kepler.glをモーダルにマウントし、再開時に同じマップを保持する場合に役立ちます。
コンポーネントの詳細をご覧ください。
theme （オブジェクト|文字列、オプション）null "dark" 、 "light" 、または"base"の1つでは、Kepler.glスタイルのカスタマイズに使用されるテーマ名またはオブジェクトを渡すことができます。 Kepler.glは、デフォルトの「暗い」テーマに加えて、 'light'テーマを提供します。テーマオブジェクトに渡すと、kepler.glは入力として渡された値を使用して、テーマから値をオーバーライドします。
カスタムテーマの詳細を読んでください
mapboxApiUrl （文字列、オプション）https://api.mapbox.com独自のマップボックスタイルサーバーを使用している場合は、独自のタイルサーバーAPI URLに渡すことができます。
mapStylesReplaceDefault （boolean、オプション）false Kepler.glは、選択できる4つのマップスタイルを提供します。独自のmapStylesを提供したい場合はtrueを渡してください。以下を参照してください。
mapStyles （配列、オプション）[]マップスタイルの選択パネルに表示される追加のマップスタイルを提供できます。デフォルトでは、デフォルトのマップスタイルに追加のマップスタイルが追加されます。 Pass mapStylesReplaceDefault: trueをパスすると、デフォルトのものを置き換えます。 Kepler.glは、 idネーミングコンベンションに基づいてスタイルのレイヤーをグループ化し、それを使用してベースマップレイヤーの可視性を切り替えることができます。独自のlayerGroupsを提供して、より正確なレイヤーグループ化のためにデフォルトをオーバーライドします。
各mapStylesには次のプロパティが必要です。
id （文字列、必須）これらの予約されたdark lightの1つでmutedない一意の文字列。 muted_nightlabel （文字列、必須）名前url （文字列、必須）マップボックススタイルのURLまたはマップボックスGLスタイルの仕様に記載されているマップスタイルJSONオブジェクトを指すURL。icon （文字列、オプション）スタイルの画像アイコン、それはURL、または画像データURLにすることができますlayerGroups （配列、オプション） const mapStyles = [
{
id : 'my_dark_map' ,
label : 'Dark Streets 9' ,
url : 'mapbox://styles/mapbox/dark-v9' ,
icon : ` ${ apiHost } /styles/v1/mapbox/dark-v9/static/-122.3391,37.7922,9.19,0,0/400x300?access_token= ${ accessToken } &logo=false&attribution=false` ,
layerGroups : [
{
slug : 'label' ,
filter : ( { id } ) => id . match ( / (?=(label|place-|poi-)) / ) ,
defaultVisibility : true
} ,
{
// adding this will keep the 3d building option
slug : '3d building' ,
filter : ( ) => false ,
defaultVisibility : false
}
]
}
] ;カスタムマップスタイルの詳細をご覧ください。
initialUiState （オブジェクト、オプション）undefined uistial ui状態はuistate reducerに適用されますが、値はデフォルトのINITIAL_UI_STATEと浅い統合されます
localeMessages （オブジェクト、オプション）undefinedデフォルト変換を変更するか、新しい翻訳を追加しますローカリゼーションの詳細を読んでください。
keplerGl Reducerにカスタムアクションを派遣します。 Receplergl状態を介してReducerを使用してKeplergl状態を処理する利点の1つは、動作をカスタマイズする柔軟性です。アプリにKeplerGlインスタンスが1つしかない場合、またはコンポーネント自体の外側からKeplerglにアクションを発送するつもりはない場合は、ディスパッチの転送を心配する必要はなく、次のセクションに進むことができます。しかし、人生はカスタマイズに満ちており、私たちはあなたのものをできるだけ楽しいものにしたいと思っています。
アクションを特定のKeplerGlインスタンスに派遣する方法は複数あります。
各アクションは、Kepler.glの還元装置のアップデーターにマッピングされます。特定のアクションに対応するReducer Updaterをインポートし、以前の状態とアクションペイロードでそれを呼び出して、更新された状態を取得できます。たとえば、 updateVisDataUpdater 、 ActionTypes.UPDATE_VIS_DATAのアップデーターです（マッピングを更新するためのアクションについては、各還元剤reducers/vis-state.jsをご覧ください）。アプリアクションQUERY_SUCCESSをリッスンし、 updateVisDataUpdaterを呼び出してkepler.glにデータをロードする方法の例を次に示します。
import { keplerGlReducer , visStateUpdaters } from '@kepler.gl/reducers' ;
// Root Reducer
const reducers = combineReducers ( {
keplerGl : keplerGlReducer ,
app : appReducer
} ) ;
const composedReducer = ( state , action ) => {
switch ( action . type ) {
case 'QUERY_SUCCESS' :
return {
... state ,
keplerGl : {
... state . keplerGl ,
// 'map' is the id of the keplerGl instance
map : {
... state . keplerGl . map ,
visState : visStateUpdaters . updateVisDataUpdater ( state . keplerGl . map . visState , {
datasets : action . payload
} )
}
}
} ;
}
return reducers ( state , action ) ;
} ;
export default composedReducer ;Updatersの使用については、Kepler.gl Stateを変更してください
connect使用します接続を使用して、特定のkeplerGlコンポーネントにアクションを発送するコンポーネントにディスパッチ関数を追加できます。
// component
import KeplerGl from '@kepler.gl/components' ;
// action and forward dispatcher
import { toggleFullScreen , forwardTo } from '@kepler.gl/actions' ;
import { connect } from 'react-redux' ;
const MapContainer = props => (
< div >
< button onClick = { ( ) => props . keplerGlDispatch ( toggleFullScreen ( ) ) } / >
< KeplerGl
id = "foo"
/ >
< / div >
)
const mapStateToProps = state => state
const mapDispatchToProps = ( dispatch , props ) => ( {
dispatch ,
keplerGlDispatch : forwardTo ( ‘foo’ , dispatch )
} ) ;
export default connect (
mapStateToProps ,
mapDispatchToProps
) ( MapContainer ) ;また、 wrapToヘルパーでアクションをフォワードアクションに単純にラップすることもできます
// component
import KeplerGl from '@kepler.gl/components' ;
// action and forward dispatcher
import { toggleFullScreen , wrapTo } from '@kepler.gl/actions' ;
// create a function to wrapper action payload to 'foo'
const wrapToMap = wrapTo ( 'foo' ) ;
const MapContainer = ( { dispatch } ) => (
< div >
< button onClick = { ( ) => dispatch ( wrapToMap ( toggleFullScreen ( ) ) } / >
< KeplerGl
id = "foo"
/ >
< / div >
) ;フォワードディスパッチアクションの詳細をご覧ください
Kepler.glは、スタイルのコンポーネントを使用してCSSスタイリングを実装します。上記のフレームワークを使用することにより、Kepler.glは、次のアプローチを使用してスタイル/テーマをカスタマイズする機能を提供します。
カスタマイズする利用可能なプロパティは、ここにリストされています。
カスタムテーマの例。
テーマプロップをkepler.gl reactコンポーネントに渡すことで、Kepler.glテーマをカスタマイズできます。
const white = '#ffffff' ;
const customTheme = {
sidePanelBg : white ,
titleTextColor : '#000000' ,
sidePanelHeaderBg : '#f7f7F7' ,
subtextColorActive : '#2473bd'
} ;
return (
< KeplerGl
mapboxApiAccessToken = { MAPBOX_TOKEN }
id = "map"
width = { 800 }
height = { 800 }
theme = { customTheme }
/ >
) ;ご覧のとおり、CustomThemeオブジェクトは、kepler.glのデフォルトスタイルルールをオーバーライドする特定のプロパティを定義します。
kepler.glテーマをThemeproviderを使用してカスタマイズするには、次のようにkepler.glを使用してwrap wrapを使用できます。
import { ThemeProvider } from 'styled-components' ;
const white = '#ffffff' ;
const customTheme = {
sidePanelBg : white ,
titleTextColor : '#000000' ,
sidePanelHeaderBg : '#f7f7F7' ,
subtextColorActive : '#2473bd'
} ;
return (
< ThemeProvider theme = { customTheme } >
< KeplerGl mapboxApiAccessToken = { MAPBOX_TOKEN } id = "map" width = { 800 } height = { 800 } / >
< / ThemeProvider >
) ;誰もがカスタムKepler.glコンポーネントをレンダリングする柔軟性を望んでいます。 Kepler.glには、既存のものを交換するKeplerglにコンポーネントを注入できる依存関係噴射システムがあります。必要なのは、交換するコンポーネントファクトリを作成し、元のコンポーネントファクトリーをインポートし、 KeplerGlがマウントされているアプリのルートコンポーネントでinjectComponents呼び出すことです。 examples/demo-app/src/app.jsを見て、Kepler.glでカスタムサイドパネルヘッダーをどのようにレンダリングするかを見てください
import { injectComponents , PanelHeaderFactory } from '@kepler.gl/components' ;
// define custom header
const CustomHeader = ( ) => < div > My kepler.gl app < / div > ;
const myCustomHeaderFactory = ( ) => CustomHeader ;
// Inject custom header into Kepler.gl, replacing default
const KeplerGl = injectComponents ( [ [ PanelHeaderFactory , myCustomHeaderFactory ] ] ) ;
// render KeplerGl, it will render your custom header instead of the default
const MapContainer = ( ) => (
< div >
< KeplerGl id = "foo" / >
< / div >
) ; withStateヘルパーを使用して、追加の小道具としてカスタマイズされたコンポーネントに還元剤状態とアクションを追加します。
import { withState , injectComponents , PanelHeaderFactory } from '@kepler.gl/components' ;
import { visStateLens } from '@kepler.gl/reducers' ;
// custom action wrap to mounted instance
const addTodo = text =>
wrapTo ( 'map' , {
type : 'ADD_TODO' ,
text
} ) ;
// define custom header
const CustomHeader = ( { visState , addTodo } ) => (
< div onClick = { ( ) => addTodo ( 'hello' ) } > { ` ${
Object . keys ( visState . datasets ) . length
} dataset loaded` } < / div >
) ;
// now CustomHeader will receive `visState` and `addTodo` as additional props.
const myCustomHeaderFactory = ( ) =>
withState (
// keplerGl state lenses
[ visStateLens ] ,
// customMapStateToProps
headerStateToProps ,
// actions
{ addTodo }
) ( CustomHeader ) ;UIコンポーネントの交換の詳細をご覧ください
kepler.glインスタンスと対話して新しいデータを追加するには、アプリ内のどこからでもaddDataToMapアクションをディスパッチできます。 Kepler.glインスタンスにデータセットまたは複数のデータセットを追加し、完全な構成（MapState、MapStyle、Visstate）を更新します。
dataオブジェクト*が必要です
datasets （array <Object> |オブジェクト） *必須データセットは、データセットまたはデータセットの配列であり、各データセットオブジェクトがinfoとdataプロパティを持つために必要です。
datasets.infoオブジェクト-Info of a datasetdatasets.info.idこのデータセットの文字列ID。 configが定義されている場合、 id configのdataIdと一致する必要があります。datasets.info.label文字列このデータセットの表示名datasets.dataオブジェクト* 2つのプロパティfieldsとrows持つ表形式でデータオブジェクトが必要ですdatasets.data.fields array <Object> *必要なフィールドの配列、datasets.data.fields.name文字列*フィールドの必要な名前、datasets.data.rows配列<Array> * fieldsとrowsを備えた表形式で、行のアレイのアレイが必要ですoptionsオブジェクト
options.centerMap boolean default: true centerMapがtrueに設定されている場合は、kepler.glがデータポイントの境界内にマップビューを配置しますoptions.readOnly boolean default: false readOnlyがtrueに設定されている場合、左設定パネルが非表示になりますoptions.keepExistingConfig boolean default: falseレイヤー、フィルター、スプリットマップを含むマップ構成を終了し続けるかどうか。 configオブジェクトこのオブジェクトには、完全なkepler.glインスタンス構成が含まれます{mapstate、mapstyle、visstate}
Kepler.glは、簡単なAPI KeplerGlSchema.getConfigToSaveを提供して、現在のKeplerインスタンス構成のJSONブロブを生成します。
// app.js
import { addDataToMap } from '@kepler.gl/actions' ;
const sampleTripData = {
fields : [
{ name : 'tpep_pickup_datetime' , format : 'YYYY-M-D H:m:s' , type : 'timestamp' } ,
{ name : 'pickup_longitude' , format : '' , type : 'real' } ,
{ name : 'pickup_latitude' , format : '' , type : 'real' }
] ,
rows : [
[ '2015-01-15 19:05:39 +00:00' , - 73.99389648 , 40.75011063 ] ,
[ '2015-01-15 19:05:39 +00:00' , - 73.97642517 , 40.73981094 ] ,
[ '2015-01-15 19:05:40 +00:00' , - 73.96870422 , 40.75424576 ]
]
} ;
const sampleConfig = {
visState : {
filters : [
{
id : 'me' ,
dataId : 'test_trip_data' ,
name : 'tpep_pickup_datetime' ,
type : 'timeRange' ,
view : 'enlarged'
}
]
}
} ;
this . props . dispatch (
addDataToMap ( {
datasets : {
info : {
label : 'Sample Taxi Trips in New York City' ,
id : 'test_trip_data'
} ,
data : sampleTripData
} ,
option : {
centerMap : true ,
readOnly : false
} ,
config : sampleConfig
} )
) ;addDatatomapの詳細と、Schema Managerでマップを保存およびロードすることをご覧ください。
