Ember Leaflet Heatmap
Offers Heatmap.js functionality for Ember-Leaflet, an Ember Addon for Leaflet interactive maps.
Installation
ember install ember-leaflet-heatmap
Usage
Setup
To setup the heatmap, simply add the heatmap-layer
component and pass in an Ember Array of data. By default, Ember Leaflet Heatmap will grab lat
, lng
and value
properties from each item in your array. It will listen to all array changes and automatically update the heatmap.
If your data doesn't have lat
, lng
or value
keys, you can set the correct property key references like so:
Options
All Heatmap.js options can be passed into the component, either as individual values or in an options hash. Some examples are below:
Contextual Component support
Ember-Leaflet now makes use of contextual components in Ember. However, only the built in child components are defined out-of-the-box:
To use Ember Leaflet Heatmap as a contextual component, extend the base leaflet-map component into a custom component of your own.
// your-map.js
import LeafletMap from 'ember-leaflet/components/leaflet-map';
export default LeafletMap.extend({
// Add options here
});
Next, override the template with the components you need. For a full list of built-in components, click here.
Then, you can use it in your templates like so:
Running
ember server
- Visit your app at http://localhost:4200.
Running Tests
-
yarn test
(Runsember try:testall
to test your addon against multiple Ember versions) ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit http://ember-cli.com/.