react-leaflet-tangram

This repository extends the react-leaflet library to support the Tangram library with React components.

Example

To view a live example of the library:

git clone  https://github.com/dbabbs/react-leaflet-tangram
cd react-leaflet-tangram
npm install
npm start

The live example will open in the browser. You will be able to interactively style a selection of layers with a color picker.

Usage

To use this library in your projects, you will need to have the following libraries installed via npm:

• react-leaflet
• leaflet
• tangram

Next, import the library in your JSX file:

import TangramLayer from './TangramLayer';

And insert the component inside the react-leaflet <Map> component:

<Map
   ref={ this.map }
   center={ [47, -122] }
   zoom={ 7 }
   zoomControl={ false }
>
   <TangramLayer
      scene={ this.state.scene }
      onMapClick={ this.handleClick }
      onMapHover={ this.handleHover }
   />
</Map>

API

The library currently supports three props:

• scene: the Tangram scene file (JavaScript object or Yaml file)
• onMapClick: event to be triggered on map click (event)
• onMapHover: event to be triggered on map hover (event)