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

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