Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { useState, useEffect } from "react";
- import styles from "./styles.scss";
- import { feature } from "topojson";
- const d3 = Object.assign({}, require("d3-geo"));
- /**
- * OK this is some documentation
- * @param {*} props
- */
- const GeoMap = React.memo(props => {
- let projection;
- let path;
- // Set up component props
- const {
- width = 800,
- height = 600,
- mapFileLocation = __webpack_public_path__ + "topo/australia.json",
- focusPoint = [133.15399233370441, -24.656909465155994],
- margin = 64,
- fill = "#ddd",
- ...restProps
- } = props;
- // Set up component state
- const [geo, setGeo] = useState(null);
- // Component did mount?
- const componentDidMount = () => {
- return componentDidUnmount;
- };
- // Component did unmount?
- const componentDidUnmount = () => {};
- // Side effect after first mount
- useEffect(componentDidMount, []);
- // Used to rotate the projection
- const invertLongLat = longlat => {
- return [-longlat[0], -longlat[1]];
- };
- const loadJson = async fileLocation => {
- const data = await fetch(fileLocation);
- const topo = await data.json();
- const objects = Object.values(topo.objects); // Get array of objects so we don't need the name
- const geoJsonObject = feature(topo, objects[0]);
- setGeo(geoJsonObject);
- };
- // Load map file if not already loaded
- if (!geo) loadJson(mapFileLocation);
- else {
- projection = d3
- .geoMercator()
- .rotate(invertLongLat(focusPoint))
- .fitExtent(
- // Auto zoom
- [[margin, margin], [width - margin, height - margin]],
- geo
- );
- path = d3.geoPath().projection(projection);
- }
- return (
- <div className={styles.root}>
- <svg className={styles.svg} width={width} height={height}>
- {geo && (
- <g className={styles.group}>
- {geo.features.map((data, iteration) => (
- <path
- key={`path-${iteration}`}
- d={path(data)}
- className={styles.feature}
- fill={fill}
- stroke="white"
- strokeWidth={0.5}
- />
- ))}
- </g>
- )}
- </svg>
- </div>
- );
- });
- export default GeoMap;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement