https://github.com/maliut/react-leaflet-react-pixi

Write Leaflet and PixiJS applications using React declarative style.
https://github.com/maliut/react-leaflet-react-pixi

leaflet leaflet-overlay pixi pixijs react react-leaflet react-pixi

Last synced: about 1 month ago
JSON representation

Write Leaflet and PixiJS applications using React declarative style.

• Host: GitHub
• URL: https://github.com/maliut/react-leaflet-react-pixi
• Owner: maliut
• License: mit
• Created: 2021-11-15T07:00:04.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2021-11-21T15:55:40.000Z (about 3 years ago)
• Last Synced: 2023-07-16T14:25:30.007Z (over 1 year ago)
• Topics: leaflet, leaflet-overlay, pixi, pixijs, react, react-leaflet, react-pixi
• Language: JavaScript
• Homepage:
• Size: 4.82 MB
• Stars: 13
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Leaflet + React Pixi

Write Leaflet and PixiJS applications using React declarative style.

Demo usage:

```javascript

function App() {

  return (

    

      

      

        

      

    

  )

}

function MyContent() {

  const [containerX, containerY] = useProject([51.5, -0.09])

  const [markerOffset, setMarkerOffset] = useState(0)

  const [markerX, markerY] = useProject([51.5, -0.09 + markerOffset], [containerX, containerY])

  const scale = useScale()

  const [direction, setDirection] = useState(1)

  useTick(delta => {

    setMarkerOffset(val => val + delta * direction / 3000)

    if (markerOffset > 0.05) {

      setDirection(-1)

    } else if (markerOffset < -0.05) {

      setDirection(1)

    }

  })

  return (

    

      

    

  )

}

```

![Demo Gif](./public/demo.gif)

---

The work is based on [React Leaflet](https://react-leaflet.js.org/), [React Pixi](https://reactpixi.org/) and [Leaflet.PixiOverlay](https://github.com/manubb/Leaflet.PixiOverlay). This project is to combine them all together, provide a natural declarative code style, and fully encapsulate Leaflet.PixiOverlay inside.

The code is quite simple. You just need to copy `PixiRoot.js` and `hooks.js` in your project. Feel free to modify them as your need.(and don't forget to leave a ⭐star : )