The styling and flexibility of Mapbox GL in static maps
By: Bersabel Tadesse
With style parameters, it’s now possible to have the styling and flexibility of Mapbox GL when using our Static Images API. Style parameters introduce two new ways to style static maps at request time, giving developers the flexibility they want without need a mapping library or SDK — just an HTML img tag.
The two features of style parameters are addLayer and setfilter. addlayer allows developers to add new map layers and change how existing map layers are styled. Using this feature, developers can do things like change the color of all states or extrude all buildings in their map based on a shared attribute, such as presidential election results or proximity to a flood zone.
With the setfilter style parameter, developers can filter out features from an existing map layer. For example, if they’re building an app that helps people find running, hiking, or mountain biking paths, they can filter out all roads and paths from their map, except for the paths a user needs for the type of activity they are interested in.
Previously, making dynamic map changes like this was only possible when using client-side Mapbox GL. That meant that this type of functionality was largely inaccessible to developers with users on older or lower-end devices that have little processing power or do not support client-side GL. With style parameters, developers now have the best of both worlds: maps that can be styled dynamically based on user input or changing context, even on older devices.
Building with style parameters
Developers can use style parameters to do something as simple as changing the color and pattern of the line features used to show state borders in the US:
<img alt='static map with prominent us borders' src='https://api.mapbox.com/styles/v1/mapbox/light-v10/static/-97.380979,42.877742,3/800x600@2x?addlayer={%22id%22:%22better-boundary%22,%22type%22:%22line%22,%22source%22:%22composite%22,%22source-layer%22:%22admin%22,%22filter%22:[%22all%22,[%22==%22,[%22get%22,%22admin_level%22],1],[%22==%22,[%22get%22,%22maritime%22],%22false%22],[%22match%22,[%22get%22,%22worldview%22],[%22all%22,%22US%22],true,false],[%22==%22,[%22get%22,%22iso_3166_1%22],%22US%22]],%22layout%22:{%22line-join%22:%22bevel%22},%22paint%22:{%22line-color%22:%22%236898B3%22,%22line-width%22:1.5,%22line-dasharray%22:[1.5,1]}}&before_layer=road-label&access_token={MAPBOX_ACCESS_TOKEN}' />Or, something as complex as showing a real-time 2016 county-level presidential election map:
In the static image above, I have a map style with county-level polygons and I’m styling the fill color of each county based on live election results as I get the results.
<img alt='static map with 2016 north carolina election results' src='https://api.mapbox.com/styles/v1/mapbox/light-v10/static/-79.5,35.6,5,0,0/450x300?access_token={MAPBOX_ACCESS_TOKEN}&before_layer=poi-label&addlayer={%22id%22:%22counties%22,%22type%22:%22fill%22,%22source%22:{%22type%22:%22vector%22,%22url%22:%22mapbox://mbxsolutions.5v8p3srb%22},%22source-layer%22:%22tl_2019_us_county-54v247%22,%22filter%22:[%22==%22,[%22get%22,%22STATEFP%22],%2237%22],%22paint%22:{%22fill-opacity%22:0.5,%22fill-outline-color%22:%22%23fff%22,%22fill-color%22:[%22match%22,[%22get%22,%22GEOID%22],[%2237007%22,%2237015%22,%2237021%22,%2237037%22,%2237051%22,%2237063%22,%2237065%22,%2237067%22,%2237081%22,%2237083%22,%2237091%22,%2237093%22,%2237119%22,%2237131%22,%2237135%22,%2237139%22,%2237147%22,%2237165%22,%2237181%22,%2237183%22,%2237185%22,%2237187%22,%2237189%22,%2237195%22],%22%237c9fb8%22,[%2237001%22,%2237003%22,%2237005%22,%2237009%22,%2237011%22,%2237013%22,%2237017%22,%2237019%22,%2237023%22,%2237025%22,%2237027%22,%2237029%22,%2237031%22,%2237033%22,%2237035%22,%2237039%22,%2237041%22,%2237043%22,%2237045%22,%2237047%22,%2237049%22,%2237053%22,%2237055%22,%2237057%22,%2237059%22,%2237061%22,%2237069%22,%2237071%22,%2237073%22,%2237075%22,%2237077%22,%2237079%22,%2237085%22,%2237087%22,%2237089%22,%2237095%22,%2237097%22,%2237099%22,%2237101%22,%2237103%22,%2237105%22,%2237107%22,%2237109%22,%2237111%22,%2237113%22,%2237115%22,%2237117%22,%2237121%22,%2237123%22,%2237125%22,%2237127%22,%2237129%22,%2237133%22,%2237137%22,%2237141%22,%2237143%22,%2237145%22,%2237149%22,%2237151%22,%2237153%22,%2237155%22,%2237157%22,%2237159%22,%2237161%22,%2237163%22,%2237167%22,%2237169%22,%2237171%22,%2237173%22,%2237175%22,%2237177%22,%2237179%22,%2237191%22,%2237193%22,%2237197%22,%2237199%22],%22%23bf6865%22,%22%23ccc%22]}}' />To get started now, try testing style parameters in our newly updated Static Images API playground. You can practice using addLayer and setfilter while having your API requests validated in real time.
Introducing style parameters in the Static Images API was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.