mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
Update the readme.
This commit is contained in:
parent
17a2520808
commit
de9749b81b
1
.npmignore
Normal file
1
.npmignore
Normal file
@ -0,0 +1 @@
|
||||
heatmap-example.gif
|
||||
48
README.md
48
README.md
@ -11,23 +11,13 @@ be Mapbox APIs that haven't yet been exposed.
|
||||
|
||||
## Overview
|
||||
|
||||
react-map-gl provides an `overlay` API so you can add visualization overlays.
|
||||
|
||||
Supported Overlays:
|
||||
|
||||
1. ChoroplethOverlay
|
||||
2. ScatterplotOverlay
|
||||
3. DraggablePointsOverlay
|
||||
4. SVGOverlay
|
||||
5. CanvasOverlay
|
||||
|
||||
## Installation
|
||||
### Installation
|
||||
|
||||
```
|
||||
npm install react-map-gl --save
|
||||
```
|
||||
|
||||
## Usage
|
||||
### Usage
|
||||
|
||||
````js
|
||||
<MapGL width={400} height={400} latitude={37.7577} longitude={-122.4376}
|
||||
@ -39,7 +29,13 @@ npm install react-map-gl --save
|
||||
|
||||
### Using overlays
|
||||
|
||||
react-map-gl provides an overlay API so you can use the builtin visualization
|
||||
overlays, or create your own. Here's an example of using the build in
|
||||
ScatterplotOverlay.
|
||||
|
||||
````js
|
||||
var ScatterplotOverlay = require('react-map-gl/src/overlays/scatterplot.react');
|
||||
// ...
|
||||
<MapGL {...mapProps}>
|
||||
<ScatterplotOverlay locations={locations} dotRadius={4} globalOpacity={1}
|
||||
compositeOperation="screen" />
|
||||
@ -47,6 +43,34 @@ npm install react-map-gl --save
|
||||
])
|
||||
````
|
||||
|
||||
Other built in overlays include:
|
||||
|
||||
1. ChoroplethOverlay
|
||||
2. ScatterplotOverlay
|
||||
3. DraggablePointsOverlay
|
||||
4. SVGOverlay
|
||||
5. CanvasOverlay
|
||||
|
||||
Other third party overlays can also be created. For example, the
|
||||
[heatmap-overlay](https://github.com/vicapow/react-map-gl-heatmap-overlay) uses
|
||||
[webgl-heatmap](https://github.com/vicapow/webgl-heatmap) to create geographic
|
||||
heatmaps.
|
||||
|
||||
![heatmap-example.gif]()
|
||||
|
||||
Example usage:
|
||||
|
||||
````js
|
||||
var HeatmapOverlay = require('react-map-gl-heatmap-overlay');
|
||||
var cities = require('example-cities');
|
||||
// ...
|
||||
render: function render() {
|
||||
return <MapGL ...viewportProps>
|
||||
<HeatmapOverlay locations={cities} />
|
||||
</MapGL>;
|
||||
}
|
||||
````
|
||||
|
||||
|
||||
### ImmutableJS all the things
|
||||
|
||||
|
||||
BIN
heatmap-example.gif
Normal file
BIN
heatmap-example.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Loading…
x
Reference in New Issue
Block a user