Angular 2 support?

[amouly]

Any plan to support Angular 2 and implementation examples?

Thanks!

[pa7]

@amouly At some point in the future, yes, but it's not my top priority now. Do you want to give it a shot? Do you know what needs to be done to move from angular1 to angular2?

[pa7]

Closing for now, please reopen if there's more interest

[khoks]

There is definitely more interest. We are moving our data mining efforts to angular 2 based UI.

[vaydich]

Is there angular 2 support?

[yihengli]

I find the following type definition file working for me: https://libraries.io/npm/@types%2Fheatmap.js/2.0.33

I combined it with another awesome project https://github.com/Asymmetrik/ngx-leaflet and it seems work in Angular4.

[vaydich]

Can you explain it in more detail. You install @types and require sciript heatmap.js in cli.json? After that you can use construction like this: var heatmapLayer = new HeatmapOverlay(cfg); ?

[rebendajirijr]

But what if I don't want to use leaflet? How can one call h337.create() method using the typescript?

[yihengli]

@vaydich

1. npm install both heatmap.js and @types/heatmap.js. There is a trick, @types/heatmap.js comes with its own dependency (leaflet) but an older version. You will have to delete it from node_module/@types/heatmap.js/... if you have already installed your own separate leaflet. (Which is a case for me because ngx/leaflet needs leaflet as well)

2. Import all your source js files into .angular-cli.json:

     "scripts": [
       ...
       "../node_modules/leaflet/dist/leaflet.js",
       "../node_modules/heatmap.js/build/heatmap.min.js",
       "../node_modules/heatmap.js/plugins/leaflet-heatmap/leaflet-heatmap.js"
     ],

   The order matters because leaflet-heatmap needs to be imported after leaflet

3. In your component, you can do whatever you want then:

   import * as L from 'leaflet';
   import 'heatmap.js';
   
   onMapReady(map: L.Map): void {
   // Do stuff with map
   const testData = {
     max: 8,
     data: [{lat: 24.6408, lng: 46.7728, count: 3}, {lat: 50.75, lng: -1.55, count: 1}]
   };
   
   const baseLayer = L.tileLayer(
     'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       maxZoom: 18
     }
   );
   
   const cfg = {
     // radius should be small ONLY if scaleRadius is true (or small radius is intended)
     // if scaleRadius is false it will be the constant radius used in pixels
     'radius': 30,
     'maxOpacity': .8,
     // scales the radius based on map zoom
     'scaleRadius': false,
     // if set to false the heatmap uses the global maximum for colorization
     // if activated: uses the data maximum within the current map boundaries
     //   (there will always be a red spot with useLocalExtremas true)
     'useLocalExtrema': false,
     // which field name in your data represents the latitude - default 'lat'
     latField: 'lat',
     // which field name in your data represents the longitude - default 'lng'
     lngField: 'lng',
     // which field name in your data represents the data value - default 'value'
     valueField: 'count'
   };
   
   const heatmapLayer = new HeatmapOverlay(cfg);
   
   heatmapLayer.setData(testData);
   heatmapLayer.onAdd(map);
   }

Note: You will need to expose the L.Map instance somewhere in your code. I used ngx-leaflet package and get it by onMapReady function. I think it's also doable by using pure @types/leaflet to work

[yihengli]

@rebendajirijr

Unfortunately, I didn't try to explore that part in my project (all I need is heatmap on leaflet). But I think it's doable if you can find the proper type definition file for the feature that you need. In the worst case, you might need to write one for heatmap.js

[ghost]

i used below approach, npm install leaflet-heatmap --save

import HeatmapOverlay from 'leaflet-heatmap';

const testData = { max: 8, data: [{lat: 24.6408, lng: 46.7728, count: 3}, {lat: 50.75, lng: -1.55, count: 1}] };

const cfg = { // radius should be small ONLY if scaleRadius is true (or small radius is intended) // if scaleRadius is false it will be the constant radius used in pixels 'radius': 30, 'maxOpacity': .8, // scales the radius based on map zoom 'scaleRadius': false, // if set to false the heatmap uses the global maximum for colorization // if activated: uses the data maximum within the current map boundaries // (there will always be a red spot with useLocalExtremas true) 'useLocalExtrema': false, // which field name in your data represents the latitude - default 'lat' latField: 'lat', // which field name in your data represents the longitude - default 'lng' lngField: 'lng', // which field name in your data represents the data value - default 'value' valueField: 'count' };

const heatmapLayer = new HeatmapOverlay(cfg);

heatmapLayer.setData(testData);
heatmapLayer.onAdd(map);

}

this is working fine for me.

[jdk2pq]

Also wanted to share my solution for this with Angular 5.2.9. It's a mixture of ideas from @yihengli and @aakidatta -- thanks!

1. npm install leaflet leaflet-heatmap @yaga/leaflet-ng2 --save

2. 
   import {AfterViewInit, Component, ViewChild} from '@angular/core';
   import {MapComponent, OSM_TILE_LAYER_URL} from '@yaga/leaflet-ng2';
   import * as L from 'leaflet';
   // had to use require() here instead of import {x} from {y} because HeatmapOverlay wasn't being understood as a constructor
   import HeatmapOverlay = require('leaflet-heatmap/leaflet-heatmap');

@Component({ selector: 'map', templateUrl: './map.component.html', styles: [ yaga-map { height: 800px; } ] }) export class MyMapComponent implements AfterViewInit { public tileLayerUrl: string = OSM_TILE_LAYER_URL; @ViewChild(MapComponent) private mapComponent: MapComponent;

ngAfterViewInit() {
    const testData = {
        max: 8,
        min: 1,
        data: [{lat: 24.6408, lng: 46.7728, count: 3}, {lat: 50.75, lng: -1.55, count: 1}]
    };

    const cfg = {
        // radius should be small ONLY if scaleRadius is true (or small radius is intended)
        // if scaleRadius is false it will be the constant radius used in pixels
        'radius': 30,
        'maxOpacity': .8,
        // scales the radius based on map zoom
        'scaleRadius': false,
        // if set to false the heatmap uses the global maximum for colorization
        // if activated: uses the data maximum within the current map boundaries
        //   (there will always be a red spot with useLocalExtremas true)
        'useLocalExtrema': false,
        // which field name in your data represents the latitude - default 'lat'
        latField: 'lat',
        // which field name in your data represents the longitude - default 'lng'
        lngField: 'lng',
        // which field name in your data represents the data value - default 'value'
        valueField: 'count'
    };
    const heatmapLayer = new HeatmapOverlay(cfg);
    heatmapLayer.setData(testData);
    heatmapLayer.onAdd(<any>this.mapComponent as L.Map);
}

}

[rpdiss]

This works well 🗡 https://gist.github.com/rpdiss/5e63816e30a1fb0ec252be0fcceb6078