maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY'; const map = new maptilersdk.Map({ container: 'map', style: maptilersdk.MapStyle.STREETS, center: [2.34, 48.86], zoom: 13 }); map.on('load', () => { map.addSource('route', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'LineString', coordinates: [[2.2945, 48.8584], [2.3376, 48.8606], [2.3500, 48.8530]] }} }); map.addLayer({ id: 'route-line', type: 'line', source: 'route', paint: { 'line-color': '#9C27B0', 'line-width': 4 } }); });

How it works

Add a GeoJSON source containing a LineString geometry, then add a line layer that references it. The line renders as a vector path on the map.

The line-color and line-width paint properties control appearance. You can also add line-dasharray for dashed lines or line-opacity for transparency.

Coordinates are in [lng, lat] order, consistent with the GeoJSON specification.

Key APIs

API	Description	Docs
`map.addSource()`	Add a GeoJSON data source	docs.maptiler.com/sdk-js/api/
`map.addLayer()`	Add a line layer	docs.maptiler.com/sdk-js/api/
`line-width`	Paint property for line thickness	docs.maptiler.com/sdk-js/api/

FAQ

Can I animate a line?

Yes. Update the GeoJSON data with map.getSource('route').setData(newData) to progressively add coordinates, creating a drawing animation.

How do I add arrows along the line?

Add a symbol layer with symbol-placement: 'line' and use an arrow icon in icon-image.

Common mistakes

Providing coordinates as [lat, lng]: GeoJSON and the SDK use [lng, lat]
Adding the layer before the load event: the style must be ready
Forgetting the type: 'Feature' wrapper in GeoJSON: a bare geometry object is not valid GeoJSON for setData

Line Layers with MapTiler SDK

How it works

Key APIs

FAQ

Common mistakes

Build maps using MapTiler SDK with AI

Related Examples