200%g
160%g
120%g
80%g
40%g

Create isobands from isolines

This sample shows how to create isobands from isoline data and display them on a map with a data driven styling to assign colors. Isobands represent the areas between isolines. Isoline data often consists of LineString or MultiLineString shapes that represent closed rings. The lines should never overlap.

There are a couple of methods that can be used to create isobands depending on the format of the data. You can assume the data is already sorted is ascending order, or you can sort the data by a property value in ascending order. If you will be using solid colors, you can simply add the polygons as is to the map. If not, then you will need to cut out overlapping areas using one of the methods below.
This sample shows how to do the first method. Note that LineStrings can be converted to Polygons, and MultiLineStrings into MultiPolygons by simply wrapping the coordinates within an array. From there, one of the following methods can be used. This sample uses the open source Turf.js library to perform the difference calculation.
The data in this sample represents Earthquake intensity contours of M7.0 – 1km WSW of Kumamoto-shi, Japan and is sourced from the USGS Earthquake Hazards Program.