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

niklasbuhl · 2022-02-13T13:04:44Z

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?

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

niklasbuhl commented Feb 13, 2022 •

edited

Loading

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

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

Comments

niklasbuhl commented Feb 13, 2022 • edited Loading

niklasbuhl commented Feb 13, 2022 •

edited

Loading