<script>
import { geoOrthographic, geoPath } from 'd3-geo';
import { drag } from 'd3-drag';
import { json } from 'd3-fetch';
import { select } from 'd3-selection';
import { onMount } from 'svelte';
import { feature, mesh } from 'topojson-client';
// Map setup & rendering
let projection = geoOrthographic();
let path = geoPath().projection(projection);
let rotation = [0, 0, 0]; // Initial rotation
let sphere = { type: 'Sphere' }; // Globe Outline
let land, borders;
// Reactive code to update on map dragging
$: if (projection) {
projection.rotate(rotation);
path = geoPath().projection(projection);
}
/**
* Calculates the rotation of the globe when the user drags on the map
*
* @param event
*/
function dragged(event) {
const dx = event.dx;
const dy = event.dy;
const currentRotation = projection.rotate();
const radius = projection.scale();
const scale = 360 / (2 * Math.PI * radius);
rotation = [
currentRotation[0] + dx * scale,
currentRotation[1] - dy * scale,