Map Customization
Backend Map Customization
Customize backend rendering with style expressions. Works with both raster and vector tiles; rendering may have slight delay.
/**
* 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 and Server-side conditional query and expression query
Example: "Tech Blue" expression
var color := gFilterCustomTheme(gInColorRed, gInColorGreen, gInColorBlue, 200, 200, 0.1);
gOutColorRed[0] := gRed(color);
gOutColorGreen[0] := gGreen(color);
gOutColorBlue[0] := gBlue(color);
Runs in a sandbox against the VJMAP public demo service
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();More Custom map style examples
Change map label layer text to red
Expression:
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:
if(gInObjectId in '10D_10F__111_#||10D_10F__110_#') {
gOutVisible[2]:=0;
gOutVisible[4]:=1;
}
Yellow lines: change color, transparency, and thickness
Expression:
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:
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:
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)"
}`
}
Frontend Map Customization (Vector Tiles)
Modify vector tile styles on the frontend for rendering. Fast, but only for vector tiles.
Frontend style expression syntax
Change map label layer text to red
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
const customColorCaseExpr = [
[
"any",
[
"==",
[
"get",
"color"
],
"#ffff00"
]
],
"#00ffff"
]
let newStyle = svc.vectorStyle({
customColorCaseExpr
});
map.setStyle(newStyle);
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
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
Runs in a sandbox against the VJMAP public demo service
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 1Was this page helpful?Thanks for the feedback!