GitHub

Getting Started

Installation

MapGPU is distributed as a set of npm packages. Install the core packages:

npm install @mapgpu/core @mapgpu/layers @mapgpu/render-webgpu

Or with pnpm:

pnpm add @mapgpu/core @mapgpu/layers @mapgpu/render-webgpu

Prerequisites

  • Node.js >= 20
  • Browser with WebGPU support (Chrome 113+, Edge 113+, Firefox Nightly)
  • TypeScript 5.7+ recommended (strict mode)

Quick Start

Create a minimal map with an OpenStreetMap basemap:

import { MapView } from '@mapgpu/core';
import { RasterTileLayer } from '@mapgpu/layers';

const view = new MapView({
  container: 'map',
  zoom: 4,
  center: [29, 41], // Istanbul [lon, lat]
});

const osm = new RasterTileLayer({
  id: 'osm',
  title: 'OpenStreetMap',
  urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
});

view.map.add(osm);
<div id="map" style="width: 100%; height: 100vh;"></div>

Package Overview

PackageDescription
@mapgpu/coreMapView, event system, projections, renderers
@mapgpu/layersGeoJSON, RasterTile, WMS, Graphics, WGSLLayer
@mapgpu/render-webgpuWebGPU render engine, shader pipelines
@mapgpu/adapters-ogcWMS, WFS, OGC API adapters
@mapgpu/widgetsLayerList, ScaleBar, Coordinates, Legend, Popup
@mapgpu/analysisLOS, viewshed, buffer, route sampling
@mapgpu/toolsDrawing tools, measurement, snapping
@mapgpu/wasm-coreRust/WASM: projection, triangulation, clustering

Adding a GeoJSON Layer

import { GeoJSONLayer } from '@mapgpu/layers';

const layer = new GeoJSONLayer({
  id: 'cities',
  title: 'World Cities',
  url: '/data/cities.geojson',
  renderer: {
    type: 'simple',
    symbol: { type: 'point', size: 8, color: [255, 109, 58, 255] },
  },
});

view.map.add(layer);

3D Globe Mode

Switch to globe mode with a single call:

// Start in 2D
const view = new MapView({
  container: 'map',
  mode: '2d',
});

// Switch to 3D globe
await view.switchTo('3d');

// Fly to a location
await view.goTo({
  center: [29, 41],
  zoom: 5,
  pitch: 45,
  bearing: -20,
});

What’s Next?