§ examples · basics

Basic Map

Name: MapGPU
Author: Mustafa Gurbuz

Smallest viable MapGPU: one MapView, one raster basemap, Ankara in view.

slugbasic-map

source51 lines

statuslive

tsexamples-src/basic-map.ts

1/**
* Basic Map — MapView + a raster basemap. 2D/3D toggle demonstrates
* `view.switchTo(...)` keeping layers and tile cache alive across modes.
*/
5 
6import { MapView } from "mapgpu";
7import { RasterTileLayer } from "mapgpu/layers";
8import { RenderEngine } from "mapgpu/render";
9 
10import type { RunResultObject } from "@/components/examples/ExampleCanvas";
11 
12export async function run(container: HTMLElement): Promise<RunResultObject> {
const view = new MapView({
  container,
  renderEngine: new RenderEngine(),
  mode: "2d",
  center: [32.866, 39.925],
  zoom: 6,
  minZoom: 2,
  maxZoom: 18,
  backgroundColor: "transparent",
});
23 
view.map.add(
  new RasterTileLayer({
    id: "osm",
    urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
    minZoom: 0,
    maxZoom: 19,
    attribution: "© OpenStreetMap contributors",
  }),
);
33 
await view.when();
35 
return {
  dispose: () => view.destroy(),
  controls: [
    {
      kind: "toggle",
      id: "mode",
      labels: ["2D", "3D"],
      initial: false,
      onChange: async (on) => {
        await view.switchTo(on ? "3d" : "2d");
      },
    },
  ],
};
50}