angulartypescriptleafletheatmapngx-leaflet

How to put a heatmap in ngx-leaflet?

I would like to put a heatmap over a ngx-leaflet map (using angular), like in the following image.

How can I achieve that?

Here is the demo of the example.

Solution

  • Install leaflet, ngx-leaflet, @types/leaflet

    npm install leaflet
npm install leaflet.heat
npm install @asymmetrik/ngx-leaflet
npm install --save-dev @types/leaflet

    Import leaflet.css in angular.json

      "styles": ["../node_modules/leaflet/dist/leaflet.css", "styles.css"]

    Install Leaflet.heat & import it on comp.ts, import the geographic data to be used from assets

    import 'leaflet.heat/dist/leaflet-heat.js'
import { addressPoints } from '../assets/realworld.10000'

    Listen to onMapReady event get the reference to the map & add heatmap to the map

    onMapReady(map) {
    let newAddressPoints = addressPoints.map(function (p) { return [p[0], p[1]]; });
    const heat = L.heatLayer(newAddressPoints).addTo(map);
}

    Demo