how to display json in d3 over leaflet.js in React

Question

I'm struggling to display some json data onto my Leaflet map in react. I'm using leaflet-react to run the map generation. I can't find a decent tutorial to help me through this. My current set up is below;

const MapComponent = () => {
return (
        <>
            <MapContainer
                center={[mapSettings.latitude, mapSettings.longitude]}
                zoom={mapSettings.zoom}
                minZoom={6}
                scrollWheelZoom={true}
                zoomControl={false}
                style={{ height: '100vh', width: '100%' }}
                maxBounds={[
                    [58.619777025081675, -10.437011718750002],
                    [49.66762782262194, 3.3618164062500004],
                ]}
            >
                <LayerGroup>
                    <D3Layer></D3Layer>
                </LayerGroup>
                <MyMapEvents />
                <TileLayer
                    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                />
                
                <NavBar mapZoom={mapSettings.zoom} activeNav={activeNav} navClick={navClick} show={show} />
                <Overlay show={show} />
            </MapContainer>
        </>
    );
};

export default MapComponent;

I want to then put the D3 code into the D3Layer component.

At the moment the component returns a h1 tag with hello however this is hidden behind the map. If someone can get something basic working, even if just getting my basics set up to display something basic like a square i'm sure I can figure the importing of the json

Thanks

Answer 1

Here is an example of importing a square using d3 library adapted in react and react-leaflet by a creating a custom component as you did and include example's code inside a useEffect.

Install d3libray and d3-geo libray.

In this example I imported directly the json from a file but you can fetch it also using d3.json

import L from "leaflet";
import * as d3 from "d3";
import * as d3Geo from "d3-geo";

import geoShape from "./rectangle.json";

...

function D3Layer() {
     const map = useMap();

     useEffect(() => {
        const svg = d3.select(map.getPanes().overlayPane).append("svg");
        const g = svg.append("g").attr("class", "leaflet-zoom-hide");
    
        //  create a d3.geo.path to convert GeoJSON to SVG
        const transform = d3Geo.geoTransform({
           point: projectPoint
        }),
        path = d3Geo.geoPath().projection(transform);
    
          // create path elements for each of the features
        const d3_features = g
          .selectAll("path")
          .data(geoShape.features)
          .enter()
          .append("path");
    
        map.on("viewreset", reset);
    
        reset();
    
        // fit the SVG element to leaflet's map layer
        function reset() {
          const bounds = path.bounds(geoShape);
    
          const topLeft = bounds[0],
            bottomRight = bounds[1];
    
          svg
            .attr("width", bottomRight[0] - topLeft[0])
            .attr("height", bottomRight[1] - topLeft[1])
            .style("left", topLeft[0] + "px")
            .style("top", topLeft[1] + "px");
    
          g.attr(
            "transform",
            "translate(" + -topLeft[0] + "," + -topLeft[1] + ")"
          );
    
            // initialize the path data
            d3_features
              .attr("d", path)
              .style("fill-opacity", 0.7)
              .attr("fill", "blue");
          }
    
          // Use Leaflet to implement a D3 geometric transformation.
          function projectPoint(x, y) {
            var point = map.latLngToLayerPoint(new L.LatLng(y, x));
            this.stream.point(point.x, point.y);
          }
        }, []);
        return null;
 }

Demo