Troubles layering map tiles on top of each other with React, D3v5, openstreetmaps? - reactjs

Question

I'm trying to have multiple map layers of maps on top of each other using react, d3, and openstreetmaps. I originally got started with React and the react-simple-maps library a few months ago, and so far I've been able to replicate this setup of getting a topojson file into d3 to generate the map, which is much more customize-able. The shapefiles you can download give you lines around the countries, or the states or counties or even US zip codes...pretty cool!
An open source (hint: free!) way to get a more granular, street-level view, along with other features like rivers, lakes etc would be a nice add-on to the maps I am building for my data visualizations. So far, I have the d3 map in place, but really confused on the openstreetmap, which for some reason insists on being positioned at the bottom right corner of the page, and not direclty overtop of the d3 map? I know there are lot of other libraries, including the not-so-free resources offered by google and mapbox and the other big players in the map game, but I'm close to getting this working...any ideas where I'm going wrong? I think it has something to do with grouping the svg maps properly but I'm not sure? Here's some code...any ideas are appreciated! A quick note is that these topojson files are large and can be slow to load, so I use axios to fetch them from a container component higher up in the tree to pass them down as props. Here's an example of that, where you have a nicely positioned map and a stubborn openstreetmap that lives below it. Some of it is removed for brevity, my apologies if it doesn't run?
EDIT: sorry for my WALL of code, after two weeks of no replies, here's a codepen that shows just the openstreetmap as it's own component:
https://stackblitz.com/edit/react-ktjlxk?embed=1&file=index.js
import React, { Component } from "react";
import "./worldMapOSM.css";
import * as d3 from "d3";
import * as d3Tile from "d3-tile";
import { geoMercator, geoPath } from "d3-geo";
//styles for map projection
const width = 960;
const height = 500;
class WorldMapOSM extends Component {
projection() {
return geoMercator() //geoConicConformal
.scale(120)
.center([6.8682168, 52.3401469])
.translate([width / 2, height / 2])
.clipExtent([[0, 0], [width, height]]) //????
.precision(0.5);
}
componentDidMount() {
const width = Math.max(960, window.innerWidth),
height = Math.max(500, window.innerHeight),
prefix = prefixMatch(["webkit", "ms", "Moz", "O"]);
const svg = d3.select(this.refs.anchor);
const map = d3
.select("body")
.append("div")
.attr("class", "map")
.style("width", width + "px")
.style("height", height + "px")
const layer = map.append("div").attr("class", "layer");
const tile = d3Tile
.tile()
.size([width, height])
.scale(this.projection().scale() * 2 * Math.PI)
.translate(this.projection([0, 0]))
.zoomDelta((window.devicePixelRatio || 1) - 0.5);
const tiles = d3Tile.tile();
const image = layer
.style(prefix + "transform", matrix3d(tiles.scale, tiles.translate))
.selectAll(".tile")
.data(tiles, function(d) {
return d;
})
image.exit().remove();
image
.enter()
.append("img")
.attr("class", "tile")
.attr("src", function(d) {
return (
"http://" +
"abc"[d.y % 3] +
".tile.openstreetmap.org/" +
d.z +
"/" +
d.x +
"/" +
d.y +
".png"
);
})
.style("left", function(d) {
return (d[0] << 8) + "px";
})
.style("top", function(d) {
return (d[1] << 8) + "px";
});
svg
.append("use")
.attr("xlink:href", "#land")
.attr("class", "stroke");
formatLocation(this.projection.invert(d3.mouse(this)), zoom.scale())
function matrix3d(scale, translate) {
var k = scale / 256,
r = scale % 1 ? Number : Math.round;
return (
"matrix3d(" +
[
k,0,0,0,0,k,0,0,0,0,k,0,
r(translate[0] * scale),
r(translate[1] * scale),
0,
1
] +
")"
);
}
function prefixMatch(p) {
var i = -1,
n = p.length,
s = document.body.style;
while (++i < n)
if (p[i] + "Transform" in s) return "-" + p[i].toLowerCase() + "-";
return "";
}
function formatLocation(p, k) {
var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
return (
(p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") +
" " +
(p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E")
);
}
}
}
render() {
return (
<div className="worldMap dropShadow">
<svg width={960} height={600} viewBox="0 0 960 600">
<g id="map">
{/* D3 map */}
<g className="eurCountries">
{this.props.Countries.map((d, i) => (
<path
key={`path-${i}`}
d={geoPath().projection(this.projection())(d)}
className="state"
fill={`rgba(187,218,247,${(1 / 1000) * i})`}
stroke="#afafaf"
strokeWidth={0.5}
/>
))}
</g>
<g ref="anchor" />{/* openstreetmap */}
</g>
</svg>
</div>
);
}
}
export default WorldMapOSM;