https://www.kitepharma.com/Areas/Kite/Content/mapbox/assets/mapbox/js/minimap.js

1export async function initializeMiniMap(map, centers) {
2	const data = await fetch("../Content/mapbox/assets/data/ne_110m_admin_0_countries.json").then((response) =>
3		response.json()
4	);
5
6	const miniMapElement = document.querySelector('#locator-mini-map');
7
8	const width = miniMapElement.clientWidth;
9	const height = miniMapElement.clientHeight;
10
11	const projection = d3
12		.geoMercator()
13		.scale(125)
14		// Center on the US
15		.center([-110, 39.5])
16		.translate([width / 2, height / 2]);
17
18	const path = d3.geoPath().projection(projection);
19
20	const svg = d3
21		.select(miniMapElement)
22		.append('svg')
23		.attr('width', '100%')
24		.attr('height', '100%');
25
26	const featuresGroup = svg.append('g').attr('class', 'features');
27	const centersGroup = svg.append('g').attr('class', 'centers');
28	const boundsGroup = svg.append('g').attr('class', 'bounds');
29
30	featuresGroup
31		.selectAll('path')
32		.data(data.features)
33		.enter()
34		.append('path')
35		.attr('d', path)
36		.attr('fill', 'var(--grayLight)');
37
38	centersGroup
39		.selectAll('circle')
40		.data(centers)
41		.enter()
42		.append('circle')
43		.attr('cx', (d) => {
44			return projection(d.location)[0];
45		})
46		.attr('cy', (d) => {
47			return projection(d.location)[1];
48		})
49		.attr('r', 3)
50		.attr('fill', 'var(--primaryColor)');
51	// .attr('fill-opacity', 0.5);
52
53	map.on('moveend', () => {
54		const bounds = map.getBounds();
55
56		const nw = bounds.getNorthWest();
57		const se = bounds.getSouthEast();
58
59		const nwProjected = projection([nw.lng, nw.lat]);
60		const seProjected = projection([se.lng, se.lat]);
61
62		const width = seProjected[0] - nwProjected[0];
63		const height = seProjected[1] - nwProjected[1];
64
65		if (width < 0 || height < 0) {
66			return;
67		}
68
69		const x = nwProjected[0];
70		const y = nwProjected[1];
71
72		boundsGroup.selectAll('rect').remove();
73
74		boundsGroup
75			.selectAll('rect')
76			.data([bounds])
77			.enter()
78			.append('rect')
79			.attr('x', x)
80			.attr('y', y)
81			.attr('width', width)
82			.attr('height', height)
83			.attr('fill', 'var(--primaryColor)')
84			.attr('fill-opacity', 0.1)
85			.attr('stroke', 'var(--primaryColor)')
86			.attr('stroke-width', 1);
87	});
88}