ThreeJS Slippy Map Tiled Globe

A ThreeJS mesh to render tiled raster images onto a sphere using slippy map mechanics, with automatic detection of zoom level and tiles in view based on camera aim and proximity.

Check out the example (source).

Quick start

import SlippyMapGlobe from 'three-slippy-map-globe';

or using a script tag

<script src="//unpkg.com/three-slippy-map-globe"></script>

then

const myMap = new SlippyMapGlobe(100, {
  tileUrl: (x, y, l) => `https://tile.openstreetmap.org/${l}/${x}/${y}.png`
});

const myScene = new THREE.Scene();
myScene.add(myMap);

and on camera position changes:

controls.addEventListener('change', () => {
  myMap.updatePov(camera);
});

API reference

Initialisation

new SlippyMapGlobe(globeRadius: float, { configOptions })

| Config options | Description | Default | |-------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------:| | tileUrl: fn(x, y, l) | The callback function that defines the URL of the tile engine, invoked for each single tile that needs fetching. The slippy map coordinates x, y and l (zoom level) are passed as arguments and the function is expected to return a URL string. | - | | minZoom: int | The minimum zoom level of the tiles. | 0 | | maxZoom: int | The maximum zoom level of the tiles. | 17 | | mercatorProjection: boolean | Whether the tile images use a mercator projection. This is usually true for slippy maps tile sets. | true |

Attributes

| Attribute | Description | Default | |------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------------------:| | tileUrl: fn(x, y, l) | The callback function that defines the URL of the tile engine, invoked for each single tile that needs fetching. The slippy map coordinates x, y and l (zoom level) are passed as arguments and the function is expected to return a URL string. | - | | minZoom: int | The minimum zoom level of the tiles. | 0 | | maxZoom: int | The maximum zoom level of the tiles. | 17 | | thresholds: float[] | The list of zoom level shifting thresholds, based on camera proximity to the surface, specified in globe radius units. | [8, 4, 2, 1, 0.5, 0.25, ...] | | level: int | The current zoom level the map is in. Can be modified to manually shift zoom levels. | 0 |

Methods

| Method | Description | |-------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | updatePov(camera) | Reports the current position of the camera to this component. The camera object in use should be passed as sole argument. This is necessary to internally calculate which tiles are in view and need to be fetched, as well as controlling automatic zoom level changes. This method should be called everytime the camera changes position, so that the tiles in view and zoom level remains synchronized with what the viewport is showing. | | clearTiles() | Removes all the tiles across all zoom levels currently loaded on the map. |

Giving Back

If this project has helped you and you'd like to contribute back, you can always buy me a ☕!