ynunokawa / react-arcgis-boilerplate

React components with Leaflet.js and ArcGIS for rapid development.

React ArcGIS Boilerplate

IN PROGRESS..

Usage

npm i react-arcgis-boilerplate
npm run start

import { ArcGISWebMap, DonutChart, ItemList } from 'react-arcgis-boilerplate';

Mapping

mostly use Leaflet and Esri Leaflet as the basis for mapping components.

<ArcGISWebMap />

built with ynunokawa/L.esri.WebMap.

<ArcGIS mapid={"55e02e777274468c90745fde6641faf4"} />

Visualization

mostly use D3 and Uber react-vis as the basis for visualization components.

<DonutChart />

<DonutChart
  serviceUrl={"https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/%E4%BF%9D%E8%82%B2%E5%9C%9223%E5%8C%BA/FeatureServer/0"}
  field={"種別"}
  where={"市区町村='練馬区'"}
/>

UI

mostly use React Bootstrap as the basis for UI components.

<ListGroups />

<ListGroups
  serviceUrl={"https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/%E4%BF%9D%E8%82%B2%E5%9C%9223%E5%8C%BA/FeatureServer/0"}
  typeField={"種別"}
  nameField={"施設名"}
  labelField={"定員"}
  sortField={"定員"}
/>

<ItemList />

<ItemList
  serviceUrl={"https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/%E4%BF%9D%E8%82%B2%E5%9C%9223%E5%8C%BA/FeatureServer/0"}
  headerField={"施設名"}
  typeLabelField={"種別"}
  otherLabelFields={["対象年齢", "運営主体"]}
  mainInfoField={"定員"}
  infoFields={["郵便番号", "住所"]}
  sortField={"定員"}
/>