Skip to content

Commit d918e91

Browse files
jeremiahrhalljeremiahrhall
authored
Merge pull request #36 from vadzim-revolist/2.0
Support for react-leaflet v2.0
2 parents 42fc6c3 + ef23725 commit d918e91

File tree

4 files changed

+47
-45
lines changed

4 files changed

+47
-45
lines changed

‎CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
# 2.0.0 Release
2+
- React-leaflet v2.x support. For react-leaflet v1.x please use react-leaflet-heatmep-layer v1.x.
3+
14
# 1.0.4 Release
25
- Allow the latest versions of `react` and `react-dom` (i.e. 16 and up).
36

‎lib/HeatmapLayer.js

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
exports.__esModule = true;
44

5+
var _class, _temp;
6+
57
var _react = require('react');
68

79
var _react2 = _interopRequireDefault(_react);
@@ -81,7 +83,7 @@ function shouldIgnoreLocation(loc) {
8183
return isInvalid(loc.lng) || isInvalid(loc.lat);
8284
}
8385

84-
var HeatmapLayer = function (_MapLayer) {
86+
exports.default = (0, _reactLeaflet.withLeaflet)((_temp = _class = function (_MapLayer) {
8587
_inherits(HeatmapLayer, _MapLayer);
8688

8789
function HeatmapLayer() {
@@ -97,9 +99,9 @@ var HeatmapLayer = function (_MapLayer) {
9799
HeatmapLayer.prototype.componentDidMount = function componentDidMount() {
98100
var _this2 = this;
99101

100-
var canAnimate = this.context.map.options.zoomAnimation && _leaflet2.default.Browser.any3d;
102+
var canAnimate = this.props.leaflet.map.options.zoomAnimation && _leaflet2.default.Browser.any3d;
101103
var zoomClass = 'leaflet-zoom-' + (canAnimate ? 'animated' : 'hide');
102-
var mapSize = this.context.map.getSize();
104+
var mapSize = this.props.leaflet.map.getSize();
103105
var transformProp = _leaflet2.default.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']);
104106

105107
this._el = _leaflet2.default.DomUtil.create('canvas', zoomClass);
@@ -228,7 +230,7 @@ var HeatmapLayer = function (_MapLayer) {
228230
};
229231

230232
HeatmapLayer.prototype.componentWillUnmount = function componentWillUnmount() {
231-
safeRemoveLayer(this.context.map, this._el);
233+
safeRemoveLayer(this.props.leaflet.map, this._el);
232234
};
233235

234236
HeatmapLayer.prototype.fitBounds = function fitBounds() {
@@ -242,11 +244,11 @@ var HeatmapLayer = function (_MapLayer) {
242244
return;
243245
}
244246

245-
this.context.map.fitBounds(_leaflet2.default.latLngBounds(_leaflet2.default.latLng(sw), _leaflet2.default.latLng(ne)));
247+
this.props.leaflet.map.fitBounds(_leaflet2.default.latLngBounds(_leaflet2.default.latLng(sw), _leaflet2.default.latLng(ne)));
246248
};
247249

248250
HeatmapLayer.prototype.componentDidUpdate = function componentDidUpdate() {
249-
this.context.map.invalidateSize();
251+
this.props.leaflet.map.invalidateSize();
250252
if (this.props.fitBoundsOnUpdate) {
251253
this.fitBounds();
252254
}
@@ -260,7 +262,7 @@ var HeatmapLayer = function (_MapLayer) {
260262
HeatmapLayer.prototype.attachEvents = function attachEvents() {
261263
var _this3 = this;
262264

263-
var leafletMap = this.context.map;
265+
var leafletMap = this.props.leaflet.map;
264266
leafletMap.on('viewreset', function () {
265267
return _this3.reset();
266268
});
@@ -273,8 +275,8 @@ var HeatmapLayer = function (_MapLayer) {
273275
};
274276

275277
HeatmapLayer.prototype._animateZoom = function _animateZoom(e) {
276-
var scale = this.context.map.getZoomScale(e.zoom);
277-
var offset = this.context.map._getCenterOffset(e.center)._multiplyBy(-scale).subtract(this.context.map._getMapPanePos());
278+
var scale = this.props.leaflet.map.getZoomScale(e.zoom);
279+
var offset = this.props.leaflet.map._getCenterOffset(e.center)._multiplyBy(-scale).subtract(this.props.leaflet.map._getMapPanePos());
278280

279281
if (_leaflet2.default.DomUtil.setTransform) {
280282
_leaflet2.default.DomUtil.setTransform(this._el, offset, scale);
@@ -284,10 +286,10 @@ var HeatmapLayer = function (_MapLayer) {
284286
};
285287

286288
HeatmapLayer.prototype.reset = function reset() {
287-
var topLeft = this.context.map.containerPointToLayerPoint([0, 0]);
289+
var topLeft = this.props.leaflet.map.containerPointToLayerPoint([0, 0]);
288290
_leaflet2.default.DomUtil.setPosition(this._el, topLeft);
289291

290-
var size = this.context.map.getSize();
292+
var size = this.props.leaflet.map.getSize();
291293

292294
if (this._heatmap._width !== size.x) {
293295
this._el.width = this._heatmap._width = size.x;
@@ -296,7 +298,7 @@ var HeatmapLayer = function (_MapLayer) {
296298
this._el.height = this._heatmap._height = size.y;
297299
}
298300

299-
if (this._heatmap && !this._frame && !this.context.map._animating) {
301+
if (this._heatmap && !this._frame && !this.props.leaflet.map._animating) {
300302
this._frame = _leaflet2.default.Util.requestAnimFrame(this.redraw, this);
301303
}
302304

@@ -305,16 +307,16 @@ var HeatmapLayer = function (_MapLayer) {
305307

306308
HeatmapLayer.prototype.redraw = function redraw() {
307309
var r = this._heatmap._r;
308-
var size = this.context.map.getSize();
310+
var size = this.props.leaflet.map.getSize();
309311

310312
var maxIntensity = this.props.max === undefined ? 1 : this.getMax(this.props);
311313

312-
var maxZoom = this.props.maxZoom === undefined ? this.context.map.getMaxZoom() : this.getMaxZoom(this.props);
314+
var maxZoom = this.props.maxZoom === undefined ? this.props.leaflet.map.getMaxZoom() : this.getMaxZoom(this.props);
313315

314-
var v = 1 / Math.pow(2, Math.max(0, Math.min(maxZoom - this.context.map.getZoom(), 12)));
316+
var v = 1 / Math.pow(2, Math.max(0, Math.min(maxZoom - this.props.leaflet.map.getZoom(), 12)) / 2);
315317

316318
var cellSize = r / 2;
317-
var panePos = this.context.map._getMapPanePos();
319+
var panePos = this.props.leaflet.map._getMapPanePos();
318320
var offsetX = panePos.x % cellSize;
319321
var offsetY = panePos.y % cellSize;
320322
var getLat = this.props.latitudeExtractor;
@@ -383,7 +385,7 @@ var HeatmapLayer = function (_MapLayer) {
383385
return roundResults(accumulateInGrid(points, leafletMap, getBounds(leafletMap)));
384386
};
385387

386-
var data = getDataForHeatmap(this.props.points, this.context.map);
388+
var data = getDataForHeatmap(this.props.points, this.props.leaflet.map);
387389

388390
this._heatmap.clear();
389391
this._heatmap.data(data).draw(this.getMinOpacity(this.props));
@@ -404,9 +406,7 @@ var HeatmapLayer = function (_MapLayer) {
404406
};
405407

406408
return HeatmapLayer;
407-
}(_reactLeaflet.MapLayer);
408-
409-
HeatmapLayer.propTypes = {
409+
}(_reactLeaflet.MapLayer), _class.propTypes = {
410410
points: _propTypes2.default.array.isRequired,
411411
longitudeExtractor: _propTypes2.default.func.isRequired,
412412
latitudeExtractor: _propTypes2.default.func.isRequired,
@@ -421,5 +421,4 @@ HeatmapLayer.propTypes = {
421421
minOpacity: _propTypes2.default.number,
422422
blur: _propTypes2.default.number,
423423
gradient: _propTypes2.default.object
424-
};
425-
exports.default = HeatmapLayer;
424+
}, _temp));

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-leaflet-heatmap-layer",
3-
"version": "1.0.4",
3+
"version": "2.0.0",
44
"description": "A custom layer for heatmaps in react-leaflet",
55
"main": "lib/HeatmapLayer.js",
66
"scripts": {
@@ -30,7 +30,7 @@
3030
"license": "MIT",
3131
"peerDependencies": {
3232
"leaflet": "^1.0.0",
33-
"react-leaflet": "^1.0.0",
33+
"react-leaflet": "^2.0.0",
3434
"react": "^15.4.1 || ^16.0.0"
3535
},
3636
"devDependencies": {
@@ -55,7 +55,7 @@
5555
"react": "^16.0.0",
5656
"react-addons-test-utils": "^0.14.7",
5757
"react-dom": "^16.0.0",
58-
"react-leaflet": "^1.0.0",
58+
"react-leaflet": "^2.0.0",
5959
"react-transform-hmr": "^1.0.4",
6060
"webpack": "^1.12.14",
6161
"webpack-dev-server": "^1.14.1"

‎src/HeatmapLayer.js

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import min from 'lodash.min';
66
import max from 'lodash.max';
77
import isNumber from 'lodash.isnumber';
88
import L from 'leaflet';
9-
import { MapLayer } from 'react-leaflet';
9+
import { MapLayer, withLeaflet } from 'react-leaflet';
1010
import simpleheat from 'simpleheat';
1111
import PropTypes from 'prop-types';
1212

@@ -74,7 +74,7 @@ function shouldIgnoreLocation(loc: LngLat): boolean {
7474
return isInvalid(loc.lng) || isInvalid(loc.lat);
7575
}
7676

77-
export default class HeatmapLayer extends MapLayer {
77+
export default withLeaflet(class HeatmapLayer extends MapLayer {
7878
static propTypes = {
7979
points: PropTypes.array.isRequired,
8080
longitudeExtractor: PropTypes.func.isRequired,
@@ -97,9 +97,9 @@ export default class HeatmapLayer extends MapLayer {
9797
}
9898

9999
componentDidMount(): void {
100-
const canAnimate = this.context.map.options.zoomAnimation && L.Browser.any3d;
100+
const canAnimate = this.props.leaflet.map.options.zoomAnimation && L.Browser.any3d;
101101
const zoomClass = `leaflet-zoom-${canAnimate ? 'animated' : 'hide'}`;
102-
const mapSize = this.context.map.getSize();
102+
const mapSize = this.props.leaflet.map.getSize();
103103
const transformProp = L.DomUtil.testProp(
104104
['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']
105105
);
@@ -219,7 +219,7 @@ export default class HeatmapLayer extends MapLayer {
219219
}
220220

221221
componentWillUnmount(): void {
222-
safeRemoveLayer(this.context.map, this._el);
222+
safeRemoveLayer(this.props.leaflet.map, this._el);
223223
}
224224

225225
fitBounds(): void {
@@ -233,11 +233,11 @@ export default class HeatmapLayer extends MapLayer {
233233
return;
234234
}
235235

236-
this.context.map.fitBounds(L.latLngBounds(L.latLng(sw), L.latLng(ne)));
236+
this.props.leaflet.map.fitBounds(L.latLngBounds(L.latLng(sw), L.latLng(ne)));
237237
}
238238

239239
componentDidUpdate(): void {
240-
this.context.map.invalidateSize();
240+
this.props.leaflet.map.invalidateSize();
241241
if (this.props.fitBoundsOnUpdate) {
242242
this.fitBounds();
243243
}
@@ -249,7 +249,7 @@ export default class HeatmapLayer extends MapLayer {
249249
}
250250

251251
attachEvents(): void {
252-
const leafletMap: Map = this.context.map;
252+
const leafletMap: Map = this.props.leaflet.map;
253253
leafletMap.on('viewreset', () => this.reset());
254254
leafletMap.on('moveend', () => this.reset());
255255
if (leafletMap.options.zoomAnimation && L.Browser.any3d) {
@@ -259,11 +259,11 @@ export default class HeatmapLayer extends MapLayer {
259259

260260

261261
_animateZoom(e: LeafletZoomEvent): void {
262-
const scale = this.context.map.getZoomScale(e.zoom);
263-
const offset = this.context.map
262+
const scale = this.props.leaflet.map.getZoomScale(e.zoom);
263+
const offset = this.props.leaflet.map
264264
._getCenterOffset(e.center)
265265
._multiplyBy(-scale)
266-
.subtract(this.context.map._getMapPanePos());
266+
.subtract(this.props.leaflet.map._getMapPanePos());
267267

268268
if (L.DomUtil.setTransform) {
269269
L.DomUtil.setTransform(this._el, offset, scale);
@@ -274,10 +274,10 @@ export default class HeatmapLayer extends MapLayer {
274274
}
275275

276276
reset(): void {
277-
const topLeft = this.context.map.containerPointToLayerPoint([0, 0]);
277+
const topLeft = this.props.leaflet.map.containerPointToLayerPoint([0, 0]);
278278
L.DomUtil.setPosition(this._el, topLeft);
279279

280-
const size = this.context.map.getSize();
280+
const size = this.props.leaflet.map.getSize();
281281

282282
if (this._heatmap._width !== size.x) {
283283
this._el.width = this._heatmap._width = size.x;
@@ -286,7 +286,7 @@ export default class HeatmapLayer extends MapLayer {
286286
this._el.height = this._heatmap._height = size.y;
287287
}
288288

289-
if (this._heatmap && !this._frame && !this.context.map._animating) {
289+
if (this._heatmap && !this._frame && !this.props.leaflet.map._animating) {
290290
this._frame = L.Util.requestAnimFrame(this.redraw, this);
291291
}
292292

@@ -295,23 +295,23 @@ export default class HeatmapLayer extends MapLayer {
295295

296296
redraw(): void {
297297
const r = this._heatmap._r;
298-
const size = this.context.map.getSize();
298+
const size = this.props.leaflet.map.getSize();
299299

300300
const maxIntensity = this.props.max === undefined
301301
? 1
302302
: this.getMax(this.props);
303303

304304
const maxZoom = this.props.maxZoom === undefined
305-
? this.context.map.getMaxZoom()
305+
? this.props.leaflet.map.getMaxZoom()
306306
: this.getMaxZoom(this.props);
307307

308308
const v = 1 / Math.pow(
309309
2,
310-
Math.max(0, Math.min(maxZoom - this.context.map.getZoom(), 12))
310+
Math.max(0, Math.min(maxZoom - this.props.leaflet.map.getZoom(), 12)) / 2
311311
);
312312

313313
const cellSize = r / 2;
314-
const panePos = this.context.map._getMapPanePos();
314+
const panePos = this.props.leaflet.map._getMapPanePos();
315315
const offsetX = panePos.x % cellSize;
316316
const offsetY = panePos.y % cellSize;
317317
const getLat = this.props.latitudeExtractor;
@@ -375,7 +375,7 @@ export default class HeatmapLayer extends MapLayer {
375375
)
376376
);
377377

378-
const data = getDataForHeatmap(this.props.points, this.context.map);
378+
const data = getDataForHeatmap(this.props.points, this.props.leaflet.map);
379379

380380
this._heatmap.clear();
381381
this._heatmap.data(data).draw(this.getMinOpacity(this.props));
@@ -398,4 +398,4 @@ export default class HeatmapLayer extends MapLayer {
398398
return null;
399399
}
400400

401-
}
401+
});

0 commit comments

Comments
 (0)