---
title: Create and Modify CAD Drawings
source: https://vjmap.com/en/guide/newmap.html
---
# Create and Modify CAD Drawings
## Supported CAD Entity Types
| Class Name | Description |
|:---|:---|
| DbLine | Line |
| DbCurve | Curve |
| Db2dPolyline | 2D Polyline |
| Db3dPolyline | 3D Polyline |
| DbPolyline | Polyline |
| BlockReference | Block Reference |
| DbArc | Arc |
| DbCircle | Circle |
| DbEllipse | Ellipse |
| DbHatch | Hatch |
| Text | Single-line Text |
| DbMText | Multiline Text |
| RasterImage | Raster Image |
| DbShape | Shape Entity |
| Spline | Spline |
| Wipeout | Wipeout Entity |
| Dimension | Dimension |
| Db2LineAngularDimension | Angular Dimension [Two Lines] |
| Db3PointAngularDimension | Angular Dimension [Three Points] |
| DbAlignedDimension | Aligned Dimension |
| DbArcDimension | Arc Dimension |
| DbDiametricDimension | Diametric Dimension |
| DbOrdinateDimension | Ordinate Dimension |
| DbRadialDimension | Radial Dimension |
| DbRadialDimensionLarge | Radial Dimension with Leader |
| DbRotatedDimension | Rotated Dimension |
| DbAttributeDefinition | Attribute Definition |
| DbTable | Table |
| DbMLeader | Leader |
| DbSolid | Solid Entity |
| DbLayer | Layer |
| DbTextStyle | Text Style |
| DbDimStyle | Dimension Style |
| DbLinetypeStyle | Linetype Style |
| DbBlock | Block Definition |
| DbDocument | Database Document |
## Create Drawing Example
## Create Drawing Code
```js
(async () => {
// --Create map--Create CAD drawing in backend, then open in frontend
// js code
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
let doc = new vjmap.DbDocument();
let entitys = [];
let line1 = new vjmap.DbLine();
line1.start = [0, 0]
line1.end = [0, 15]
entitys.push(line1)
let line2 = new vjmap.DbLine();
line2.start = [0, 14.1]
line2.end = [2.99, 14.1]
entitys.push(line2)
let line3 = new vjmap.DbLine();
line3.start = [0, 0.9]
line3.end = [2.99, 0.9]
entitys.push(line3)
let line4 = new vjmap.DbLine();
line4.start = [0, 9.95]
line4.end = [5.8, 9.95]
entitys.push(line4)
let line5 = new vjmap.DbLine();
line5.start = [0, 5.05]
line5.end = [5.8, 5.05]
let hatch = new vjmap.DbHatch();
hatch.pattern = "SOLID";
hatch.color = 0xB43F32;
hatch.points = [line4.start, line4.end, line5.end, line5.start];
entitys.push(hatch);
entitys.push(line4)
entitys.push(line5)
let line6 = new vjmap.DbLine();
line6.start = [5.8, 5.05]
line6.end = [5.8, 9.95]
entitys.push(line6)
let arc1 = new vjmap.DbArc();
arc1.center = [5.7963, 7.504];
arc1.radius = 1.8014;
arc1.startAngle = 270 * Math.PI / 180.0;
arc1.endAngle = 90 * Math.PI / 180.0;
entitys.push(arc1)
let arc2 = new vjmap.DbArc();
arc2.center = [5.7963, 7.504];
arc2.radius = 1.8014;
arc2.startAngle = 90 * Math.PI / 180.0;
arc2.endAngle = 270 * Math.PI / 180.0;
//arc2.linetype = "DASHED"
entitys.push(arc2)
let arc3 = new vjmap.DbArc();
arc3.center = [1.575, 7.5];
arc3.radius = 6.75;
arc3.startAngle = 282 * Math.PI / 180.0;
arc3.endAngle = 78 * Math.PI / 180.0;
entitys.push(arc3)
let block = new vjmap.DbBlock();
block.name = "ball";
block.origin = [0, 0]
block.entitys = entitys;
doc.appendBlock(block);
let blockRef1 = new vjmap.DbBlockReference();
blockRef1.blockname = "ball";
blockRef1.position = [0, 0];
doc.appendEntity(blockRef1);
let blockRef2 = new vjmap.DbBlockReference();
blockRef2.blockname = "ball";
blockRef2.position = [28, 15];
blockRef2.rotation = Math.PI;
doc.appendEntity(blockRef2);
let otherEnts = [
new vjmap.DbLine({
start: [0, 15],
end: [28, 15]
}),
new vjmap.DbLine({
start: [0, 0],
end: [28, 0]
}),
new vjmap.DbLine({
start: [14, 0],
end: [14, 15],
colorIndex: 1
}),
new vjmap.DbCircle({
center:[14, 7.5],
radius: 1.83,
color: 0xFF0000
}),
new vjmap.DbText({
position: [14, 16],
contents: "Basketball court diagram",
colorIndex: 1,
horizontalMode: 4,
height: 1,
})
]
doc.appendEntity(otherEnts);
// js code
let res = await svc.updateMap({
mapid: "basketballCourt",
filedoc: JSON.stringify(doc),
mapopenway: vjmap.MapOpenWay.Memory,
style: vjmap.openMapDarkStyle() // Use dark background style when div has dark background
})
if (res.error) {
message.error(res.error)
}
let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
let prj = new vjmap.GeoProjection(mapExtent);
var map = new vjmap.Map({
container: 'map', // container ID
style: svc.rasterStyle(),
center: prj.toLngLat(mapExtent.center()),
zoom: 2,
renderWorldCopies: false
});
map.attach(svc, prj);
map.fitMapBounds();
map.addControl(new vjmap.NavigationControl());
map.addControl(new vjmap.MousePositionControl({showZoom: true}));
map.enableLayerClickHighlight(svc, e => {
e && message.info(`type: ${e.name}, objectid: ${e.objectid}, layer: ${e.layerindex}`);
})
})();
```
## Modify, Add, or Delete on Existing Drawing
```js
let doc = new vjmap.DbDocument();
/** Source map. Modifications or additions/deletions are applied on top of this map. Format: mapid/version, e.g. exam/v1 . */
doc.from = "basketballCourt/v1";
// Modify or delete entities by passing `objectid` entity handle. If no `objectid` is passed, it means add new entity
let modifyEnts = [
/*Modify*/
new vjmap.DbCircle({
objectid: "71",// Entity handle. If provided, indicates modify or delete this entity.
colorIndex: 2
}),
/*Delete*/
new vjmap.DbText({
objectid: "73",// Entity handle. If provided, indicates modify or delete this entity.
delete: true // Indicates delete
}),
/*Add new (no objectid passed)*/
new vjmap.DbMText({
position: [14, -2],
contents: "I am multiline text",
colorIndex: 3,
attachment: 2,
height: 1,
})
]
doc.appendEntity(modifyEnts);
// js code
let res = await svc.updateMap({
mapid: "newBasketballCourt",
filedoc: JSON.stringify(doc),
mapopenway: vjmap.MapOpenWay.Memory,
style: vjmap.openMapDarkStyle() // Use dark background style when div has dark background
})
```
### Obtaining `objectid`
Go to [VJMap Cloud Management Platform](https://vjmap.com/app/cloud/#/) and open the drawing in **Memory mode**
Click the entity you want to inspect and get its `objectid` from the attributes panel on the right
## Create Drawing via Backend REST Request
See documentation [Map Service REST API - Create or Open Drawing](/en/guide/restinterface.html#%E5%88%9B%E5%BB%BA%E6%88%96%E6%89%93%E5%BC%80%E5%9B%BE%E5%BD%A2)
## Create Complex Drawings via Geometry Model
[Geometry Model Introduction](/en/guide/geomodel.html)
Example: Network topology diagram via geometry model
[Network Topology Diagram](https://vjmap.com/demo/#/demo/map/models/08networktop)
## JSON Format for Create, Modify, Delete Drawing
**Usage Example**
```js
var data = {
"from": "", /** Source map. Modifications or additions/deletions are applied on top of this map. Format: mapid/version, e.g. exam/v1 . */
"layers": [
{
"name": "test",
"color": 1
}
],
"textStyles": [
{
"name": "mytext",
"isShapeFile": false,
"textSize": 0.0,
"xScale": 1.0,
"priorSize": 22,
"obliquingAngle": 0.0,
"fileName": "VERDANA.TTF",
"typeFace": "Verdana",
"bold": false,
"italic": false,
"charset": 0,
"pitchAndFamily": 34
}
],
"dimStyles": [
{
"name": "mydimstyle",
"textStyle": "mytext",
"dimsah": true,
"dimblk1": "_OBLIQUE",
"dimblk2": "_DOT"
}
],
"linetypes": [
{
"name": "mylinetype",
"comments": "--|----",
"style": [
{
"method": "numDashes",
"parameter": 6
},
{
"method": "patternLength",
"parameter": 1.8
},
{
"method": "dashLengthAt",
"parameter": [0, 0.5]
},
{
"method": "dashLengthAt",
"parameter": [1, -0.2]
},{
"method": "dashLengthAt",
"parameter": [2, -0.2]
},
{
"method": "dashLengthAt",
"parameter": [3, 0.5]
},
{
"method": "dashLengthAt",
"parameter": [4, -0.2]
},
{
"method": "dashLengthAt",
"parameter": [5, -0.2]
},
{
"method": "shapeStyleAt",
"parameter": [1, "Standard"]
},
{
"method": "shapeOffsetAt",
"parameter": [1, [-0.1,-0.05]]
},
{
"method": "textAt",
"parameter": [1, "HW"]
},
{
"method": "shapeScaleAt",
"parameter": [1, 0.5]
},{
"method": "shapeStyleAt",
"parameter": [4, "Standard"]
},
{
"method": "shapeOffsetAt",
"parameter": [4, [-0.1,-0.05]]
},
{
"method": "shapeNumberAt",
"parameter": [4, 131]
},
{
"method": "shapeScaleAt",
"parameter": [4, 0.2]
},
{
"method": "shapeRotationAt",
"parameter": [4, 3.1415926]
}
]
}
],
"blocks": [
{
"name": "myblock",
"origin": [10, 10],
"entitys": [
{
"typename": "DbCircle",
"center": [10, 10],
"radius": 20,
"colorIndex": 1
},
{
"typename": "DbSpline",
"fitPoints": [[0,0],[20,10],[30, 0]],
"colorIndex": 2
}
]
}
],
"entitys": [
{
"typename": "DbLine",
"start": [10, 5],
"end": [2000,3000],
"matrix": [
{
"op": "rotate",
"angle": 1.5,
"origin": [2000, 3000]
},
{
"op": "scale",
"scale": 20,
"origin": [2000, 3000]
},
{
"op": "translation",
"vector": [2000, 3000]
}
],
"layer": "test",
"linetype": "mylinetype"
},
{
"objectid": "340", // Indicates modify
"colorIndex": 1,
"layer": "test"
},
{
"objectid": "33F",
"delete": true // Indicates delete
},
{
"typename": "DbBlockReference",
"blockname": "myblock",
"position": [200,300],
"rotation": 3.14,
"scaleFactors": [2,3]
},
{
"typename": "DbBlockReference",
"ref": "c43eacd46047/v1",
"position": [500, 1000],
"rotation": 1.7,
"scaleFactors": [1,1]
},
{
"typename": "DbText",
"position": [1000,1000],
"contents": "Text",
"height": 100,
"horizontalMode": 4
},
{
"typename": "Db3PointAngularDimension",
"dimStyle": "mydimstyle",
"arcPoint": [1200,1200],
"centerPoint": [1000,1000],
"xLine1Point": [500,700],
"xLine2Point": [800,1500]
},
{
"typename": "DbRasterImage",
"sourceHttpUrl": "http://xxx/xx.jpg",
"position": [200, 500],
"pixelWidth": 440,
"pixelHeight": 220,
"width": 300,
"height": 150
}
]
}
let doc = new vjmap.DbDocument();
let fileDoc = doc.toDoc(data);
// js code
let res = await svc.updateMap({
mapid: "your_map_id",
filedoc: fileDoc,
mapopenway: vjmap.MapOpenWay.Memory,
style: vjmap.openMapDarkStyle() // Use dark background style when div has dark background
})
```