Symbol

Updated 2026-03-07~ 67 min read

.md

Usage

let data = {
    "type": "FeatureCollection",
    "features": [
        {
            "id": "1",
            "type": "Feature",
            "properties": {
                "name": "point1",
                "color": "#00ffff",
                "icon": "icon1"
            },
            "geometry": {
                "coordinates": [
                    6971.5378667085715,
                    14385.014943907285
                ],
                "type": "Point"
            }
        },
        {
            "id": "2",
            "type": "Feature",
            "properties": {
                "name": "point2",
                "color": "#ff00ff",
                "icon": "icon2"
            },
            "geometry": {
                "coordinates": [
                    21789.770621477073,
                    14037.169104593304
                ],
                "type": "Point"
            }
        }
    ]
}
let symbol = new vjmap.Symbol({
    data: map.toLngLat(data), // Convert CAD geometry coordinates to render longitude/latitude
    // Icon name comes from the icon field in geojson properties
    iconImage: ['get', 'icon'],
    iconOffset: [0, -12],
    // Set opacity 0.8 when mouse hovers, 1.0 when not hovering
    iconOpacity: ['case', ['to-boolean', ['feature-state', 'hover']], 0.8, 1.0],
    textField: ['get', 'name'],
    textFont: ['Arial Unicode MS Regular'],
    textSize: 14,
    textColor: '#FFA0FD',
    textOffset: [0, 0.5],
    textAnchor: 'top',
    iconAllowOverlap: false,
    textAllowOverlap: false,
    isHoverPointer: true,
    isHoverFeatureState: true
});
symbol.addTo(map);
symbol.clickLayer(e => map.logInfo(`You clicked the ${e.features[0].id}th one, name is ${e.features[0].properties.name}, color is ${e.features[0].properties.color} `))
symbol.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });

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_hello", // Map ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometry data rendering
    style: vjmap.openMapLightStyle() // When div has dark background, pass dark background style here
})
if (res.error) {
    // If open fails
    showError(res.error)
    return;
}
// Get map bounds
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// Create geometric projection coordinate system from map bounds
let prj = new vjmap.GeoProjection(mapBounds);
//
// Map object
let map = new vjmap.Map({
    container: 'map', // DIV container ID
    style: svc.rasterStyle(), // Style, raster style here
    center: prj.toLngLat(mapBounds.center()), // Set map center
    zoom: 1, // Set map zoom level
    pitch: 0,
    antialias: true,
    renderWorldCopies: false // Do not display multi-screen map
});
// Associate service object and projection object
map.attach(svc, prj);
await map.onLoad();
let data = {
    "type": "FeatureCollection",
    "features": [
        {
            "id": "1",
            "type": "Feature",
            "properties": {
                "name": "point1",
                "color": "#00ffff",
                "icon": "icon1"
            },
            "geometry": {
                "coordinates": [
                    6971.5378667085715,
                    14385.014943907285
                ],
                "type": "Point"
            }
        },
        {
            "id": "2",
            "type": "Feature",
            "properties": {
                "name": "point2",
                "color": "#ff00ff",
                "icon": "icon2"
            },
            "geometry": {
                "coordinates": [
                    21789.770621477073,
                    14037.169104593304
                ],
                "type": "Point"
            }
        }
    ]
}
for (let i = 1; i <= 2; i++) {
    await map.loadImageEx("icon" + i, `https://vjmap.com/static/assets/images/sensor${i + 1}.png`);
}
let symbol = new vjmap.Symbol({
    data: map.toLngLat(data), // Convert CAD geometry coordinates to render longitude/latitude
    // Icon name comes from the icon field in geojson properties
    iconImage: ['get', 'icon'],
    iconOffset: [0, -12],
    // Set opacity 0.8 when mouse hovers, 1.0 when not hovering
    iconOpacity: ['case', ['to-boolean', ['feature-state', 'hover']], 0.8, 1.0],
    textField: ['get', 'name'],
    textFont: ['Arial Unicode MS Regular'],
    textSize: 14,
    textColor: '#FFA0FD',
    textOffset: [0, 0.5],
    textAnchor: 'top',
    iconAllowOverlap: false,
    textAllowOverlap: false,
    isHoverPointer: true,
    isHoverFeatureState: true
});
symbol.addTo(map);
// Click event
symbol.clickLayer(e => map.logInfo(`You clicked the ${e.features[0].id}th one, name is ${e.features[0].properties.name}, color is ${e.features[0].properties.color} `))
// Hover event
symbol.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });

Alternatively, you can create the data source first, then create the symbol layer, for example:

map.addSource("symbolSources", {
    type: "geojson",
    data: data
});
map.addLayer({
    id: 'symbolLayer',
    source: 'symbolSources',
    type: 'symbol',
    "layout": {},
    "paint": {
        'icon-image': ['get', 'icon'],
        'icon-offset': [0, -12],
        // Set opacity 0.8 when mouse hovers, 1.0 when not hovering
        'icon-opacity': ['case', ['to-boolean', ['feature-state', 'hover']], 0.8, 1.0],
        'text-field': ['get', 'name'],
        'text-font': ['Arial Unicode MS Regular'],
        'text-size': 14,
        'text-color': '#FFA0FD',
        'text-offset': [0, 0.5],
        'text-anchor': 'top',
        'icon-allow-overlap': false,
        'text-allow-overlap': false,
    }
})

Or use camelCase for properties, without distinguishing between layout and paint properties

map.addGeoJSONSource("symbolSources", data);
map.addSymbolLayer("symbolLayer", "symbolSources", {
    iconImage: ['get', 'icon'],
    iconOffset: [0, -12],
    // Set opacity 0.8 when mouse hovers, 1.0 when not hovering
    iconOpacity: ['case', ['to-boolean', ['feature-state', 'hover']], 0.8, 1.0],
    textField: ['get', 'name'],
    textFont: ['Arial Unicode MS Regular'],
    textSize: 14,
    textColor: '#FFA0FD',
    textOffset: [0, 0.5],
    textAnchor: 'top',
    iconAllowOverlap: false,
    textAllowOverlap: false,
})

When using this approach of creating data source and layer, you need to listen to map layer events to handle events

map.on("click", layerId, e => {})

Common Methods

Use setData to modify data

symbol.setData(newDataJson);

Get layer ID and source ID

// Get layer ID
symbol.getLayerId()
// Get source ID
symbol.getSourceId()

Show or hide

// Show
symbol.show()
// Hide
symbol.hide()

Remove

// Remove
symbol.remove()

Symbol Icons

Symbol Icons with Color Varying by State

Custom Icon Layer

Create Custom Icons

Batch Icon Text (No Overlap)

Batch Icon Text (Allow Overlap)

Stretchable Text Background Image

Complex Symbol Text Effects

Type Definitions


/**
 * Create symbol layer.
 *
 **/
 class Symbol extends OverlayLayerBase {
    options: SymbolOptions;
    constructor(options: SymbolOptions);
    addTo(map: Map, beforeId?: string): void;
    /** Replace the current data of the GeoJSON layer.
     @param {GeoJSON} [data] GeoJSON object to set. If not provided, defaults to an empty FeatureCollection.
     */
    setData(data: PointGeoJsonInput | PointGeoJsonInput[] | GeoJsonGeomertry | GeoPointLike | any): void;
    setSymbolPlacement(value: PropertyValueSpecificationEx<"point" | "line" | "line-center">): this;
    getSymbolPlacement(): PropertyValueSpecificationEx<"point" | "line" | "line-center">;
    setSymbolSpacing(value: PropertyValueSpecificationEx<number>): this;
    getSymbolSpacing(): PropertyValueSpecificationEx<number>;
    setSymbolAvoidEdges(value: PropertyValueSpecificationEx<boolean>): this;
    getSymbolAvoidEdges(): PropertyValueSpecificationEx<boolean>;
    setSymbolSortKey(value: DataDrivenPropertyValueSpecification<number>): this;
    getSymbolSortKey(): DataDrivenPropertyValueSpecification<number>;
    setSymbolZOrder(value: PropertyValueSpecificationEx<"auto" | "viewport-y" | "source">): this;
    getSymbolZOrder(): PropertyValueSpecificationEx<"auto" | "viewport-y" | "source">;
    setIconAllowOverlap(value: PropertyValueSpecificationEx<boolean>): this;
    getIconAllowOverlap(): PropertyValueSpecificationEx<boolean>;
    setIconIgnorePlacement(value: PropertyValueSpecificationEx<boolean>): this;
    getIconIgnorePlacement(): PropertyValueSpecificationEx<boolean>;
    setIconOptional(value: PropertyValueSpecificationEx<boolean>): this;
    getIconOptional(): PropertyValueSpecificationEx<boolean>;
    setIconRotationAlignment(value: PropertyValueSpecificationEx<"map" | "viewport" | "auto">): this;
    getIconRotationAlignment(): PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    setIconSize(value: DataDrivenPropertyValueSpecification<number>): this;
    getIconSize(): DataDrivenPropertyValueSpecification<number>;
    setIconTextFit(value: PropertyValueSpecificationEx<"none" | "width" | "height" | "both">): this;
    getIconTextFit(): PropertyValueSpecificationEx<"none" | "width" | "height" | "both">;
    setIconTextFitPadding(value: PropertyValueSpecificationEx<[number, number, number, number]>): this;
    getIconTextFitPadding(): PropertyValueSpecificationEx<[number, number, number, number]>;
    setIconImage(value: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>): this;
    getIconImage(): DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
    setIconRotate(value: DataDrivenPropertyValueSpecification<number>): this;
    getIconRotate(): DataDrivenPropertyValueSpecification<number>;
    setIconPadding(value: PropertyValueSpecificationEx<number>): this;
    getIconPadding(): PropertyValueSpecificationEx<number>;
    setIconKeepUpright(value: PropertyValueSpecificationEx<boolean>): this;
    getIconKeepUpright(): PropertyValueSpecificationEx<boolean>;
    setIconOffset(value: DataDrivenPropertyValueSpecification<[number, number]>): this;
    getIconOffset(): DataDrivenPropertyValueSpecification<[number, number]>;
    setIconAnchor(value: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">): this;
    getIconAnchor(): DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
    setIconPitchAlignment(value: PropertyValueSpecificationEx<"map" | "viewport" | "auto">): this;
    getIconPitchAlignment(): PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    setTextPitchAlignment(value: PropertyValueSpecificationEx<"map" | "viewport" | "auto">): this;
    getTextPitchAlignment(): PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    setTextRotationAlignment(value: PropertyValueSpecificationEx<"map" | "viewport" | "auto">): this;
    getTextRotationAlignment(): PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    setTextField(value: DataDrivenPropertyValueSpecification<FormattedSpecification>): this;
    getTextField(): DataDrivenPropertyValueSpecification<FormattedSpecification>;
    setTextFont(value: DataDrivenPropertyValueSpecification<string[]>): this;
    getTextFont(): DataDrivenPropertyValueSpecification<string[]>;
    setTextSize(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextSize(): DataDrivenPropertyValueSpecification<number>;
    setTextMaxWidth(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextMaxWidth(): DataDrivenPropertyValueSpecification<number>;
    setTextLineHeight(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextLineHeight(): DataDrivenPropertyValueSpecification<number>;
    setTextLetterSpacing(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextLetterSpacing(): DataDrivenPropertyValueSpecification<number>;
    setTextJustify(value: DataDrivenPropertyValueSpecification<"auto" | "left" | "center" | "right">): this;
    getTextJustify(): DataDrivenPropertyValueSpecification<"auto" | "left" | "center" | "right">;
    setTextRadialOffset(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextRadialOffset(): DataDrivenPropertyValueSpecification<number>;
    setTextVariableAnchor(value: PropertyValueSpecificationEx<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>): this;
    getTextVariableAnchor(): PropertyValueSpecificationEx<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>;
    setTextAnchor(value: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">): this;
    getTextAnchor(): DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
    setTextMaxAngle(value: PropertyValueSpecificationEx<number>): this;
    getTextMaxAngle(): PropertyValueSpecificationEx<number>;
    setTextWritingMode(value: PropertyValueSpecificationEx<Array<"horizontal" | "vertical">>): this;
    getTextWritingMode(): PropertyValueSpecificationEx<Array<"horizontal" | "vertical">>;
    setTextRotate(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextRotate(): DataDrivenPropertyValueSpecification<number>;
    setTextPadding(value: PropertyValueSpecificationEx<number>): this;
    getTextPadding(): PropertyValueSpecificationEx<number>;
    setTextKeepUpright(value: PropertyValueSpecificationEx<boolean>): this;
    getTextKeepUpright(): PropertyValueSpecificationEx<boolean>;
    setTextTransform(value: DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">): this;
    getTextTransform(): DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">;
    setTextOffset(value: DataDrivenPropertyValueSpecification<[number, number]>): this;
    getTextOffset(): DataDrivenPropertyValueSpecification<[number, number]>;
    setTextAllowOverlap(value: PropertyValueSpecificationEx<boolean>): this;
    getTextAllowOverlap(): PropertyValueSpecificationEx<boolean>;
    setTextIgnorePlacement(value: PropertyValueSpecificationEx<boolean>): this;
    getTextIgnorePlacement(): PropertyValueSpecificationEx<boolean>;
    setTextOptional(value: PropertyValueSpecificationEx<boolean>): this;
    getTextOptional(): PropertyValueSpecificationEx<boolean>;
    setIconOpacity(value: DataDrivenPropertyValueSpecification<number>): this;
    getIconOpacity(): DataDrivenPropertyValueSpecification<number>;
    setIconColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
    getIconColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
    setIconHaloColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
    getIconHaloColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
    setIconHaloWidth(value: DataDrivenPropertyValueSpecification<number>): this;
    getIconHaloWidth(): DataDrivenPropertyValueSpecification<number>;
    setIconHaloBlur(value: DataDrivenPropertyValueSpecification<number>): this;
    getIconHaloBlur(): DataDrivenPropertyValueSpecification<number>;
    setIconTranslate(value: PropertyValueSpecificationEx<[number, number]>): this;
    getIconTranslate(): PropertyValueSpecificationEx<[number, number]>;
    setIconTranslateAnchor(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
    getIconTranslateAnchor(): PropertyValueSpecificationEx<"map" | "viewport">;
    setTextOpacity(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextOpacity(): DataDrivenPropertyValueSpecification<number>;
    setTextColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
    getTextColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
    setTextHaloColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
    getTextHaloColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
    setTextHaloWidth(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextHaloWidth(): DataDrivenPropertyValueSpecification<number>;
    setTextHaloBlur(value: DataDrivenPropertyValueSpecification<number>): this;
    getTextHaloBlur(): DataDrivenPropertyValueSpecification<number>;
    setTextTranslate(value: PropertyValueSpecificationEx<[number, number]>): this;
    getTextTranslate(): PropertyValueSpecificationEx<[number, number]>;
    setTextTranslateAnchor(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
    getTextTranslateAnchor(): PropertyValueSpecificationEx<"map" | "viewport">;
}


export  class OverlayLayerBase {
    sourceId?: string;
    layerId?: string;
    _map?: Map;
    constructor();
    addTo(map: Map, beforeId?: string): void;
    /**
     * Get source ID
     * @return {string | undefined}
     */
    getSourceId(): string | undefined;
    /**
     * Get layer ID
     * @return {string | undefined}
     */
    getLayerId(): string | undefined;
    /**
     * Get source data
     * @return {GeoJsonGeomertry | undefined}
     */
    getData(): GeoJsonGeomertry | undefined;
    remove(): void;
    /** Set the map cursor to "pointer" whenever the mouse hovers over these layers.
     @returns A function to remove the handler.
     * @param layerOrLayers
     */
    hoverPointer(): void;
    /**
     Whenever the mouse hovers over a feature in these layers, update the feature state of the feature in the connected source.
     * @param enterCb
     * @param leaveCb
     */
    hoverFeatureState(enterCb?: (arg0: {}) => void, leaveCb?: (arg0: {}) => void): void;
    /** Display a popup when the mouse hovers over a feature in these layers.
     @param htmlFunc Function that receives feature and popup, returns HTML.
     @param {Object<PopupOptions>} popupOptions Options passed to `Popup()` to customise popup.
     @example hoverPopup(f => `<h3>${f.properties.Name}</h3> ${f.properties.Description}`, { anchor: 'left' });
     */
    hoverPopup(htmlFunc: any, popupOptions?: PopupOptions): any;
    /** Display a popup whenever a feature in these layers is clicked.
     @param htmlFunc Function that receives feature and popup, returns HTML.
     @param {Object<PopupOptions>} popupOptions Options passed to `Popup()` to customise popup.

     @returns A function that removes the handler.
     @example clickPopup(f => `<h3>${f.properties.Name}</h3> ${f.properties.Description}`, { maxWidth: 500 });

     */
    clickPopup(htmlFunc: (arg0: {}) => void, popupOptions?: PopupOptions): any;
    /** Trigger callback whenever a feature in these layers is clicked.
     @param {function} cb Callback that receives event with .features property
     @returns A function that removes the handler.
     */
    clickLayer(cb: any): any;
    /** Trigger callback when mouse hovers over a feature in these layers.
     @returns A function to remove the handler.
     */
    hoverLayer(cb: any): any;
    /**
     * Make the given layer visible.
     * @param layer
     */
    show(): void;
    /**
     * Make the given layer invisible.
     * @param layer
     */
    hide(): void;
    /** Hide or show the given layer based on the parameter.
     @param {boolean} state True for visible, false for hidden.
     */
    toggle(state: boolean): boolean;
    /** Set paint or layout properties on one or more layers.
     @example setProperty('fillOpacity', 0.5)
     */
    setProperty(prop: string | object, value?: any): void;
    /** Get the layer definition for the given layer ID according to the style specification.
     */
    getLayerStyle(): LayerSpecification;
    /**
     * Set layer style
     * @param layer
     * @param style
     */
    setLayerStyle(style: any): void;
    /** Replace the filter of a layer.
     @param {Array} filter New filter to set.
     @example setFilter(['==','level','0']]);
     */
    setFilter(filter: FilterSpecification): void;
}

export  interface OverlayLayerBaseOptions {
    sourceId?: string;
    sourceLayer?: string;
    layerId?: string;
    minzoom?: number;
    maxzoom?: number;
    filter?: any;
    visibility?: "visible" | "none";
    isHoverPointer?: boolean;
    isHoverFeatureState?: boolean;
}


export  type SymbolLayerSpecification = {
    id: string;
    type: "symbol";
    metadata?: unknown;
    source: string;
    "source-layer"?: string;
    minzoom?: number;
    maxzoom?: number;
    filter?: FilterSpecification;
    layout?: {
        "symbol-placement"?: PropertyValueSpecificationEx<"point" | "line" | "line-center">;
        "symbol-spacing"?: PropertyValueSpecificationEx<number>;
        "symbol-avoid-edges"?: PropertyValueSpecificationEx<boolean>;
        "symbol-sort-key"?: DataDrivenPropertyValueSpecification<number>;
        "symbol-z-order"?: PropertyValueSpecificationEx<"auto" | "viewport-y" | "source">;
        "icon-allow-overlap"?: PropertyValueSpecificationEx<boolean>;
        "icon-ignore-placement"?: PropertyValueSpecificationEx<boolean>;
        "icon-optional"?: PropertyValueSpecificationEx<boolean>;
        "icon-rotation-alignment"?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
        "icon-size"?: DataDrivenPropertyValueSpecification<number>;
        "icon-text-fit"?: PropertyValueSpecificationEx<"none" | "width" | "height" | "both">;
        "icon-text-fit-padding"?: PropertyValueSpecificationEx<[number, number, number, number]>;
        "icon-image"?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
        "icon-rotate"?: DataDrivenPropertyValueSpecification<number>;
        "icon-padding"?: PropertyValueSpecificationEx<number>;
        "icon-keep-upright"?: PropertyValueSpecificationEx<boolean>;
        "icon-offset"?: DataDrivenPropertyValueSpecification<[number, number]>;
        "icon-anchor"?: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
        "icon-pitch-alignment"?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
        "text-pitch-alignment"?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
        "text-rotation-alignment"?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
        "text-field"?: DataDrivenPropertyValueSpecification<FormattedSpecification>;
        "text-font"?: DataDrivenPropertyValueSpecification<Array<string>>;
        "text-size"?: DataDrivenPropertyValueSpecification<number>;
        "text-max-width"?: DataDrivenPropertyValueSpecification<number>;
        "text-line-height"?: DataDrivenPropertyValueSpecification<number>;
        "text-letter-spacing"?: DataDrivenPropertyValueSpecification<number>;
        "text-justify"?: DataDrivenPropertyValueSpecification<"auto" | "left" | "center" | "right">;
        "text-radial-offset"?: DataDrivenPropertyValueSpecification<number>;
        "text-variable-anchor"?: PropertyValueSpecificationEx<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>;
        "text-anchor"?: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
        "text-max-angle"?: PropertyValueSpecificationEx<number>;
        "text-writing-mode"?: PropertyValueSpecificationEx<Array<"horizontal" | "vertical">>;
        "text-rotate"?: DataDrivenPropertyValueSpecification<number>;
        "text-padding"?: PropertyValueSpecificationEx<number>;
        "text-keep-upright"?: PropertyValueSpecificationEx<boolean>;
        "text-transform"?: DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">;
        "text-offset"?: DataDrivenPropertyValueSpecification<[number, number]>;
        "text-allow-overlap"?: PropertyValueSpecificationEx<boolean>;
        "text-ignore-placement"?: PropertyValueSpecificationEx<boolean>;
        "text-optional"?: PropertyValueSpecificationEx<boolean>;
        visibility?: "visible" | "none";
    };
    paint?: {
        "icon-opacity"?: DataDrivenPropertyValueSpecification<number>;
        "icon-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
        "icon-halo-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
        "icon-halo-width"?: DataDrivenPropertyValueSpecification<number>;
        "icon-halo-blur"?: DataDrivenPropertyValueSpecification<number>;
        "icon-translate"?: PropertyValueSpecificationEx<[number, number]>;
        "icon-translate-anchor"?: PropertyValueSpecificationEx<"map" | "viewport">;
        "text-opacity"?: DataDrivenPropertyValueSpecification<number>;
        "text-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
        "text-halo-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
        "text-halo-width"?: DataDrivenPropertyValueSpecification<number>;
        "text-halo-blur"?: DataDrivenPropertyValueSpecification<number>;
        "text-translate"?: PropertyValueSpecificationEx<[number, number]>;
        "text-translate-anchor"?: PropertyValueSpecificationEx<"map" | "viewport">;
    };
};

export  type SymbolLayerStyleProp = {
    metadata?: unknown;
    source?: string;
    sourceLayer?: string;
    minzoom?: number;
    maxzoom?: number;
    filter?: FilterSpecification;
    symbolPlacement?: PropertyValueSpecificationEx<"point" | "line" | "line-center">;
    symbolSpacing?: PropertyValueSpecificationEx<number>;
    symbolAvoidEdges?: PropertyValueSpecificationEx<boolean>;
    symbolSortKey?: DataDrivenPropertyValueSpecification<number>;
    symbolZOrder?: PropertyValueSpecificationEx<"auto" | "viewport-y" | "source">;
    iconAllowOverlap?: PropertyValueSpecificationEx<boolean>;
    iconIgnorePlacement?: PropertyValueSpecificationEx<boolean>;
    iconOptional?: PropertyValueSpecificationEx<boolean>;
    iconRotationAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    iconSize?: DataDrivenPropertyValueSpecification<number>;
    iconTextFit?: PropertyValueSpecificationEx<"none" | "width" | "height" | "both">;
    iconTextFitPadding?: PropertyValueSpecificationEx<[number, number, number, number]>;
    iconImage?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
    iconRotate?: DataDrivenPropertyValueSpecification<number>;
    iconPadding?: PropertyValueSpecificationEx<number>;
    iconKeepUpright?: PropertyValueSpecificationEx<boolean>;
    iconOffset?: DataDrivenPropertyValueSpecification<[number, number]>;
    iconAnchor?: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
    iconPitchAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    textPitchAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    textRotationAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    textField?: DataDrivenPropertyValueSpecification<FormattedSpecification>;
    textFont?: DataDrivenPropertyValueSpecification<Array<string>>;
    textSize?: DataDrivenPropertyValueSpecification<number>;
    textMaxWidth?: DataDrivenPropertyValueSpecification<number>;
    textLineHeight?: DataDrivenPropertyValueSpecification<number>;
    textLetterSpacing?: DataDrivenPropertyValueSpecification<number>;
    textJustify?: DataDrivenPropertyValueSpecification<"auto" | "left" | "center" | "right">;
    textRadialOffset?: DataDrivenPropertyValueSpecification<number>;
    textVariableAnchor?: PropertyValueSpecificationEx<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>;
    textAnchor?: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
    textMaxAngle?: PropertyValueSpecificationEx<number>;
    textWritingMode?: PropertyValueSpecificationEx<Array<"horizontal" | "vertical">>;
    textRotate?: DataDrivenPropertyValueSpecification<number>;
    textPadding?: PropertyValueSpecificationEx<number>;
    textKeepUpright?: PropertyValueSpecificationEx<boolean>;
    textTransform?: DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">;
    textOffset?: DataDrivenPropertyValueSpecification<[number, number]>;
    textAllowOverlap?: PropertyValueSpecificationEx<boolean>;
    textIgnorePlacement?: PropertyValueSpecificationEx<boolean>;
    textOptional?: PropertyValueSpecificationEx<boolean>;
    visibility?: "visible" | "none";
    iconOpacity?: DataDrivenPropertyValueSpecification<number>;
    iconColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    iconHaloColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    iconHaloWidth?: DataDrivenPropertyValueSpecification<number>;
    iconHaloBlur?: DataDrivenPropertyValueSpecification<number>;
    iconTranslate?: PropertyValueSpecificationEx<[number, number]>;
    iconTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
    textOpacity?: DataDrivenPropertyValueSpecification<number>;
    textColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    textHaloColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    textHaloWidth?: DataDrivenPropertyValueSpecification<number>;
    textHaloBlur?: DataDrivenPropertyValueSpecification<number>;
    textTranslate?: PropertyValueSpecificationEx<[number, number]>;
    textTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
};

export  interface SymbolOptions extends OverlayLayerBaseOptions {
    data: PointGeoJsonInput | PointGeoJsonInput[] | GeoJsonGeomertry | GeoPointLike | any;
    symbolPlacement?: PropertyValueSpecificationEx<"point" | "line" | "line-center">;
    symbolSpacing?: PropertyValueSpecificationEx<number>;
    symbolAvoidEdges?: PropertyValueSpecificationEx<boolean>;
    symbolSortKey?: DataDrivenPropertyValueSpecification<number>;
    symbolZOrder?: PropertyValueSpecificationEx<"auto" | "viewport-y" | "source">;
    iconAllowOverlap?: PropertyValueSpecificationEx<boolean>;
    iconIgnorePlacement?: PropertyValueSpecificationEx<boolean>;
    iconOptional?: PropertyValueSpecificationEx<boolean>;
    iconRotationAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    iconSize?: DataDrivenPropertyValueSpecification<number>;
    iconTextFit?: PropertyValueSpecificationEx<"none" | "width" | "height" | "both">;
    iconTextFitPadding?: PropertyValueSpecificationEx<[number, number, number, number]>;
    iconImage?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
    iconRotate?: DataDrivenPropertyValueSpecification<number>;
    iconPadding?: PropertyValueSpecificationEx<number>;
    iconKeepUpright?: PropertyValueSpecificationEx<boolean>;
    iconOffset?: DataDrivenPropertyValueSpecification<[number, number]>;
    iconAnchor?: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
    iconPitchAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    textPitchAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    textRotationAlignment?: PropertyValueSpecificationEx<"map" | "viewport" | "auto">;
    textField?: DataDrivenPropertyValueSpecification<FormattedSpecification>;
    textFont?: DataDrivenPropertyValueSpecification<string[]>;
    textSize?: DataDrivenPropertyValueSpecification<number>;
    textMaxWidth?: DataDrivenPropertyValueSpecification<number>;
    textLineHeight?: DataDrivenPropertyValueSpecification<number>;
    textLetterSpacing?: DataDrivenPropertyValueSpecification<number>;
    textJustify?: DataDrivenPropertyValueSpecification<"auto" | "left" | "center" | "right">;
    textRadialOffset?: DataDrivenPropertyValueSpecification<number>;
    textVariableAnchor?: PropertyValueSpecificationEx<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>;
    textAnchor?: DataDrivenPropertyValueSpecification<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
    textMaxAngle?: PropertyValueSpecificationEx<number>;
    textWritingMode?: PropertyValueSpecificationEx<Array<"horizontal" | "vertical">>;
    textRotate?: DataDrivenPropertyValueSpecification<number>;
    textPadding?: PropertyValueSpecificationEx<number>;
    textKeepUpright?: PropertyValueSpecificationEx<boolean>;
    textTransform?: DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">;
    textOffset?: DataDrivenPropertyValueSpecification<[number, number]>;
    textAllowOverlap?: PropertyValueSpecificationEx<boolean>;
    textIgnorePlacement?: PropertyValueSpecificationEx<boolean>;
    textOptional?: PropertyValueSpecificationEx<boolean>;
    iconOpacity?: DataDrivenPropertyValueSpecification<number>;
    iconColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    iconHaloColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    iconHaloWidth?: DataDrivenPropertyValueSpecification<number>;
    iconHaloBlur?: DataDrivenPropertyValueSpecification<number>;
    iconTranslate?: PropertyValueSpecificationEx<[number, number]>;
    iconTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
    textOpacity?: DataDrivenPropertyValueSpecification<number>;
    textColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    textHaloColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
    textHaloWidth?: DataDrivenPropertyValueSpecification<number>;
    textHaloBlur?: DataDrivenPropertyValueSpecification<number>;
    textTranslate?: PropertyValueSpecificationEx<[number, number]>;
    textTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
}

Was this page helpful?

Platforms & Engines

Other product docs

Symbol

Usage

Common Methods

Type Definitions