CODEWITHSUNDEEP
svgfrontendbackend
Defozo
Defozo

Reputation: 3092

What are the pros and cons of generating heatmap on back-end/front-end side?

I have a network of sensors that measure air pollution. I want to make a heatmap of this pollution and show it to users on my website.

I'm thinking about the best way to do that. Should the heatmap be generated on back-end or front-end side? What are the pros and cons of both solutions? Any details - like in what format should I send the heatmap to the front-end (maybe using SVG?) would be very appreciated.

I can find these pros for back-end generated heatmap:

Cons:

Additionally, can you name any real-life examples of back-end/front-end generated things that are put on top of the map?

Upvotes: 1

Views: 618

Answers (1)

Gee Bee
Gee Bee

Reputation: 1794

It is a bit hard to answer what the best solution is. It all depends on the data.

  • if you have say, moderate amount of data points, about 50-100, and prefer having a crisp rendering on a high resolution display, then SVG is the way to go.
  • if you have hundreds or thousands of data points, rendering those with SVG can be a performance killer on the client side. In this case, render everything to a bitmap on the server side and send it to the client.

Examples:

  • Google maps (or any other map service) renders maps as bitmap tiles on the server side. The classical Google maps in a browser (e.g. ios Safari showing google maps) will do nothing more. Even street names are rendered to the bitmap. (It worth of noting that on more capable platforms, such as desktop Chrome, things are done more tricky.)

  • JS side charting solutions will render things on the client side. Looks grand for datasets up to some hundred points. Fails sadly on real life data (for example, working in the stock market industry, examples like "show stock prices of Apple" can make these solutions on their knees. (All price changes of Apple shares from 1990 - including tick level data (so thousands of changes per day) is a different league.

Just for the records, in a recent project after months of development work, we were unable to make a client side canvas based rendering working reasonably well on all platforms, and opted to server-side rendering and solved the problem with 4 days of work.

Upvotes: 2

Related Questions