---
title: Map Customization
source: https://vjmap.com/en/guide/mapStyles.html
---

# Map Customization

## Backend Map Customization

Customize backend rendering with style expressions. Works with both raster and vector tiles; rendering may have slight delay.

```ts
/**
  * Get style layer name
  * @param style Style parameters
  * @param mapid Map ID
  * @param version Version; empty for latest
  * @param isGeomLayer Prefer geometry render layer (default true)
  * @return {Promise<any>}
  */
 createStyle(style: {
    /** Style name. */
    name?: string;
    /** Layer index list to turn on, e.g. [0,1,3]. */
    layeron?: string | number[];
    /** Layer index list to turn off, e.g. [2,4]. Use either layeron or layeroff */
    layeroff?: string | number[];
    /** Map clip bounds, format [x1,y1,x2,y2]. If only a number, it means zoom factor */
    clipbounds?: [number, number, number, number] | number;
    /** Background color. */
    backcolor?: number;
    /** Line weight, e.g. [1,1,1,1,0] for levels 1–4 on, level 5 off; levels above 5 follow last level */
    lineweight?: string | number[];
    /** Expression. */
    expression?: string;
}, mapid?: string, version?: string, isGeomLayer?: boolean): Promise<any>;
```

For `expression` syntax, see [Server-side rendering expression syntax](/en/guide/expr.html) and [Server-side conditional query and expression query](/en/guide/svrStyleVar.html)

### Example: "Tech Blue" expression

```js
var color := gFilterCustomTheme(gInColorRed, gInColorGreen, gInColorBlue, 200, 200, 0.1);
gOutColorRed[0] := gRed(color);
gOutColorGreen[0] := gGreen(color);
gOutColorBlue[0] := gBlue(color);
```
<mapFrameEx>
<pre>
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Open map
let res = await svc.openMap({
    mapid: "sys_world",
    mapopenway: vjmap.MapOpenWay.GeomRender,
    style :{
        name: "style2",
        clipbounds: "",
        backcolor: 0,
        expression: "var color := gFilterCustomTheme(gInColorRed, gInColorGreen, gInColorBlue, 200, 200, 0.1);gOutColorRed[0] := gRed(color);gOutColorGreen[0] := gGreen(color);gOutColorBlue[0] := gBlue(color);"
    }
})
if (res.error) {
    console.error(res.error)
}
let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
let prj = new vjmap.GeoProjection(mapExtent);
let map = new vjmap.Map({
    container: 'map', // container ID
    style: svc.vectorStyle(),
    center: prj.toLngLat(mapExtent.center()),
    zoom: 2,
    renderWorldCopies: false
});
map.attach(svc, prj);
map.fitMapBounds();
</pre>
</mapFrameEx>

More [Custom map style examples](https://vjmap.com/demo/#/demo/map/service/24setMapStyle)

### Change map label layer text to red

Expression:

```js
if((gInFeatureType=='AcDbText' or gInFeatureType=='AcDbMText' or gInFeatureType=='AcDbAttributeDefinition' or gInFeatureType=='AcDbAttribute') and (gInLayerName=='WZ')) {
    gOutColorRed:=255;
    gOutColorGreen:=0;
    gOutColorBlue:=0;
} 
```

### Hide compass (visible only after level 3)

Expression:
```js
if(gInObjectId  in  '10D_10F__111_#||10D_10F__110_#') {
    gOutVisible[2]:=0; 
    gOutVisible[4]:=1;
} 
```


### Yellow lines: change color, transparency, and thickness

Expression:
```js
if((gInColorRed==255 and gInColorGreen==255 and gInColorBlue==0)) {
    gOutLineWidth:=5; 
    gOutColorRed:=0;
    gOutColorGreen:=255;
    gOutColorBlue:=255;
    gOutColorAlpha:=100;
} 
```


### Change circles with specified radius to red

Expression:

```js
if(((abs(gInExtendMaxX-gInExtendMinX-4000)<20))) {
    gOutColorRed:=255;
    gOutColorGreen:=0;
    gOutColorBlue:=0;
} 
```

### Show different layers at different zoom levels

Use `layeron` in the style object:

```js
let style = {
        // layeroff controls layer indices to turn off at each level; layeron controls layer indices to turn on
        layeron:`{
                        "*": "()",
                        "1": "(19,24)",
                        "2": "(19,24,5)",
                        "3-4": "(1,19,24,5,22)",
                        "5": "(1,19,24,5,22,15)",
                        "6-7": "(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,19,22,24)"
                    }`
}
```

[View example online](https://vjmap.com/demo/#/demo/map/service/12mapStyleBackend)

![image-20240925205929159](https://vjmap.com/blogimages/202409252059230.png)

## Frontend Map Customization (Vector Tiles)

Modify vector tile styles on the frontend for rendering. Fast, but only for vector tiles.

[Frontend style expression syntax](/en/guide/expression.html)

### Change map label layer text to red

```js
const customColorCaseExpr = [
    [
        "all",
        [
            "any",
            [
                "==",
                [
                    "get",
                    "type"
                ],
                13
            ],
            [
                "==",
                [
                    "get",
                    "type"
                ],
                12
            ],
            [
                "==",
                [
                    "get",
                    "type"
                ],
                26
            ],
            [
                "==",
                [
                    "get",
                    "type"
                ],
                27
            ]
        ],
        [
            "match",
            [
                "get",
                "layer"
            ],
            [
                24
            ],
            true,
            false
        ]
    ],
    "#ff0000"
]
let newStyle = svc.vectorStyle({
        customColorCaseExpr
});
map.setStyle(newStyle);
```

### Yellow lines: change color, transparency, and thickness

```js
const customColorCaseExpr = [
    [
        "any",
        [
            "==",
            [
                "get",
                "color"
            ],
            "#ffff00"
        ]
    ],
    "#00ffff"
]
let newStyle = svc.vectorStyle({
        customColorCaseExpr
});
map.setStyle(newStyle);
```

[View example online](https://vjmap.com/demo/#/demo/map/service/12mapStyleFront)

![image-20240925212508501](https://vjmap.com/blogimages/202409252125560.png)


## Frontend Map Customization (Raster Tiles)

For raster tile layers, you can set layer style, invert, saturation, and contrast on the frontend.

[Set layer custom style online example](https://vjmap.com/demo/#/demo/map/map/setLayerStyle)

```js
let styleStyle = svc.rasterStyle();
// Set initial style values
styleStyle.layers[0].paint = {
	...styleStyle.layers[0].paint,
	// Custom map style
	"raster-inverse": 1, //  0 no invert 1 invert
	"raster-monochrome": "#4586b6", // // Replace map style with solid color
	"raster-saturation": 0, // Saturation  -1 to 1
	"raster-contrast": 0, // Contrast  -1 to 1
}
// Map object
let map = new vjmap.Map({
	container: 'map', // DIV container ID
	style: styleStyle, // Style, raster style here
	center: prj.toLngLat(prj.getMapExtent().center()), // Map center
	zoom: 2, // Zoom level
	renderWorldCopies: false // No multi-world copy
});
// Attach service and projection
map.attach(svc, prj);
await map.onLoad()
let layerId = "raster-layer"
// Invert
//map.setRasterInverse(layerId, 1) // 0 no invert 1 invert
// Monochrome
//map.setRasterMonochrome(layerId, "#4586b6")
// Saturation
// map.setRasterSaturation(layerId, 0) // -1 to 1
// Contrast
// map.setRasterContrast(layerId, 0) // -1 to 1
// Brightness min
//  map.setRasterBrightnessMin(layerId, 0.5) // 0 to 1
// Brightness max
//  map.setRasterBrightnessMax(layerId, 1) // 0 to 1
```


<mapFrameEx>
<pre>
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Open map
let res = await svc.openMap({
    mapid: 'sys_zp', // Map ID
	mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometry render mode
	style: vjmap.openMapDarkStyle() // Use dark style when div has dark background
})
if (res.error) {
	// Handle open error
	message.error(res.error)
}
// Build geometry projection from map bounds
let prj = new vjmap.GeoProjection(res.bounds);
let styleStyle = svc.rasterStyle();
// Set initial style values
styleStyle.layers[0].paint = {
	...styleStyle.layers[0].paint,
	// Custom map style
	"raster-inverse": 1, //  0 no invert 1 invert
	"raster-monochrome": "#4586b6", // // Replace map style with solid color
	"raster-saturation": 0, // Saturation  -1 to 1
	"raster-contrast": 0, // Contrast  -1 to 1
}
// Map object
let map = new vjmap.Map({
	container: 'map', // DIV container ID
	style: styleStyle, // Style, raster style here
	center: prj.toLngLat(prj.getMapExtent().center()), // Map center
	zoom: 2, // Zoom level
	renderWorldCopies: false // No multi-world copy
});
// Attach service and projection
map.attach(svc, prj);
await map.onLoad()
let layerId = "raster-layer"
// Invert
//map.setRasterInverse(layerId, 1) // 0 no invert 1 invert
// Monochrome
//map.setRasterMonochrome(layerId, "#4586b6")
// Saturation
// map.setRasterSaturation(layerId, 0) // -1 to 1
// Contrast
// map.setRasterContrast(layerId, 0) // -1 to 1
// Brightness min
//  map.setRasterBrightnessMin(layerId, 0.5) // 0 to 1
// Brightness max
//  map.setRasterBrightnessMax(layerId, 1) // 0 to 1
</pre>
</mapFrameEx>