Symbol

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' });

显示代码

全屏显示

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()

Related Examples

Symbol Icons (opens new window)

Symbol Icons with Color Varying by State (opens new window)

Custom Icon Layer (opens new window)

Create Custom Icons (opens new window)

Batch Icon Text (No Overlap) (opens new window)

Batch Icon Text (Allow Overlap) (opens new window)

Stretchable Text Background Image (opens new window)

Complex Symbol Text Effects (opens new window)

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">;
}