Realtime Contour Map Calculation and Rendering

jacobgqc

## Contour Map Visualization

 

We tried building a contour map feature for a React/Esri JS SDK application that would display interpolated contour lines showing the spatial distribution of parameter values across a network. The desired functionality is similar to a Heatmap, but is driven by point values and not density.

 

## Why We Want This Visualization Method

 

The contour map is intended to provide:

 

1. Spatial Interpolation: Unlike discrete point data (which only shows values at specific locations), contours would show continuous surfaces of parameter values across the entire network area, making it easier to identify trends, gradients, and problem areas.

 

2. Better Pattern Recognition: Contour lines would help visualize how parameters (like sensor data) vary spatially across a system, making it easier to spot potential problem areas.

 

## How It Differs from Existing Esri JS SDK Options

 

A contour map approach is fundamentally different from standard Esri visualization methods:

 

### Existing Esri Options:

 

- Heatmaps: Show density/intensity as colored areas, but are limited to point density rather than actual parameter values

- Cluster Layers: Group nearby points but don't interpolate values between them

- Feature Layers: Show discrete point/line/polygon data at specific locations only

- Raster Layers: Require pre-processed raster data, not real-time interpolation

 

### Our Attempted Contour Approach:

 

We tried a custom approach based on some suggestions, but I couldn't get it to work...

 

- Real-time Interpolation: Use marching squares algorithm to generate contours from scattered point data on-the-fly

- Value-based Visualization: Contours represent actual parameter values (chlorine levels, pressure, etc.) rather than just point density

- Custom Algorithm: Inverse distance weighting interpolation on a 50x50 grid to create smooth contour lines

- Dynamic Generation: Contours generated client-side from live data, not pre-processed

jacobgqc

Hi @JuliePowell, and thanks for the response! Sorry I'm getting back to you so late.

We are currently using the data-weighted heatmap, but it doesn't achieve what we need for semi-low density datasets. In my experience of playing with the settings in the data-weighted heatmap, we would either get completely separated individual points of heat or an entire blob of the same heat value. Further, we've had issues with the heatmap in some of our datasets where it just doesn't work. We're returning the same format CSV content from our API, but something about the heatmap interpolation doesn't like some of the datasets. I was never able to figure out why.

A contour map is good for drawing lines of similar values and really isn't reliant on point density.

This Repository, though it's old, has a good display of heatmap versus contour map: https://github.com/wyegelwel/heatmap-js-google 

Thanks!
Jake