DEV Community: vjmap

A Browser-Based CAD Editor with AI Agent Support - vjmap webcad

vjmap — Sun, 22 Mar 2026 08:55:39 +0000

Desktop CAD software has been the norm for decades — you buy a license, install a 2GB executable, and edit drawings on a dedicated workstation. That model works, but it creates real friction: version conflicts when files are emailed around, no collaboration, no browser access, and expensive per-seat licensing.

The web has changed nearly every other tool category. It's taken longer with CAD, because the problem is genuinely hard: CAD geometry is complex, files are large and binary, rendering precision matters, and users expect the same commands they've used for 20 years.

This post covers VJCAD — a web-based CAD editor built on TypeScript, WebGL, and WebAssembly — and walks through how to embed it in your own application. It also covers the AI agent integration via MCP, which lets you drive the CAD engine with natural language.

What's in the WebCAD

Before getting into code, here's what the platform actually provides:

Drawing engine: 20+ entity types (Line, Circle, Arc, Polyline, Spline, Text, MText, Insert/Block, Hatch, Dimension, etc.), 80+ commands (COPY, MOVE, ROTATE, SCALE, TRIM, EXTEND, OFFSET, MIRROR…), full Undo/Redo stack, layer management, linetype and lineweight support, TrueType and SHX font rendering.

DWG compatibility: Native read/write of DWG and DXF formats across multiple AutoCAD versions. Layers, blocks, external references, text styles, and linetypes all round-trip correctly. Export back to standard DWG for use in desktop AutoCAD.

Tile editing mode: For very large drawings (city-scale site plans, large infrastructure drawings), the server pre-renders the file into a multi-resolution tile pyramid. The browser loads only the tiles in the current viewport. You then use TILEEDITAREA or TILEEDITLAYER commands to pull down the entity data for just the region or layer you need to edit.

Version control: Branching and patch-based versioning inspired by Git. Each save creates an incremental patch recording added, modified, and deleted entities. Multiple team members can work on branches and merge with conflict detection.

Plugin system: Highly modular architecture. The built-in AI, 3D view, annotation, table extraction, and industry-specific features are all plugins. Developers can write and distribute their own.

AI agent via MCP: Plug the official MCP server into Cursor, Trae, or any MCP-compatible client and drive the CAD engine with natural language instructions.

Getting Started

Requirements

Node.js 16+
npm, yarn, or pnpm
A modern browser with WebGL support

Install

# New project with Vite + TypeScript (recommended)
npm create vite@latest my-webcad-app -- --template vanilla-ts
cd my-webcad-app
npm install vjcad
npm run dev

# Or add to an existing project
npm install vjcad

Minimal Setup

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebCAD App</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { width: 100%; height: 100%; overflow: hidden; }
    #cad-app { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div id="cad-app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

src/main.ts:

import { MainView, initCadContainer } from 'vjcad';

const cadView = new MainView({
  appname: "My CAD App",
  version: "v1.0.0"
});

initCadContainer("cad-app", cadView);

That's it. initCadContainer mounts the full CAD editor — Ribbon toolbar, command line, canvas, layer panel — into the #cad-app div.

Full Configuration

MainView accepts a configuration object. Here's the complete interface:

import { MainView, initCadContainer } from 'vjcad';

const cadView = new MainView({
  // Basic info
  appname: "My CAD App",
  version: "v1.0.0",

  // Backend service (for file operations, tile generation, version control)
  serviceUrl: "http://127.0.0.1:27660/api/v1",
  accessToken: "your-token",
  accessKey: "",                          // for encrypted drawings

  // UI layout
  sidebarStyle: "right",                  // "both" | "left" | "right" | "none"
  locale: "en-US",                        // "en-US" | "zh-CN"
                                          // omit to auto-detect from browser

  // Plugin marketplace
  pluginMarketUrl: "./plugins/plugins.json",

  // Font files (for rendering text entities in DWG)
  fonts: [
    { path: "./fonts/simkai.woff", name: "simkai", kind: "woff" },
    { path: "./fonts/_default.shx", name: "_default", kind: "shx" }
  ]
});

initCadContainer("cad-app", cadView);

Locale auto-detection priority order: URL ?lang= → localStorage → navigator.language → zh-CN.

Drawing Entities Programmatically

Initialization is asynchronous (canvas setup, WASM loading, plugin loading). Always await cadView.onLoad() before doing anything with the engine:

import { MainView, initCadContainer, Engine, LineEnt, CircleEnt, ArcEnt, PolylineEnt, TextEnt } from 'vjcad';

const cadView = new MainView({ appname: "WebCAD", version: "v1.0.0" });
initCadContainer("cad-app", cadView);

await cadView.onLoad();

// Draw a line from (0,0) to (100,100)
// Arrays are shorthand for Point2D objects
const line = new LineEnt([0, 0], [100, 100]);
line.setDefaults();
Engine.addEnt(line);

// Draw a circle: center (50,50), radius 30
const circle = new CircleEnt([50, 50], 30);
circle.setDefaults();
Engine.addEnt(circle);

// Draw an arc: center, radius, start angle, end angle (degrees)
const arc = new ArcEnt([0, 0], 40, 0, 270);
arc.setDefaults();
Engine.addEnt(arc);

// Draw a polyline
const polyline = new PolylineEnt([[0,0], [100,0], [100,100], [0,100]]);
polyline.closed = true;
polyline.setDefaults();
Engine.addEnt(polyline);

// Add single-line text
const text = new TextEnt("Hello WebCAD", [10, 10], 5);
text.setDefaults();
Engine.addEnt(text);

Engine.updateScreen();

Setting Entity Properties

import { Engine, LineEnt, McColor } from 'vjcad';

await cadView.onLoad();

const line = new LineEnt([0, 0], [200, 0]);
line.setDefaults();

// Color: use McColor or a CSS color string
line.color = new McColor(255, 0, 0);    // red
// or: line.color = McColor.fromCssColor("#FF0000");

// Layer: assign to an existing layer
line.layer = "WALLS";

// Linetype
line.linetype = "DASHED";

// Lineweight (in mm × 100, e.g. 25 = 0.25mm)
line.lineweight = 25;

Engine.addEnt(line);
Engine.updateScreen();

Getting User Input

The input methods are async and resolve when the user completes the action in the canvas:

import { Engine } from 'vjcad';

await cadView.onLoad();

// Prompt user to pick a point on the canvas
const ptResult = await Engine.getPoint({ prompt: "Pick start point" });
if (ptResult.isOk()) {
  const pt = ptResult.val();
  console.log(`User picked: ${pt.x}, ${pt.y}`);
}

// Prompt for a selection set (the user draws a selection box or clicks entities)
const ssResult = await Engine.getSelectSet({ prompt: "Select entities" });
if (ssResult.isOk()) {
  const ss = ssResult.val();
  console.log(`Selected ${ss.count()} entities`);
}

// Prompt for a numeric value
const distResult = await Engine.getReal({ prompt: "Enter distance", default: 100 });
if (distResult.isOk()) {
  console.log(`Distance: ${distResult.val()}`);
}

// Prompt with keyword options (like AutoCAD command keywords)
const kwResult = await Engine.getKeywords({
  prompt: "Select mode [Rect/Circle/Polygon]",
  keywords: "Rect Circle Polygon",
  default: "Rect"
});
if (kwResult.isOk()) {
  console.log(`User chose: ${kwResult.val()}`);
}

Writing a Custom Command

VJCAD's command system uses the same pattern as AutoCAD: commands are named strings that users type at the command line, and they can prompt for user input mid-execution.

import { Engine, McCommand, LineEnt, McColor } from 'vjcad';

// Register a custom command called "REDLINE"
Engine.addCommand("REDLINE", async () => {
  // Ask user for start point
  const startResult = await Engine.getPoint({ prompt: "Pick start point" });
  if (!startResult.isOk()) return;

  // Ask user for end point, showing a rubber-band preview line
  const endResult = await Engine.getPoint({
    prompt: "Pick end point",
    basePoint: startResult.val()
  });
  if (!endResult.isOk()) return;

  // Draw a red line between the two points
  const line = new LineEnt(startResult.val(), endResult.val());
  line.setDefaults();
  line.color = new McColor(255, 0, 0);
  Engine.addEnt(line);
  Engine.updateScreen();
});

// The user can now type "REDLINE" in the command bar to trigger this

Writing a Plugin

Plugins are the primary extension mechanism. They hook into the Ribbon toolbar, command system, and event lifecycle:

import { PluginBase, Engine, LineEnt } from 'vjcad';

export class MyPlugin extends PluginBase {
  // Unique plugin ID
  id = "my-plugin";
  name = "My Plugin";

  // Called when the plugin is loaded
  async onLoad() {
    // Register commands
    Engine.addCommand("MY_DRAW_GRID", () => this.drawGrid());

    // Add a Ribbon button
    this.addRibbonButton({
      tabName: "Tools",
      groupName: "My Plugin",
      label: "Draw Grid",
      icon: "grid",
      command: "MY_DRAW_GRID"
    });
  }

  private async drawGrid() {
    const spacing = 50;
    const count = 10;
    for (let i = 0; i <= count; i++) {
      // Horizontal lines
      const h = new LineEnt([0, i * spacing], [count * spacing, i * spacing]);
      h.setDefaults();
      Engine.addEnt(h);
      // Vertical lines
      const v = new LineEnt([i * spacing, 0], [i * spacing, count * spacing]);
      v.setDefaults();
      Engine.addEnt(v);
    }
    Engine.updateScreen();
  }
}

import { MainView, initCadContainer } from 'vjcad';
import { MyPlugin } from './plugins/MyPlugin';

const cadView = new MainView({ appname: "WebCAD", version: "v1.0.0" });

// Register plugins before mounting
cadView.registerPlugin(new MyPlugin());

initCadContainer("cad-app", cadView);

The official plugins use the same API — you can inspect their source code in the GitHub repository as reference.

Version Control (Git-Style for Drawings)

Every save creates a Patch — an incremental record of added, modified, and deleted entities. Patches chain together into a version history, and you can create branches:

main  ──●──●──●──────────────●  (merge)
              \              /
 feature        ●──●──●──●

Multiple team members work on separate branches. When merging, the system detects conflicts (two people edited the same entity) and offers three resolution strategies: server-priority, local-priority, or manual.

This is managed through the backend service API, and VJCAD's built-in version panel provides a UI for it without any custom code.

AI Agent via MCP

This is the most forward-looking part of the platform. VJCAD exposes an official MCP (Model Context Protocol) server, which you can connect to any MCP-compatible AI client.

Connect Cursor or Trae

Add this to your MCP client configuration:

{
  "mcpServers": {
    "vjcad": {
      "url": "https://vjmap.com/server/aicad/mcp"
    }
  }
}

Once connected, your AI assistant can read and modify the open drawing through three interaction modes:

Ask — Read-only. The AI queries drawing data, counts entities, extracts layer info, reads attribute values. No modifications. Good for drawing review and reporting.

Agent — Default execution mode. The AI receives an instruction and calls the VJCAD API directly to draw or modify. Good for concrete, well-defined tasks.

Plan — For complex tasks. The AI decomposes the instruction into numbered steps, shows you the plan, then executes step by step. For example, "Draw a floor plan":

Create layers (WALLS, DOORS, WINDOWS, DIMS)
Draw outer wall perimeter
Draw interior walls
Insert door/window blocks
Add dimension annotations

What you can ask it to do

The AI's capability depends on what "skills" (system prompts + API docs) are loaded. With the base SDK skill:

"Draw a 10×10 grid with 50mm spacing."
"Change all red lines to blue dashed lines."
"Add a text label 'Entry' at coordinate (200, 100), height 5mm."
"Select all entities on the DIMENSIONS layer and delete them."

With a domain-specific skill (e.g., floor plan rules), you can go further:

"Draw a 3-bedroom apartment, approximately 120 sq meters."

The AI generates and executes the API calls. Non-CAD users can accomplish tasks that would otherwise require hours of manual work by someone with CAD training.

Build your own skill

The skill mechanism is open. You write a skill as a structured prompt that teaches the AI your domain rules and the relevant API methods. This is how you build a vertical industry platform on top of VJCAD:

Electrical schematic rules → electrical diagram CAD tool
Pipe network topology → utility/infrastructure CAD tool
Structural detailing standards → structural engineering CAD tool

The platform provides the engine; you bring the domain knowledge.

Source Code and Resources

The example source code (HTML, Vue, and React scaffolds) is available on both GitHub and Gitee:

GitHub: github.com/vjmap/vjmap-webcad
Gitee: gitee.com/vjmap/webcad

How to Display CAD DWG Files in a Web Browser — No Plugins(CAD+WEBGIS)

vjmap — Sun, 22 Mar 2026 08:24:37 +0000

`
If you've ever tried to share a DWG file with someone who doesn't have AutoCAD, you know the pain: they can't open it, exporting to PDF kills the layers, and running a full desktop license just to view drawings is overkill.

What if non-technical users could just open a URL?

This post walks through how to render AutoCAD DWG files directly in a web browser — no plugins, no desktop software, no PDF export — using WebGL and a JavaScript SDK called VJMAP.

Here's what the end result looks like: a fully interactive CAD drawing in the browser, with infinite zoom, pan, layer query, and entity hover highlighting.

Why Is This Harder Than It Sounds?

DWG is Autodesk's proprietary binary format. It contains geometric entities (lines, arcs, polylines, ellipses, splines, blocks, text), layer metadata, coordinate systems, and rendering styles — none of which browsers can parse natively.

The common workarounds all have real tradeoffs:

Export to SVG / PDF — Simple, but lossy. Loses layers, metadata, and is completely static. No interaction possible.

Convert DWG → DXF → GeoJSON → Leaflet/OpenLayers — Doable with GDAL + GeoServer/MapServer, but CAD and GIS have fundamentally different data models. CAD entities like ellipses, splines, and blocks don't map cleanly to GIS point/line/polygon types. You end up with a drawing that looks slightly wrong everywhere: different line styles, missing fonts, distorted geometry.

ActiveX controls — Legacy Windows-only approach, requires browser plugins, and Chrome dropped ActiveX support years ago.

Autodesk Forge / APS — Powerful, but your DWG data must live on Autodesk's cloud. Not an option if you have data sovereignty requirements.

What we actually need is something that:

Parses DWG server-side with full fidelity — no data model conversion
Serves the result as tile data so the browser only loads what's visible
Renders with WebGL for smooth infinite zoom
Exposes a JavaScript API for interaction, querying, and overlays

That's the approach VJMAP takes.

How It Works: The WebGIS Approach

The key insight is to treat CAD drawings the way web maps treat geographic data: tile pyramids.

Traditional approaches download the entire drawing to the browser and render it all at once. For large DWG files (tens of MB or more), this kills both load time and rendering performance.

The WebGIS approach uses space to buy time: the server pre-processes the DWG and generates either raster tiles (PNG images) or vector tiles (Mapbox Vector Tile format). The browser only requests the tiles for the current viewport and zoom level — never the full dataset.

┌─────────────┐     parse &      ┌─────────────────────┐    tile     ┌──────────────┐
│  DWG File   │ ──────────────▶  │  VJMAP Map Service  │ ─────────▶  │   Browser    │
│  (on server)│   render tiles   │  (tile server)      │  on demand  │  (WebGL)     │
└─────────────┘                  └─────────────────────┘             └──────────────┘
                                                                            │
                                                                   vjmap JavaScript SDK
                                                                   layers / query / draw

Raster tiles — PNG images generated server-side, very stable, works on any device. Zero client-side rendering cost.

Vector tiles — Geometric data served in PBF format (Mapbox Vector Tile standard), rendered by WebGL in the browser. Supports dynamic style changes, higher visual quality, and client-side querying of entity properties.

Both modes are supported. Vector tiles give better results when you need to query or highlight individual entities; raster tiles are simpler and more broadly compatible.

Getting Started

Option 1: Plain HTML (no build tools)

The quickest way to try VJMAP is a single HTML file. Here's a complete working example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VJMAP DWG Viewer</title>
    <link rel="stylesheet" href="https://vjmap.com/demo/js/vjmap/vjmap.min.css">
    <script src="https://vjmap.com/demo/js/vjmap/vjmap.min.js"></script>
</head>
<body style="margin:0; overflow:hidden; background:#022B4F;">
    <div id="map" style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</body>
<script>
(async () => {
    const env = {
        serviceUrl: "https://vjmap.com/server/api/v1",
        accessToken: "your-access-token",
        exampleMapId: "sys_zp"   // use a map ID you've uploaded
    };

    // Create service object
    let svc = new vjmap.Service(env.serviceUrl, env.accessToken);

    // Open a DWG map (first time: pass fileid; after that the server caches it)
    let res = await svc.openMap({
        mapid: env.exampleMapId,
        mapopenway: vjmap.MapOpenWay.GeomRender, // geometric rendering mode
        style: vjmap.openMapDarkStyle()           // dark background style
    });

    if (res.error) {
        console.error(res.error);
        return;
    }

    // Build the coordinate system from the drawing's native bounds
    let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
    let prj = new vjmap.GeoProjection(mapExtent);

    // Create the map — familiar API if you've used Mapbox GL JS
    let map = new vjmap.Map({
        container: 'map',
        style: svc.vectorStyle(),                           // vector tile rendering
        center: prj.toLngLat(mapExtent.center()),
        zoom: 1,
        pitch: 0,
        renderWorldCopies: false
    });

    // Bind the service and projection to the map
    map.attach(svc, prj);
    await map.onLoad();

    // Add a mouse position control (shows CAD coordinates)
    let mousePositionControl = new vjmap.MousePositionControl({ showLatLng: true });
    map.addControl(mousePositionControl, "bottom-left");
})();
</script>
</html>

That's it — open the HTML file in a browser and your DWG is rendered with WebGL.

💡 Note: On the first openMap call for a new mapid, the server parses the DWG and generates the tile cache. This may take a few seconds depending on file size. All subsequent opens are instant.

Option 2: React

Install the SDK:

npm install vjmap

Here's a complete React component using hooks:

// Map.js
import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
import vjmap from '!vjmap';              // webpack raw import
import 'vjmap/dist/vjmap.min.css';
import './Map.css';

const Tooltip = ({ prop }) => (
    <div id={`tooltip-${prop.id}`}>
        <strong>Entity ID:</strong> {prop.id}<br />
        <strong>Layer:</strong> {prop.layerName}<br />
        <strong>Type:</strong> {prop.typeName}<br />
        <strong>Color:</strong> <span style={{ color: prop.color }}>{prop.color}</span>
    </div>
);

const Map = () => {
    const mapContainerRef = useRef(null);
    const tooltipRef = useRef(new vjmap.Popup({ offset: 15 }));

    useEffect(() => {
        let map;

        (async () => {
            const env = {
                serviceUrl: "https://vjmap.com/server/api/v1",
                accessToken: "your-access-token",
                exampleMapId: "sys_zp"
            };

            let svc = new vjmap.Service(env.serviceUrl, env.accessToken);

            let res = await svc.openMap({
                mapid: env.exampleMapId,
                mapopenway: vjmap.MapOpenWay.GeomRender,
                style: vjmap.openMapDarkStyle()
            });

            if (res.error) {
                console.error(res.error);
                return;
            }

            let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
            let prj = new vjmap.GeoProjection(mapExtent);

            map = new vjmap.Map({
                container: mapContainerRef.current,
                style: svc.vectorStyle(),
                center: prj.toLngLat(mapExtent.center()),
                zoom: 1,
                pitch: 0,
                renderWorldCopies: false
            });

            map.attach(svc, prj);
            await map.onLoad();

            // Get layer info and entity type names from the server
            const layers = svc.getMapLayers();
            const { entTypeIdMap } = await svc.getConstData();

            // Mouse position control
            map.addControl(new vjmap.MousePositionControl(), "bottom-left");

            // Hover highlighting with tooltip in vector tile mode
            map.enableVectorLayerHoverHighlight((eventName, feature, layer, e) => {
                if (eventName === "mouseleave") {
                    tooltipRef.current.remove();
                    return;
                }

                const prop = feature.properties;
                if (!prop) return;

                prop.layerName = layers[prop.layer].name;
                prop.typeName = entTypeIdMap[prop.type];
                prop.id = feature.id;

                const tooltipNode = document.createElement('div');
                ReactDOM.render(<Tooltip prop={prop} />, tooltipNode);

                tooltipRef.current
                    .setLngLat(e.lngLat)
                    .setDOMContent(tooltipNode)
                    .addTo(map);
            });
        })();

        return () => map?.remove();
    }, []);

    return <div className="map-container" ref={mapContainerRef} />;
};

export default Map;

/* Map.css */
.map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #022B4F;
}

// App.js
import React from 'react';
import Map from './Map';

function App() {
    return <div><Map /></div>;
}

export default App;

Option 3: Vue 3

<!-- Map.vue -->
<script setup lang="ts">
import 'vjmap/dist/vjmap.min.css'
import { Map } from "vjmap"
import { onMounted, provide, ref } from 'vue';
import { enableHoverHighlight, initMap } from './lib/map';

let map: Map;
const isLoaded = ref(false);

onMounted(async () => {
    map = await initMap();
    isLoaded.value = true;
    await enableHoverHighlight(map);
});

provide('map', () => map); // inject map into child components
</script>

<template>
    <div>
        <div id="map-container" />
        <UILayer v-if="isLoaded" />
    </div>
</template>

<style scoped>
#map-container {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    background: #022B4F;
}
</style>

<!-- App.vue -->
<script setup lang="ts">
import Map from './Map.vue'
</script>

<template>
    <Map />
</template>

Working with Layers and Entities

Query layers from the DWG

// Returns all layers defined in the DWG file
const layers = svc.getMapLayers();
console.log(layers.map(l => l.name));
// e.g. ['0', 'WALLS', 'DOORS', 'ELECTRICAL', 'DIMENSIONS', 'TEXT']

Highlight on hover — vector tile mode

// In vector tile mode, use enableVectorLayerHoverHighlight
map.enableVectorLayerHoverHighlight((eventName, feature, layer, e) => {
    const prop = feature.properties;
    console.log(`Layer: ${layers[prop.layer].name}, Type: ${entTypeIdMap[prop.type]}`);
});

Highlight on click — raster tile mode

// In raster tile mode, use enableLayerClickHighlight
map.enableLayerClickHighlight(svc, e => {
    console.log(`type: ${e.name}, id: ${e.objectid}, layer: ${e.layerindex}`);
});

Raster vs Vector Tiles: Which Should You Use?

	Raster Tiles	Vector Tiles
How it works	Server renders PNG images	Server sends PBF geometry; browser renders with WebGL
Visual quality	Good	Excellent (resolution-independent)
Tile size	Larger	Smaller
Dynamic styling	❌	✅
Client entity querying	❌	✅
Browser requirements	Low	HTML5 / WebGL
Best for	Simple viewing	Interactive apps

To switch between them, just change the style:

// Vector tiles (recommended for interactive apps)
style: svc.vectorStyle()

// Raster tiles (simpler, broader device compatibility)
style: svc.rasterStyle()

Adding Overlays

VJMAP supports adding any overlay on top of the CAD drawing — markers, polygons, popups, extruded 3D shapes.

Add a marker with a popup

// Convert a CAD coordinate point to map lat/lng
const cadPoint = new vjmap.Point(587500025.09578, 3103899983.60220);
const pt = map.toLngLat(cadPoint);

const popup = new vjmap.Popup({ closeOnClick: false, offset: 5 })
    .setHTML('<p>This is a location in the drawing</p>');

const marker = new vjmap.Marker();
marker.setLngLat(pt).setPopup(popup).addTo(map);
marker.togglePopup();

Add 3D extruded shapes

const mapBounds = map.getGeoBounds(0.4);
const geoDatas = [];

for (let i = 0; i < 100; i++) {
    const len = vjmap.randInt(mapBounds.width() / 200, mapBounds.width() / 100);
    const p1 = mapBounds.randomPoint();
    const pts = [
        p1,
        vjmap.geoPoint([p1.x, p1.y + len]),
        vjmap.geoPoint([p1.x + len, p1.y + len]),
        vjmap.geoPoint([p1.x + len, p1.y])
    ];
    geoDatas.push({
        points: map.toLngLat(pts),
        properties: {
            name: `square${i + 1}`,
            color: vjmap.randomColor(),
            height: prj.toMeter(vjmap.randInt(len * 10, len * 20)),
            baseHeight: 0
        }
    });
}

const fillExtrusions = new vjmap.FillExtrusion({
    data: geoDatas,
    fillExtrusionColor: ['case',
        ['to-boolean', ['feature-state', 'hover']], 'red',
        ['get', 'color']
    ],
    fillExtrusionOpacity: 0.8,
    fillExtrusionHeight: ['get', 'height'],
    fillExtrusionBase: ['get', 'baseHeight'],
    isHoverPointer: true,
    isHoverFeatureState: true
});

fillExtrusions.addTo(map);
fillExtrusions.clickLayer(e =>
    console.log(`Clicked: ${e.features[0].properties.name}`)
);
fillExtrusions.hoverPopup(
    f => `<h3>${f.properties.name}</h3>Color: ${f.properties.color}`,
    { anchor: 'bottom' }
);

Drawing Tools

VJMAP includes built-in drawing tools you can add to the map:

const draw = new vjmap.Draw.Tool();
map.addControl(draw, 'top-right');

// Pre-populate with a polygon
const mapBounds = map.getGeoBounds(0.4);
draw.set(vjmap.createPolygonGeoJson(map.toLngLat(mapBounds.randomPoints(3, 3))));

// Start drawing mode
draw.changeMode("draw_polygon");

Deployment

VJMAP supports private deployment — your DWG files never have to leave your own infrastructure.

Trial / development: Connect directly to the VJMAP cloud service at https://vjmap.com/server/api/v1. The free trial has watermarks, upload size limits, and uploaded data may be periodically cleared. Feature set is identical to the licensed version.

Production: Purchase a license and deploy on your own server. VJMAP provides installation packages for:

Windows — installer-based setup
Linux — binary package (supports AMD64 and ARM64, compatible with mainstream domestic CPUs and OS)
Docker — restore from a licensed image provided after purchase

🔒 For Docker deployment and private server setup, contact vjmapcom@163.com after purchasing a license.

Private deployment gives you full control over your data, no watermarks, no file size limits, and the ability to serve large enterprise drawings.

2D and 3D — Same Codebase

One of VJMAP's more useful features is that 2D and 3D views are handled by the same SDK. The pitch parameter on the map object controls the view angle:

// 2D view
let map = new vjmap.Map({ ..., pitch: 0 });

// 3D tilted view
let map = new vjmap.Map({ ..., pitch: 60 });

VJMAP3D extends this with a full Three.js-based 3D engine for more complex spatial visualization, using the same map IDs and service API.

Summary

Here's what we covered:

Why native DWG rendering in browsers is hard, and why the "convert to GeoJSON" approach has fundamental limitations
How the WebGIS tile pyramid approach solves the performance and fidelity problems
The difference between raster and vector tile modes and when to use each
Working code examples for plain HTML, React, and Vue 3
How to query layers, highlight entities, and add overlays
Drawing tool integration
Deployment options from trial to production private deployment

The result: a fully interactive CAD drawing viewer that runs in any modern browser, with no AutoCAD license, no plugins, and no export step required.

Resources:

Have you worked with CAD data on the web before? Curious what approach you've taken — drop a comment below.