A JavaScript library to build 3D maps with three.js.

Live demo / Source code

three-map-terrain takes two slippy map tilesets, one to fetch elevation data tiles, the other to texture the meshes built from said elevation data (any XYZ tileserver will do).

yarn add three three-map-terrain

import { Scene } from 'three'
import { Map, Source } from 'three-map-terrain'

const scene = new Scene()

const location = { lat: 46.57634, lon: 7.9904 }
const source = new Source({ api: 'eox' })
const map = new Map({ source, location })

scene.add(map)
map.init(() => {
  console.log('Map is ready')
})

See full example

import { useEffect, useState } from 'react'
import { Canvas } from '@react-three/fiber'
import { Map, Source } from 'three-map-terrain'

export default function App() {
  const [map, setMap] = useState<Map>()

  useEffect(() => {
    setMap(
      new Map({
        source: new Source({ api: 'eox' }),
        location: { lat: 46.57634, lon: 7.9904 }
      })
    )
  }, [])

  useEffect(() => {
    if (map) {
      map.init(() => console.log('Map is ready'))
    }
  }, [map])

  return (
    <Canvas>
      {map && <primitive object={map.terrain} position={[0, 0, 0]} />}
    </Canvas>
  )
}

See full example

Defines a tileset source used to fetch textures applied to the 3D terrain mesh.

const source = new Source({ api, token })

The main class three-map-terrain. Creates a 3D map using a grid of tiles.

const map = new Map({ source, location, options, material })

{
  nTiles: 3,
  zoom: 11,
  tileSize: 600,
  tileSegments: 100,
  zScale: 0.045
}

These props are passed to ShaderMaterial.

{
  lights: true,
  wireframe: false,
  fog: true
}

map.init(() => { console.log('Map is ready') })

const posInVector3 = map.getPosition(
  {
    lat: 46.57634,
    lon: 7.9904,
    alt: 3e3
  },
  { loadTile: true }
)

Parameter loadTile determines whether to load the required tile if you have specified coordinates that are outside the already loaded tiles.

map.clean()

• Asynchronous analog of the getPosition function without passing the altitude parameter
• Advanced example
• Base Pin component
• Base Direction component
• Vue example
• React example
• Basic example

The map library code is MIT licensed.

This project is an updated and more advanced version of the map33.js library.