Create isobands from isolines - Azure Maps Web SDK Samples

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.

Convert the line data into polygons, then take first polygon and calculate the difference compared to all other (subtract second polygon area from first one), higher value, polygons, then go to the second polygon and do the same.
If the data only consists of LineStrings, then each new line should be within the previous lines area, thus you can use one line as the first ring of a polygon and the second line as hole within the polygon. This is simple but error prone.

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.