The camera

The camera

import { createGalaxyMap } from '@elite-dangerous-almanac/galaxy-map';

const map = createGalaxyMap(canvas, {
  bounds: { mode: 'sphere', centre: [0, 0, 0], radiusLy: 1000 },
  startView: { system: 'Sol', distance: 300, pitch: -20 },
  interaction: { select: false },
});

map.addCategories([{ name: 'Landmark', color: [255, 255, 255] }]);
map.addSystems([
  { name: 'Sol', coords: { x: 0, y: 0, z: 0 }, categories: ['Landmark'] },
  {
    name: 'Achenar',
    coords: { x: 67.5, y: -119.46, z: 24.84 },
    categories: ['Landmark'],
  },
]);

const end = await map.flyTo({ system: 'Achenar', distance: 200 });
// 'landed', or 'interrupted' where a user input or a second flight cut it short

Run this example

bounds is how much of the space the user may browse. unrestricted is the default, auto is the box that holds every system of the set, and sphere is a ball. The bound clamps the cursor and the far zoom limit together, and it changes nothing the map draws.

startView is the camera the map opens at, and the map flies nowhere to reach it. A field that a startView or a flyTo target leaves out keeps the value of the current view, so flyTo({ distance: 100 }) is a zoom in place. interaction is which of the user's inputs the map acts on: zoom, orbit, pan, keys and select. A switch that is off leaves the same move open to your own calls.

The view in a URL

import { decodeView, encodeView } from '@elite-dangerous-almanac/galaxy-map';

const fragment = encodeView(map.getView());
const read = decodeView(fragment);
if (read !== null) map.setView(read);

Run this example

getView, setView and onViewChange read and write the view. The three URL calls are pure, so you need no map to save a view or to load one.

The reference

BrowseBounds is bounds, StartView is startView, and InteractionSwitches is interaction. MapView is the view, FlyToTarget and FlyToOptions are what flyTo takes, and FlightOutcome is what it gives back. encodeView, decodeView, decodeGrid and createFragmentWriter are the URL calls.