Creating a Heatmap with Colored Icons and Without Icons on Leaflet or Any Map Supporting Satellite and Physical Views

Question

I am working with Angular 6 and Leaflet 1.4.7 to implement a heatmap feature in two ways:

1.Heatmap with Colored Icons

• I want to place colored icons at specified latitude and longitude
  coordinates on the Leaflet map.
• The icons should represent heatmap colors, extracted from a Highcharts heatmap.
• I have seen examples where PNG images are used to achieve this, but I want to dynamically generate colored icons instead. How can this be achieved?

2.Heatmap Without Icons

• I want to create a traditional heatmap on Leaflet without using icons.
• The heatmap colors should be dynamically defined based on input values corresponding to different latitude and longitude points.
• How is the color range defined for the heatmap, and what is the best approach to implement this on Leaflet?

I have attached a reference image for clarity for #2. Any guidance or examples would be appreciated. Also using only leaflet is not compulsory. If you know any better free library which can provide satellite view and physical map view along with these features please suggest. I couldn't find any examples of highcharts with physical/ satellite view.

Answer 1

As for the first approach, I can give you some steps related to Highcharts. Once you have your dynamically created icons, you can use ColorAxis to determine color range, see the API reference here: https://api.highcharts.com/highmaps/colorAxis

As for the traditional heatmap, again you can workout colors with ColorAxs, please see a sample demo here: https://www.highcharts.com/demo/maps/geoheatmap-europe

While Highcharts Maps doesn't directly provide satellite or physical map views, you can overlay Highcharts on maps from other libraries like Mapbox or Google Maps by synchronizing the data and using custom overlays.

Best regards,