Help with basic usage

[shot-codes]

I'm trying to understand the basic usage of the lib. The docs mention that all the providers need API keys, but I am unsure of where I should provide them. For example, I am trying to make a basic planar map with OpenStreetMapsProvidor; Are the api keys a parameter in the address URL passed to the constructor? Or is there something else that I am perhaps missing?

[shot-codes]

In my pursuit, I have been trying to get geo-three working with openFreeMap. It uses pbf vector tiles. Is adding support for such a case out of scope for geo-three?

[shot-codes]

I found another issue regarding vector tiles and so the second comment can be disregarded. However, I am still experiencing issues with the default provider for OpenStreetMaps https://a.tile.openstreetmap.org/. There are successful get requests to the provider but the files are sizes of the pngs are in the order of bytes and the tiles appear as either all black or all white

[shot-codes]

I've now tried to create a minimal example, whereas before I was attempting to introduce into an existing project. In the minimal example there is a single GET request made to a.tile.openstreetmap.org/0/0/0.png that returns 200 with a size of ~7kb, but no other requests are made an nothing is rendered to the scene.

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { MapView, OpenStreetMapsProvider } from 'geo-three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
const controls = new OrbitControls(camera, renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const provider = new OpenStreetMapsProvider();
const map = new MapView(MapView.PLANAR, provider);
scene.add(map);
map.scale.set(0.001, 0.001, 0.001);

camera.position.z = 5;
controls.update();

function animate() {
    renderer.render(scene, camera);
}

[tentone]

Hello

The code above seems okay, i would expect this to work.

Wich three version are you using?

[shot-codes]

Thanks for the response :)

  "dependencies": {
    "geo-three": "^0.1.14",
    "three": "^0.168.0"
  }

[shot-codes]

I've also tried with older versions of three, down to 0.160.0 with no luck

[shot-codes]

I've created a repo containing a minimal reproduction of my issue. If anyone has the chance to try to run it, it would be greatly appreciated. Or if someone can provide a minimal example that is working :)

https://github.com/shot-codes/three-geo-minimal