| 725 | } |
| 726 | |
| 727 | function WorldMap({width, height}) { |
| 728 | const theme = useTheme(); |
| 729 | const mode = theme.palette.mode; |
| 730 | const dynamicCanvasRef = useRef(null); |
| 731 | const staticCanvasRef = useRef(null); |
| 732 | useEffect(() => { |
| 733 | let map_width = Math.min(width, 1700); |
| 734 | let map_height = height - 60; |
| 735 | const desired_scale = 1.9; |
| 736 | if (map_width > map_height * desired_scale) { |
| 737 | map_width = map_height * desired_scale; |
| 738 | } else { |
| 739 | map_height = map_width / desired_scale; |
| 740 | } |
| 741 | return initMap(staticCanvasRef.current, dynamicCanvasRef.current, map_width, map_height, mode); |
| 742 | }, [width, height, mode]); |
| 743 | return ( |
| 744 | <> |
| 745 | <canvas ref={staticCanvasRef} width={width} height={height} |
| 746 | style={{overflow: "auto", position: "relative"}}/> |
| 747 | <canvas ref={dynamicCanvasRef} width={width} height={height} onClick={clickHandler} |
| 748 | style={{overflow: "auto", position: "absolute"}}/> |
| 749 | </> |
| 750 | ) |
| 751 | } |
| 752 | |
| 753 | export default Home; |