# react-webgl-leaflet

> Put a description here

Latest version **0.0.18** (published 2018-03-03) · 0 weekly downloads

## Install

```sh
npm install react-webgl-leaflet
pnpm add react-webgl-leaflet
yarn add react-webgl-leaflet
bun add react-webgl-leaflet
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.18 |
| Published | 2018-03-03 |
| First published | 2018-02-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Author | Your name |
| Maintainers | mikefab |

## Links

- npm: https://www.npmjs.com/package/react-webgl-leaflet
- Repository: https://github.com/mikefab/react-webgl-leaflet
- Homepage: https://github.com/mikefab/react-webgl-leaflet#readme
- Issues: https://github.com/mikefab/react-webgl-leaflet/issues
- npm.io page: https://npm.io/package/react-webgl-leaflet

## Dependencies (9)

- [axios](https://npm.io/package/axios.md) ^0.17.1
- [react](https://npm.io/package/react.md) ^16.2.0
- [redux](https://npm.io/package/redux.md) ^3.7.2
- [colors](https://npm.io/package/colors.md) ^1.1.2
- [leaflet](https://npm.io/package/leaflet.md) ^1.3.1
- [webpack](https://npm.io/package/webpack.md) ^3.11.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.7
- [react-leaflet](https://npm.io/package/react-leaflet.md) ^1.8.1

## Recent versions

- 0.0.18 (latest) — 2018-03-03
- 0.0.17 — 2018-03-03
- 0.0.16 — 2018-03-03
- 0.0.15 — 2018-03-02
- 0.0.14 — 2018-02-27
- 0.0.13 — 2018-02-27
- 0.0.12 — 2018-02-27
- 0.0.11 — 2018-02-25
- 0.0.10 — 2018-02-21
- 0.0.9 — 2018-02-20
- 0.0.8 — 2018-02-19
- 0.0.6 — 2018-02-19
- 0.0.5 — 2018-02-19
- 0.0.4 — 2018-02-19
- 0.0.3 — 2018-02-19
- … 2 more at https://npm.io/package/react-webgl-leaflet/versions

## README

# react-webgl-leaflet

This react component can technically render over [16M clickable points](https://stackoverflow.com/questions/16830824/google-maps-using-three-js-and-webgl/27653983#27653983), thought we haven't tested that many yet.

Most of the code and inspiration was taken from other places:
- [Brendan Kenny's Google Maps + HTML5 + Spatial Data Visualization](https://www.youtube.com/watch?v=aZJnI6hxr-c)
- [Pedro's tech mumblings: Displaying WebGL data on Google Maps](http://build-failed.blogspot.com/2013/02/displaying-webgl-data-on-google-maps.html)
- [webgl polygons fill with libtess js](https://blog.sumbera.com/2014/07/28/webgl-polygons-fill-with-libtess-js/)
- [Draw a lot of polygons fast](https://github.com/sniok/react-leaflet-webgl)


## The ReactWebglLeaflet component takes two inputs
- A geojson object with an array of features of type point.
- A callback 
````
import React, { Component } from 'react';
import ReactWebglLeaflet from 'react-webgl-leaflet'
import {
  Map,
  TileLayer
} from 'react-leaflet'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      url: 'https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?' +
        'access_token=' +
        'pk.your_mapbox_key.',
      attribution: '&copy; <a href=\'http://osm.org/copyright\'>OpenStreetMap</a>' +
        ' contributors ',
      position: [0, 0],
      zoom: 4
    }
  }
  render() {
    const pointClick = (feature, map) => {
      setTimeout(function() {
        map.openPopup(feature.properties.title,
          [
            feature.geometry.coordinates[1],
            feature.geometry.coordinates[0]
          ]
        )
      }, 300)
    }

    let geojson = {
      'type': 'FeatureCollection',
      'features': [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.03238901390978, 38.913188059745586]
                    },
                    "properties": {
                        "title": "Washington DC",
                        id: 2,
                        size: 5,
                        color: [92, 184, 92],
                        "icon": "monument"
                    }
                  }, {
                          "type": "Feature",
                          "geometry": {
                              "type": "Point",
                              "coordinates": [-122.414, 37.776]
                          },
                          "properties": {
                            "title": "San Francisco",
                            id: 3,
                            size: 3,
                            color: [92, 184, 92]
                          }
                      }]
    }

    const position = [38.913188059745586, -77.03238901390978]

    return (
        <Map
          center={position}
          zoom={this.state.zoom}
          zoomControl={false}>
          <ZoomControl position='bottomleft' />
          <TileLayer
            url={this.state.url}
            attribution={this.state.attribution}
          />
          <ReactWebglLeaflet
            points={geojson}
            onClickCallback={pointClick}
          />
        </Map>
    )
  }
}
export default App;
````
[Demo](http://school-mapping.azurewebsites.net)
![sample](./webgl-clickable-points.jpeg)

### Caveat
We get this pesky warning. Any advice on it appreciated:
````
index.js:2178 Warning: Failed context type: Invalid context `map` of type `NewClass` supplied to `ReactWebglLeaflet`, expected instance of `NewClass`.
    in ReactWebglLeaflet (at App.js:79)
    in div (created by Map)
    in Map (at App.js:70)
    in App (at index.js:7)
````

---
_Source: https://npm.io/package/react-webgl-leaflet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._