---
title: "addPolyline | 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.

# Function addPolyline

-   addPolyline(  
        map: [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/),  
        options: [PolylineLayerOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PolylineLayerOptions/),  
        fetchOptions?: RequestInit,  
    ): Promise<  
        {  
            polylineLayerId: string;  
            polylineOutlineLayerId: string;  
            polylineSourceId: string;  
        },  
    \>[](#addpolyline)
    
    Add a polyline to the map from various sources and with builtin styling. Compatible sources:
    
    -   gpx content as string
    -   gpx file from URL
    -   kml content from string
    -   kml from url
    -   geojson from url
    -   geojson content as string
    -   geojson content as JS object
    -   uuid of a MapTiler Cloud dataset
    
    The method also gives the possibility to add an outline layer (if `options.outline` is `true`) and if so , the returned property `polylineOutlineLayerId` will be a string. As a result, two layers would be added.
    
    The default styling creates a line layer of constant width of 3px, the color will be randomly picked from a curated list of colors and the opacity will be 1. If the outline is enabled, the outline width is of 1px at all zoom levels, the color is white and the opacity is 1.
    
    Those style properties can be changed and ramped according to zoom level using an easier syntax.
    
    #### Parameters
    
    -   map: [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)
        
        Map instance to add a polyline layer to
        
    -   options: [PolylineLayerOptions](https://docs.maptiler.com/sdk-js/api-reference/types/PolylineLayerOptions/)
        
        Options related to adding a polyline layer
        
    -   fetchOptions: RequestInit = {}
        
        When the polyline data is loaded from a distant source, these options are propagated to the call of `fetch`
        
    
    #### Returns Promise<  
        {  
            polylineLayerId: string;  
            polylineOutlineLayerId: string;  
            polylineSourceId: string;  
        },  
    \>