https://github.com/metamediatechnology/heatmap-longdo-map

Adding heatmap layer on longdomap
https://github.com/metamediatechnology/heatmap-longdo-map

Last synced: about 1 month ago
JSON representation

Adding heatmap layer on longdomap

• Host: GitHub
• URL: https://github.com/metamediatechnology/heatmap-longdo-map
• Owner: MetamediaTechnology
• License: mit
• Created: 2019-09-05T03:34:50.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-06-25T08:59:37.000Z (over 3 years ago)
• Last Synced: 2023-03-03T13:05:46.411Z (almost 2 years ago)
• Language: JavaScript
• Size: 1.67 MB
• Stars: 0
• Watchers: 6
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# heatmap-Longdo-Map

This is a plugin of heatmap.js for adding heatmap layer on Longdo Map. For more information on heatmap.js, see:[heatmap.js](https://github.com/pa7/heatmap.js/blob/master/README.md)

## where the plugins is located

[plugins/longdomap-heatmap/longdomap-heatmap.js](https://github.com/MetamediaTechnology/heatmap-longdo-map/tree/master/plugins/longdomap-heatmap)

## how to use

### 1. Load Longdo API & heatmap.js before the plugin is loaded.

```html

```

### 2. Prepare data points.

```javascript

var testData = {max: 10,data:[

	  	{lat:60.087195,lon:84.767761,value:8},

	  	{lat:41.804724,lon:-104.021301,value:4},]};

```

### 3. Prepare configuration.

```javascript

var cfg = {

	  	'radius': 25,

	  	"maxOpacity": .5,

	  	"scaleRadius": true,

	  	"useLocalExtrema": true

	  };

```

### 4. Instantiate HeatmapOverlay with config below & set data.

```javascript

heatmapLayer = new HeatmapOverlay(cfg);

heatmapLayer.setData(testData);

```

### 5. Add to Longdo Map.

```javascript

map.Layers.add(heatmapLayer);

```

## Demos

For those who would like to see quickly, here is links to them.

* [Path of Kajiki (14th typhoon in 2019)](https://metamediatechnology.github.io/longdo-map-heatmap/kajiki.html)

* [World population(not accurate)](https://metamediatechnology.github.io/longdo-map-heatmap/population.html)

*Note: turn off Adblock otherwise you cannot load heatmap.js*  

For sourcecode,see what is in [example/longdomap-heatmap folder](https://github.com/MetamediaTechnology/heatmap-longdo-map/tree/master/examples/longdomap-heatmap)

## data points syntax

Data points have to be defined in JSON format such as:

```javascript

var testData = {max: 10,data:[

	  	{lat:60.087195,lon:84.767761,value:8,radius:20},

	  	{lat:41.804724,lon:-104.021301,value:4},]};

```

'radius' field is optional. The default radius is 2. If scaleRadius in config is true, it will be manipulated. 

## configuration

configurable values are as the same as ones of original heatmap.js. However, you cannot use container option.

* backgroundColor

* gradient

* maxOpacity

* minOpacity

* blur

* radius

* scaleRadius

* useLocalExtrema

* ...

For more information, see: [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/)

## Authors

* pa7/Patrick Wied

* original heatmap.js contributors

* belkey

## Licenses

This plugin is licensed under MIT License. (see: [LICENSE file](https://github.com/MetamediaTechnology/heatmap-longdo-map/blob/master/LICENSE))