Uncaught ReferenceError: HeatMapOverlay is not defined

[cpunekar]

Hi,

I am trying to use this library but getting the above error. I have included both the .js files in my code: require('../../node_modules/heatmap.js/heatmap.js'); require('../../node_modules/heatmap.js/plugins/leaflet-heatmap.js');

I am adding the leaflet library in my html.

I tried changing the call from var heatmapLayer = new HeatmapOverlay(cfg); to var heatmapLayer = new HeatMapOverlay(cfg); to check for any typos.

Any idea why I am getting this error?

[housemuslc]

Were you ever able to fix this? I'm getting the same error, and I have included both .js files also. Cannot fix this for the life of me!

[cpunekar]

@StefanG96 nope,I tried many things but it didn't work. You can try leaflet-heat.js, it worked for me.

[augustobg]

Im getting the same problem. And so far cant figure way. Anyone got something, or maybe just change to leaflet-heat.js will make the work?

[pa7]

@augustobg have you tried installing the leaflet-heatmap plugin via npm? it makes sure it has the correct dependencies: npm install leaflet-heatmap

[augustobg]

yes, and still getting the: Uncaught ReferenceError: HeatMapOverlay is not defined. I will try using leaflet-heat.js, and see if works. Thanks anyway :)

[pa7]

if anyone else is experiencing this issue please post a link to a codepen so I can have a closer look at it

[milldr]

I have the same problem. is there a solution to this yet?

[augustobg]

I use leaflet.heat Works pretty well for me, give it a try.

[milldr]

i'll try that, thanks

[pa7]

@miller-6227 I cannot fix this issue if you don't provide a URL where I could have a look at it. If leaflet.heat works for you (and you don't need dynamic data) that's great, but I'd appreciate if you could upload your attempt to get it to work somewhere where I can have a look at it

[Bengreen]

are there any examples of HeatmapOverlay working in angular2

[acner]

I use leaflet.heat npm install leaflef npm install --save https://github.com/Leaflet/Leaflet.heat/tarball/gh-pages

`import { Component } from '@angular/core'; import { HttpClient} from '@angular/common/http'; import { NavController } from 'ionic-angular'; import 'rxjs/add/operator/map';

import 'leaflet'; import "leaflet.heat";

declare var L: any;//Declare leaflet lib and plugin @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { map: any; center: any; constructor(public navCtrl: NavController, public http: HttpClient) { } ionViewDidLoad() { this.initMap(); } initMap() { this.map = L.map("map").fitWorld(); L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{ maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] }).addTo(this.map); this.map.locate({ setView: true, maxZoom: 10 }).on('locationfound', (e) => { let markerGroup = L.featureGroup(); let marker: any = L.marker([e.latitude, e.longitude]).on('click', () => { alert('Marker clicked'); }) markerGroup.addLayer(marker); this.map.addLayer(markerGroup); }).on('locationerror', (err) => { alert(err.message); }); var heat = L.heatLayer([ [-25.290917, -57.542800, 0.2], // lat, lng, intensity [-25.290474, -57.542227, 0.5], [-25.290074, -57.543067, 0.6], ],{ radius: 20, blur: 15, maxZoom: 17, }).addTo(this.map); } }`

[nik-el]

Hello! i install heatmap from npm npm i leaflet-heatmap and had same problem HeatMapOverlay is not defined

I use Vue.js and for fix just use correct name in import. import HeatmapOverlay from 'leaflet-heatmap/leaflet-heatmap.js maybe it will be useful for someone

[cdebadri]

ok. i have solved it. If anyone needs any help setting it up on electron can refer this. install leaflet and leaflet-heatmap via npm and then place these two lines in the beginning. var L = require('leaflet'); var HeatmapOverlay = require('leaflet-heatmap');

[Khyme]

In case it helps anyone, I had the same problem. I had used leaflet-heatmap (a heatmap.js plugin, note) without problem with Vue.Js. That project ran on npm so only had to install the plugin with

npm install leaflet-heatmap

Which took care of importing heatmap.js itself. And then simply import it in a .vue file with :

import HeatmapOverlay from 'leaflet-heatmap'

Since I used that plugin with great success on my Vue.js project, I decided to use it on an older AngularJS project running on bower. Not as easy !

Add to the bower.json dependencies (no ^ allowed) :

    "leaflet": "1.4.0",
    "heatmap.js-amd": "2.0.5"

then in my build.config.js file

     'vendor/leaflet/dist/leaflet.js',
     'vendor/leaflet/dist/leaflet.js.map',
     'vendor/heatmap.js-amd/build/heatmap.js',
     'vendor/heatmap.js-amd/plugins/leaflet-heatmap/leaflet-heatmap.js'

[zephon82]

I made my own d.ts files and finally it seams to work. I used: npm install heatmap.js npm install leaflet-heatmap

my first d.ts file start with "declare module 'heatmap.js'" and export the functions/classes/interfaces of heatmap.js (basically https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/heatmap.js/index.d.ts but you stop at line 350)

my second d.ts file:

declare module 'leaflet-heatmap' { import * as Leaflet from "leaflet"; import * as h337 from "heatmap.js";

class HeatmapOverlay<
    V extends string,
    TLat extends string,
    TLng extends string
> extends Leaflet.Layer
{
    constructor(configuration: h337.HeatmapOverlayConfiguration<V, TLat, TLng>);
    setData(data: h337.HeatmapData<h337.DataPoint<V, TLat, TLng>>): void;
    addData(data: h337.DataPoint<V, TLat, TLng> | ReadonlyArray<h337.DataPoint<V, TLat, TLng>>): void;
    onAdd(map: Leaflet.Map): any;
    onRemove(map: Leaflet.Map): any;
}

export default HeatmapOverlay;

}

At last in my application I write:

import * as h337 from 'heatmap.js'; import HeatmapOverlay from 'leaflet-heatmap';