Trying to make mappa and p5 work inside a React component.

Hi,

So I am trying to use Mappa and p5 run inside a React component.

But when the app is rendered, the Leaflet map ends up outside the id=app and <canvas> elements. The map works fine with scroll, drag etc.

<html lang="en">
<head> {...} </head>
<body>
    <div id="app">
        <div>
            <canvas id="defaultCanvas0" class="p5Canvas" style="width: 500px; height: 500px;" width="1000" height="1000"></canvas>
        </div>
    </div>
    <script id="Leaflet" async="" src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
    <div id=" {a long random id} " class=" {all the leaflet classes} " style="width: 500px; height: 500px; position: relative;" tabindex="0"></div>
</body>
</html>

The error message from the React framework trying to put the map inside the app.

Uncaught TypeError: Node.appendChild: Argument 1 does not implement interface Node.
    onAdd webpack://alpha.klimakode.dk/./node_modules/mappa-mundi/dist/mappa.js?:354
    _layerAdd https://unpkg.com/leaflet@1.3.0/dist/leaflet.js:5
    whenReady https://unpkg.com/leaflet@1.3.0/dist/leaflet.js:5
    addLayer https://unpkg.com/leaflet@1.3.0/dist/leaflet.js:5
    canvasOverlay webpack://alpha.klimakode.dk/./node_modules/mappa-mundi/dist/mappa.js?:360
    createMap webpack://alpha.klimakode.dk/./node_modules/mappa-mundi/dist/mappa.js?:340
    onload webpack://alpha.klimakode.dk/./node_modules/mappa-mundi/dist/mappa.js?:228
    overlay webpack://alpha.klimakode.dk/./node_modules/mappa-mundi/dist/mappa.js?:219
    setup webpack://alpha.klimakode.dk/./src/components/Map/Map.v1.js?:34
    _setup webpack://alpha.klimakode.dk/./node_modules/p5/lib/p5.min.js?:3
    _start webpack://alpha.klimakode.dk/./node_modules/p5/lib/p5.min.js?:3
    _ webpack://alpha.klimakode.dk/./node_modules/p5/lib/p5.min.js?:3
    componentDidMount webpack://alpha.klimakode.dk/./src/components/Map/Map.v1.js?:45
    React 6
    unstable_runWithPriority webpack://alpha.klimakode.dk/./node_modules/scheduler/cjs/scheduler.development.js?:468
    React 9
    <anonymous> webpack://alpha.klimakode.dk/./src/index.js?:13
    js http://localhost:8080/main.js:41
    __webpack_require__ http://localhost:8080/main.js:414
    <anonymous> http://localhost:8080/main.js:1470
    <anonymous> http://localhost:8080/main.js:1472

My Map.v1.js file:

import React from "react"
import p5 from "p5"
import Mappa from "mappa-mundi"

class Map extends React.Component {
    constructor(props) {
        super(props)
        this.myRef = React.createRef()
    }

    Sketch = (p) => {
        var options = {
            lat: 0,
            lng: 0,
            zoom: 4,
            style: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
        }

        var myMap
        var mappa = new Mappa("Leaflet")

        p.setup = () => {
            p.createCanvas(500, 500)
            // p.background("#ff0000")
            myMap = mappa.tileMap(options)
            myMap.overlay(p)
        }

        p.draw = () => {
            // p.circle(p.mouseX, p.mouseY, 10)
        }
    }

    componentDidMount() {
        this.myP5 = new p5(this.Sketch, this.myRef.current)
    }

    render() {
        return <div ref={this.myRef}></div>
    }
}

export default Map

My index.js file:

import ReactDOM from "react-dom"
import React from "react"
import Map from "./components/Map/Map.v1"

const App = () => {
    return <Map />
}

ReactDOM.render(<App />, document.getElementById("app"))

Am I doomed trying to make it work inside a React component? Or is there a way I can solve the Node.appendChild: Argument 1 does not implement interface Node. problem?

cvalenzuela / Mappa

Trying to make mappa and p5 work inside a React component. #46