maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY'; const map = new maptilersdk.Map({ container: 'map', style: maptilersdk.MapStyle.STREETS, center: [-98, 39], zoom: 3 }); map.on('load', () => { map.addSource('quakes', { type: 'geojson', data: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson' }); map.addLayer({ id: 'quake-circles', type: 'circle', source: 'quakes', paint: { 'circle-radius': ['interpolate', ['linear'], ['get', 'mag'], 1, 3, 5, 15, 8, 30], 'circle-color': ['interpolate', ['linear'], ['get', 'mag'], 1, '#e8d5f5', 3, '#ce93d8', 5, '#9C27B0', 7, '#4a148c'], 'circle-opacity': 0.7 } }); });

How it works

Expressions let you style features based on their data properties. This example sizes and colors earthquake circles by magnitude using interpolate expressions.

The circle-radius expression scales from 3px at magnitude 1 to 30px at magnitude 8. The circle-color expression maps the same property to a purple gradient. Both use linear interpolation for smooth transitions.

Expressions evaluate per feature, so each earthquake gets its own radius and color based on its mag property.

Key APIs

API	Description	Docs
`interpolate`	Continuous mapping between input/output pairs	docs.maptiler.com/sdk-js/api/
`step`	Discrete mapping at threshold values	docs.maptiler.com/sdk-js/api/
`match`	Categorical mapping for string/number values	docs.maptiler.com/sdk-js/api/

FAQ

What is the difference between interpolate and step?

interpolate produces smooth transitions between stops. step produces flat segments that jump at each threshold: like a histogram.

Can I use expressions in layout properties too?

Yes. For example, text-size and icon-size in symbol layers accept expressions.

Common mistakes

Mixing up interpolate and step: use interpolate for gradients, step for discrete buckets
Forgetting the interpolation type (['linear']): it is required as the second argument
Using ['get', 'property'] on a property that does not exist: the expression returns null and the feature may not render

Style Expressions with MapTiler SDK

How it works

Key APIs

FAQ

Common mistakes

Build maps using MapTiler SDK with AI

Related Examples