Skip to content

Commit e173e89

Browse files
pa7pa7
committed
Add plugin module testing playground
1 parent b78fc8c commit e173e89

File tree

6 files changed

+317
-0
lines changed

6 files changed

+317
-0
lines changed

‎tests/visual/plugin-modules/gmaps-heatmap.js

+279
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
/*
2+
* heatmap.js gmaps overlay
3+
*
4+
* Copyright (c) 2014, Patrick Wied (http://www.patrick-wied.at)
5+
* Dual-licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
6+
* and the Beerware (http://en.wikipedia.org/wiki/Beerware) license.
7+
*/
8+
;(function (name, context, factory) {
9+
var gmaps, h337;
10+
// Supports UMD. AMD, CommonJS/Node.js and browser context
11+
if (typeof module !== "undefined" && module.exports) {
12+
h337 = require('heatmap.js');
13+
gmaps = require('google-maps');
14+
module.exports = factory(h337, gmaps);
15+
} else if (typeof define === "function" && define.amd) {
16+
define(['heatmap.js', 'google-maps'], factory);
17+
} else {
18+
// browser globals
19+
if (typeof window.h337 === 'undefined') {
20+
throw new Error('heatmap.js must be loaded before the gmaps heatmap plugin');
21+
}
22+
if (typeof window.google === 'undefined') {
23+
throw new Error('Google Maps must be loaded before the gmaps heatmap plugin');
24+
}
25+
context[name] = factory(window.h337, window.google.maps);
26+
}
27+
28+
})("HeatmapOverlay", this, function(h337, gmaps) {
29+
'use strict';
30+
31+
var HeatmapOverlay = function(map, cfg){
32+
this.setMap(map);
33+
this.initialize(cfg || {});
34+
};
35+
36+
HeatmapOverlay.prototype = new gmaps.OverlayView();
37+
38+
39+
HeatmapOverlay.CSS_TRANSFORM = (function() {
40+
var div = document.createElement('div');
41+
var props = [
42+
'transform',
43+
'WebkitTransform',
44+
'MozTransform',
45+
'OTransform',
46+
'msTransform'
47+
];
48+
49+
for (var i = 0; i < props.length; i++) {
50+
var prop = props[i];
51+
if (div.style[prop] !== undefined) {
52+
return prop;
53+
}
54+
}
55+
56+
return props[0];
57+
})();
58+
59+
HeatmapOverlay.prototype.initialize = function(cfg) {
60+
this.cfg = cfg;
61+
62+
var map = this.map = this.getMap();
63+
var container = this.container = document.createElement('div');
64+
var mapDiv = map.getDiv();
65+
var width = this.width = mapDiv.clientWidth;
66+
var height = this.height = mapDiv.clientHeight;
67+
68+
container.style.cssText = 'width:' + width +'px;height:' + height+'px;';
69+
70+
this.data = [];
71+
this.max = 1;
72+
this.min = 0;
73+
74+
cfg.container = container;
75+
};
76+
77+
HeatmapOverlay.prototype.onAdd = function(){
78+
var that = this;
79+
80+
this.getPanes().overlayLayer.appendChild(this.container);
81+
82+
83+
this.changeHandler = google.maps.event.addListener(
84+
this.map,
85+
'bounds_changed',
86+
function() { return that.draw(); }
87+
);
88+
89+
if (!this.heatmap) {
90+
this.heatmap = h337.create(this.cfg);
91+
}
92+
this.draw();
93+
};
94+
95+
HeatmapOverlay.prototype.onRemove = function() {
96+
if (!this.map) { return; }
97+
98+
this.map = null;
99+
100+
this.container.parentElement.removeChild(this.container);
101+
102+
if (this.changeHandler) {
103+
google.maps.event.removeListener(this.changeHandler);
104+
this.changeHandler = null;
105+
}
106+
107+
};
108+
109+
HeatmapOverlay.prototype.draw = function() {
110+
if (!this.map) { return; }
111+
112+
var bounds = this.map.getBounds();
113+
114+
var topLeft = new google.maps.LatLng(
115+
bounds.getNorthEast().lat(),
116+
bounds.getSouthWest().lng()
117+
);
118+
119+
var projection = this.getProjection();
120+
var point = projection.fromLatLngToDivPixel(topLeft);
121+
122+
this.container.style[HeatmapOverlay.CSS_TRANSFORM] = 'translate(' +
123+
Math.round(point.x) + 'px,' +
124+
Math.round(point.y) + 'px)';
125+
126+
this.update();
127+
};
128+
129+
HeatmapOverlay.prototype.resize = function() {
130+
131+
if (!this.map){ return; }
132+
133+
var div = this.map.getDiv(),
134+
width = div.clientWidth,
135+
height = div.clientHeight;
136+
137+
if (width == this.width && height == this.height){ return; }
138+
139+
this.width = width;
140+
this.height = height;
141+
142+
// update heatmap dimensions
143+
this.heatmap._renderer.setDimensions(width, height);
144+
// then redraw all datapoints with update
145+
this.update();
146+
};
147+
148+
HeatmapOverlay.prototype.update = function() {
149+
var projection = this.getProjection(),
150+
zoom, scale, bounds, topLeft;
151+
var generatedData = { max: this.max, min: this.min, data: [] };
152+
153+
if (!projection){ return; }
154+
155+
bounds = this.map.getBounds();
156+
157+
topLeft = new google.maps.LatLng(
158+
bounds.getNorthEast().lat(),
159+
bounds.getSouthWest().lng()
160+
);
161+
162+
zoom = this.map.getZoom();
163+
scale = Math.pow(2, zoom);
164+
165+
this.resize();
166+
167+
if (this.data.length == 0) {
168+
if (this.heatmap) {
169+
this.heatmap.setData(generatedData);
170+
}
171+
return;
172+
}
173+
174+
175+
var latLngPoints = [];
176+
// iterate through data
177+
var len = this.data.length;
178+
var layerProjection = this.getProjection();
179+
var layerOffset = layerProjection.fromLatLngToDivPixel(topLeft);
180+
var radiusMultiplier = this.cfg.scaleRadius ? scale : 1;
181+
var localMax = 0;
182+
var localMin = 0;
183+
var valueField = this.cfg.valueField;
184+
185+
186+
while (len--) {
187+
var entry = this.data[len];
188+
var value = entry[valueField];
189+
var latlng = entry.latlng;
190+
191+
192+
// we don't wanna render points that are not even on the map ;-)
193+
if (!bounds.contains(latlng)) {
194+
continue;
195+
}
196+
// local max is the maximum within current bounds
197+
localMax = Math.max(value, localMax);
198+
localMin = Math.min(value, localMin);
199+
200+
var point = layerProjection.fromLatLngToDivPixel(latlng);
201+
var latlngPoint = { x: Math.round(point.x - layerOffset.x), y: Math.round(point.y - layerOffset.y) };
202+
latlngPoint[valueField] = value;
203+
204+
var radius;
205+
206+
if (entry.radius) {
207+
radius = entry.radius * radiusMultiplier;
208+
} else {
209+
radius = (this.cfg.radius || 2) * radiusMultiplier;
210+
}
211+
latlngPoint.radius = radius;
212+
latLngPoints.push(latlngPoint);
213+
}
214+
if (this.cfg.useLocalExtrema) {
215+
generatedData.max = localMax;
216+
generatedData.min = localMin;
217+
}
218+
219+
generatedData.data = latLngPoints;
220+
221+
this.heatmap.setData(generatedData);
222+
223+
};
224+
225+
HeatmapOverlay.prototype.setData = function(data) {
226+
this.max = data.max;
227+
this.min = data.min;
228+
229+
var latField = this.cfg.latField || 'lat';
230+
var lngField = this.cfg.lngField || 'lng';
231+
var valueField = this.cfg.valueField || 'value';
232+
233+
// transform data to latlngs
234+
var data = data.data;
235+
var len = data.length;
236+
var d = [];
237+
238+
while (len--) {
239+
var entry = data[len];
240+
var latlng = new google.maps.LatLng(entry[latField], entry[lngField]);
241+
var dataObj = { latlng: latlng };
242+
dataObj[valueField] = entry[valueField];
243+
if (entry.radius) {
244+
dataObj.radius = entry.radius;
245+
}
246+
d.push(dataObj);
247+
}
248+
this.data = d;
249+
this.update();
250+
};
251+
// experimential. not ready yet.
252+
HeatmapOverlay.prototype.addData = function(pointOrArray) {
253+
if (pointOrArray.length > 0) {
254+
var len = pointOrArray.length;
255+
while(len--) {
256+
this.addData(pointOrArray[len]);
257+
}
258+
} else {
259+
var latField = this.cfg.latField || 'lat';
260+
var lngField = this.cfg.lngField || 'lng';
261+
var valueField = this.cfg.valueField || 'value';
262+
var entry = pointOrArray;
263+
var latlng = new google.maps.LatLng(entry[latField], entry[lngField]);
264+
var dataObj = { latlng: latlng };
265+
266+
dataObj[valueField] = entry[valueField];
267+
if (entry.radius) {
268+
dataObj.radius = entry.radius;
269+
}
270+
this.max = Math.max(this.max, dataObj[valueField]);
271+
this.min = Math.min(this.min, dataObj[valueField]);
272+
this.data.push(dataObj);
273+
this.update();
274+
}
275+
};
276+
277+
return HeatmapOverlay;
278+
279+
});

‎tests/visual/plugin-modules/gmaps-node.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
var gmapsPlugin = require('../../../plugins/gmaps-heatmap');
2+
3+
console.log(gmapsPlugin);

‎tests/visual/plugin-modules/gmaps-requirejs-main.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
require.config({
2+
packages: {
3+
"heatmap.js": "../../../build/heatmap"
4+
}
5+
});
6+
requirejs(["gmaps-heatmap"], function(gmapsHeatmap) {
7+
console.log('jooo');
8+
});

‎tests/visual/plugin-modules/gmaps-requirejs.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<html>
2+
<head>
3+
<title>Module Loading Test: RequireJS</title>
4+
</head>
5+
<body>
6+
<script data-main="gmaps-requirejs-main" src="http://requirejs.org/docs/release/2.2.0/minified/require.js"></script>
7+
</body>
8+
</html>

‎tests/visual/plugin-modules/gmaps-script.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<html>
2+
<head>
3+
<title>Module Loading Test: Script insert</title>
4+
</head>
5+
<body>
6+
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"> </script>
7+
<script src="/build/heatmap.js"></script>
8+
<script src="/plugins/gmaps-heatmap.js"></script>
9+
<script>
10+
window.initMap = function() {
11+
console.log(window.google);
12+
};
13+
window.onload = function() {
14+
console.log('h337: ', window.h337);
15+
console.log('HeatmapOverlay', window.HeatmapOverlay);
16+
};
17+
</script>
18+
</body>
19+
</html>

‎tests/visual/plugin-modules/index.html

Whitespace-only changes.

0 commit comments

Comments
 (0)