---
title: "PointLayerOptions | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Type Alias PointLayerOptions

PointLayerOptions: [CommonShapeLayerOptions](https://docs.maptiler.com/sdk-js/api-reference/types/CommonShapeLayerOptions/) & {  
    alignOnViewport?: boolean;  
    cluster?: boolean;  
    labelColor?: string;  
    labelSize?: number;  
    maxPointRadius?: number;  
    minPointRadius?: number;  
    pointColor?: string | [ColorRamp](https://docs.maptiler.com/sdk-js/api-reference/classes/ColorRamp/);  
    pointOpacity?: number | [ZoomNumberValues](https://docs.maptiler.com/sdk-js/api-reference/types/ZoomNumberValues/);  
    pointRadius?: number | [ZoomNumberValues](https://docs.maptiler.com/sdk-js/api-reference/types/ZoomNumberValues/);  
    property?: string;  
    showLabel?: boolean;  
    zoomCompensation?: boolean;  
}

#### Type Declaration

-   ##### `Optional`alignOnViewport?: boolean
    
    If `true`, the points will keep their circular shape align with the wiewport. If `false`, the points will be like flatten on the map. This difference shows when the map is tilted. Default: `true`
    
-   ##### `Optional`cluster?: boolean
    
    Whether the points should cluster
    
-   ##### `Optional`labelColor?: string
    
    text color used for the number elements in each cluster. Applicable only when `cluster` is `true`. Default: `#000000` (black)
    
-   ##### `Optional`labelSize?: number
    
    text size used for the number elements in each cluster. Applicable only when `cluster` is `true`. Default: `12`
    
-   ##### `Optional`maxPointRadius?: number
    
    The maximum point radius posible. Default: `40`
    
-   ##### `Optional`minPointRadius?: number
    
    The minimum point radius posible. Default: `10`
    
-   ##### `Optional`pointColor?: string | [ColorRamp](https://docs.maptiler.com/sdk-js/api-reference/classes/ColorRamp/)
    
    Can be a unique point color as a string (CSS color such as "#FF0000" or "red"). Alternatively, the color can be a ColorRamp with a range. In case of `.cluster` being `true`, the range of the ColorRamp will be addressed with the number of elements in the cluster. If `.cluster` is `false`, the color will be addressed using the value of the `.property`. If no `.property` is given but `.pointColor` is a ColorRamp, the chosen color is the one at the lower bound of the ColorRamp. Default: a color randomly pick from a list
    
-   ##### `Optional`pointOpacity?: number | [ZoomNumberValues](https://docs.maptiler.com/sdk-js/api-reference/types/ZoomNumberValues/)
    
    Opacity of the point or icon. This is can be a constant opacity in \[0, 1\] or a definition based on zoom levels. Alternatively, if not provided but the `.pointColor` is a ColorRamp, the opacity will be extracted from tha alpha component if present. Default: `1`
    
-   ##### `Optional`pointRadius?: number | [ZoomNumberValues](https://docs.maptiler.com/sdk-js/api-reference/types/ZoomNumberValues/)
    
    Radius of the points. Can be a fixed size or a value dependant on the zoom. If `.pointRadius` is not provided, the radius will depend on the size of each cluster (if `.cluster` is `true`) or on the value of each point (if `.property` is provided and `.pointColor` is a ColorRamp). The radius will be between `.minPointRadius` and `.maxPointRadius`
    
-   ##### `Optional`property?: string
    
    The point property to observe and apply the radius and color upon. This is ignored if `.cluster` is `true` as the observed value will be fiorced to being the number of elements in each cluster.
    
    Default: none
    
-   ##### `Optional`showLabel?: boolean
    
    Shows a label with the numerical value id `true`. If `.cluster` is `true`, the value will be the numebr of elements in the cluster.
    
    Default: `true` if `cluster` or `dataDrivenStyleProperty` are used, `false` otherwise.
    
-   ##### `Optional`zoomCompensation?: boolean
    
    Only if `.cluster` is `false`. If the radius is driven by a property, then it will also scale by zoomming if `.zoomCompensation` is `true`. If `false`, the radius will not adapt according to the zoom level. Default: `true`