Engines

TacticalDraw talks to a map through MapAdapter. Choose the adapter package for your engine; the rest of your TacticalDraw code stays the same.

Switch engines in the demo below. Each library loads only when selected.

AmbushMain AttackFortified AreaBlockLoading map…

Wrap your map with the matching adapter:

new MapLibreAdapter(map); // maplibre-gl Map
new OpenLayersAdapter(map); // ol/Map
new LeafletAdapter(map); // leaflet Map

From there, new TacticalDraw(adapter), td.draw(...), and td.render(...) work identically. See the Quick start for a complete example.

Install

Install TacticalDraw, one adapter, and its peer map engine. No other engine packages are needed.

MapLibre GL

pnpm

pnpm add @orbat-mapper/tactical-draw @orbat-mapper/tactical-draw-adapter-maplibre maplibre-gl

npm

npm install @orbat-mapper/tactical-draw @orbat-mapper/tactical-draw-adapter-maplibre maplibre-gl

import { TacticalDraw } from "@orbat-mapper/tactical-draw";
import { MapLibreAdapter } from "@orbat-mapper/tactical-draw-adapter-maplibre";
import * as maplibregl from "maplibre-gl";
import workerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
import "maplibre-gl/dist/maplibre-gl.css";

maplibregl.setWorkerUrl(workerUrl);
const map = new maplibregl.Map({ container, style, center, zoom });
map.on("load", () => {
  const td = new TacticalDraw(new MapLibreAdapter(map));
});

OpenLayers

pnpm

pnpm add @orbat-mapper/tactical-draw @orbat-mapper/tactical-draw-adapter-openlayers ol

npm

npm install @orbat-mapper/tactical-draw @orbat-mapper/tactical-draw-adapter-openlayers ol

import { TacticalDraw } from "@orbat-mapper/tactical-draw";
import { OpenLayersAdapter } from "@orbat-mapper/tactical-draw-adapter-openlayers";
import OLMap from "ol/Map";
import "ol/ol.css";

const map = new OLMap({ target, layers, view });
const td = new TacticalDraw(new OpenLayersAdapter(map));

Leaflet

pnpm

pnpm add @orbat-mapper/tactical-draw @orbat-mapper/tactical-draw-adapter-leaflet leaflet

npm

npm install @orbat-mapper/tactical-draw @orbat-mapper/tactical-draw-adapter-leaflet leaflet

import { TacticalDraw } from "@orbat-mapper/tactical-draw";
import { LeafletAdapter } from "@orbat-mapper/tactical-draw-adapter-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

const map = L.map(target, { center, zoom });
const td = new TacticalDraw(new LeafletAdapter(map));

Use a different map engine

For another engine, extend BaseMapAdapter and implement the remaining MapAdapter methods.