Getting started

On this page 7

Install ts-maps, render an OpenStreetMap basemap, and drop a marker with a popup.

Install

ts-maps ships as a single ESM module with a small required stylesheet. There are no runtime dependencies.

bun add ts-maps

npm install ts-maps

pnpm add ts-maps

yarn add ts-maps

Set up the container

Every map needs a sized <div> host and the ts-maps base stylesheet.

<link rel="stylesheet" href="/node_modules/ts-maps/dist/ts-maps.css">

<div id="map" style="width: 100%; height: 560px;"></div>

Create the map

TsMap is the root class. Give it a container id or element and a camera spec (center, zoom, optionally bearing and pitch).

import { TsMap, tileLayer, Marker } from 'ts-maps'

const map = new TsMap('map', {
  center: [40.758, -73.9855],
  zoom: 13,
  minZoom: 2,
  maxZoom: 19,
})

Add a basemap

The tileLayer factory returns a TileLayer that fetches standard XYZ raster tiles. This example uses OpenStreetMap tiles (please follow their tile usage policy in production).

tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; OpenStreetMap contributors',
  maxZoom: 19,
}).addTo(map)

const marker = new Marker([40.758, -73.9855], { draggable: true })
  .addTo(map)
  .bindPopup('<b>Times Square</b><br>Hello from ts-maps')
marker.openPopup()

Try it

The Basic map example wires this walkthrough end-to-end. Copy the source out of that page to adapt for your project.

Next steps

TsMap class — camera model, events, lifecycle.
Layer taxonomy — which layer to pick for which job.
Style spec — data-driven layer styling with expressions.
Vector tiles — deep dive — MVT pipeline, queryRenderedFeatures, expression filters.
3D rendering — fog, sky, fill-extrusion, custom WebGL layers.
Terrain — DEM-based mesh warping and elevation queries.
Services — geocoding, directions, isochrones.
Offline & workers — tile cache, pre-fetching, lifecycle.
Examples gallery — 12 runnable demos.