Currently, I am attempting to create multiple polygons from a large JSON file. Instead of being separate, the polygons seem to be connected in some way.
https://i.sstatic.net/Ce216.png
The project is being developed in next.js.
Below are the relevant code snippets:
Canvas.tsx
// ../components/Canvas.tsx
import React, { useRef, useEffect } from 'react'
const Canvas = props => {
const canvasRef = useRef(null)
useEffect(() => {
const canvas: any = canvasRef.current
const context = canvas.getContext('2d')
context.fillStyle = '#FF0000'
context.beginPath()
{ props.x.map((pointx, i) => context.lineTo(0.25 * pointx, 0.25 * props.y[i])) } // Scaled down to 25% of original size
context.closePath()
context.fill()
}, [])
return <canvas ref={canvasRef} {...props} width={props.width} height={props.height} style={{ zIndex: 20, position: 'absolute', objectFit: 'contain' }}/>
}
export default Canvas
index.tsx
import React, { ReactElement, useEffect, useRef, useState } from 'react'
import Image from 'next/image'
import dynamic from "next/dynamic";
import data from '../public/11_regions-copy.json'
import Canvas from '../components/Canvas';
export const getServerSideProps = async () => {
let xTemp: any[] = []
let yTemp: any[] = []
for (var i = 0; i < Object.keys(data).length; i++) {
xTemp.push(data[i].all_points_x)
yTemp.push(data[i].all_points_y)
}
for (var j = 0; j < Object.keys(data).length; j++) {
let xArray = xTemp[j]
xArray.push(xArray[0])
let yArray = yTemp[j]
yArray.push(yArray[0])
}
let x = [].concat.apply([], xTemp);
let y = [].concat.apply([], yTemp);
return {
props: {
x,
y
},
}
}
function Home({ x, y }: any): ReactElement {
return (
<div>
<Canvas width={1680} height={756} x={x} y={y} />
</div>
)
}
export default Home
JSON file used: json
If you have any insights or suggestions, please feel free to share them!