From Anonymous, 2 Weeks ago, written in JavaScript.
This paste will expire in 1 Week.
Embed
  1. import React, { useRef } from "react";
  2. import ReactDOM from "react-dom";
  3. import { Canvas, useFrame, useThree } from "@react-three/fiber";
  4. import { MapControls, Stats,  } from "@react-three/drei";
  5. import * as Geo from "geo-three"
  6. const MapF = () => {
  7.   const torusRef = useRef();
  8.   const { scene, gl } = useThree();
  9.   var coords = Geo.UnitsUtils.datumsToSpherical(40.940119, -8.535589);
  10.   let provider = new   Geo.OpenStreetMapsProvider()
  11.   //BingMapsProvider(BingmapsKey, Geo.BingMapsProvider.ROAD)
  12.   let map = new Geo.MapView(Geo.MapView.PLANAR, provider,provider);
  13.  map.lod= new Geo.LODRaycast()
  14.   scene.add(map)
  15.   return (
  16.     <scene ref={torusRef}/>
  17.   );
  18. };
  19. export function Map(){
  20.         var coords = Geo.UnitsUtils.datumsToSpherical(40.940119, -8.535589);
  21.  
  22.   return (
  23.     <Canvas
  24.       style={{ height: 800, width: 800 }}
  25.       camera={{ position: [0, 1000, 0], zoom: 1, up: [0, 0, 1], far: 10000 }}>
  26.       <pointLight position={[5, 5, 5]} />
  27.       <MapF />
  28.       <MapControls
  29.           target0={[coords.x, 0, -coords.y]}
  30.           />
  31.       <Stats />
  32.     </Canvas>
  33.   );
  34. };