Skip to content

Commit 6d409ac

Browse files
author
Martin Abelson Sahlen
committed
Support layers as in react-leaflet 1.0.0
1 parent 9f1fd31 commit 6d409ac

File tree

3 files changed

+124
-87
lines changed

3 files changed

+124
-87
lines changed

‎lib/HeatmapLayer.js‎

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

33
exports.__esModule = true;
44

5-
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
6-
75
var _react = require('react');
86

97
var _react2 = _interopRequireDefault(_react);
@@ -92,17 +90,51 @@ var HeatmapLayer = function (_MapLayer) {
9290
}
9391

9492
HeatmapLayer.prototype.componentDidMount = function componentDidMount() {
95-
this.leafletElement = _reactDom2.default.findDOMNode(this.refs.container);
96-
this.props.map.getPanes().overlayPane.appendChild(this.leafletElement);
97-
this._heatmap = (0, _simpleheat2.default)(this.leafletElement);
93+
var _style;
94+
95+
var canAnimate = this.context.map.options.zoomAnimation && _leaflet2.default.Browser.any3d;
96+
var zoomClass = 'leaflet-zoom-' + (canAnimate ? 'animated' : 'hide');
97+
var mapSize = this.context.map.getSize();
98+
var transformProp = _leaflet2.default.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']);
99+
100+
var canvasProps = {
101+
className: 'leaflet-heatmap-layer leaflet-layer ' + zoomClass,
102+
style: (_style = {}, _style[transformProp] = '50% 50%', _style),
103+
width: mapSize.x,
104+
height: mapSize.y
105+
};
106+
107+
this._el = _leaflet2.default.DomUtil.create('canvas', zoomClass);
108+
this._el.style[transformProp] = '50% 50%';
109+
this._el.width = mapSize.x;
110+
this._el.height = mapSize.y;
111+
112+
var el = this._el;
113+
114+
var element = _leaflet2.default.Layer.extend({
115+
onAdd: function onAdd(map) {
116+
map.getPanes().overlayPane.appendChild(el);
117+
},
118+
addTo: function addTo(map) {
119+
map.addLayer(this);
120+
return this;
121+
},
122+
onRemove: function onRemove(map) {
123+
map.getPanes().overlayPane.removeChild(el);
124+
}
125+
});
126+
127+
this.leafletElement = new element();
128+
_MapLayer.prototype.componentDidMount.call(this);
129+
this._heatmap = (0, _simpleheat2.default)(this._el);
130+
this.reset();
98131

99132
if (this.props.fitBoundsOnLoad) {
100133
this.fitBounds();
101134
}
102135

103136
this.attachEvents();
104137
this.updateHeatmapProps(this.getHeatmapProps(this.props));
105-
this.reset();
106138
};
107139

108140
HeatmapLayer.prototype.getMax = function getMax(props) {
@@ -155,7 +187,7 @@ var HeatmapLayer = function (_MapLayer) {
155187
};
156188

157189
HeatmapLayer.prototype.componentWillUnmount = function componentWillUnmount() {
158-
this.props.map.getPanes().overlayPane.removeChild(this.leafletElement);
190+
this.context.map.getPanes().overlayPane.removeChild(this._el);
159191
};
160192

161193
HeatmapLayer.prototype.fitBounds = function fitBounds() {
@@ -169,11 +201,11 @@ var HeatmapLayer = function (_MapLayer) {
169201
return;
170202
}
171203

172-
this.props.map.fitBounds(_leaflet2.default.latLngBounds(_leaflet2.default.latLng(sw), _leaflet2.default.latLng(ne)));
204+
this.context.map.fitBounds(_leaflet2.default.latLngBounds(_leaflet2.default.latLng(sw), _leaflet2.default.latLng(ne)));
173205
};
174206

175207
HeatmapLayer.prototype.componentDidUpdate = function componentDidUpdate() {
176-
this.props.map.invalidateSize();
208+
this.context.map.invalidateSize();
177209
if (this.props.fitBoundsOnUpdate) {
178210
this.fitBounds();
179211
}
@@ -187,7 +219,7 @@ var HeatmapLayer = function (_MapLayer) {
187219
HeatmapLayer.prototype.attachEvents = function attachEvents() {
188220
var _this2 = this;
189221

190-
var map = this.props.map;
222+
var map = this.context.map;
191223
map.on('viewreset', function () {
192224
return _this2.reset();
193225
});
@@ -200,30 +232,30 @@ var HeatmapLayer = function (_MapLayer) {
200232
};
201233

202234
HeatmapLayer.prototype._animateZoom = function _animateZoom(e) {
203-
var scale = this.props.map.getZoomScale(e.zoom);
204-
var offset = this.props.map._getCenterOffset(e.center)._multiplyBy(-scale).subtract(this.props.map._getMapPanePos());
235+
var scale = this.context.map.getZoomScale(e.zoom);
236+
var offset = this.context.map._getCenterOffset(e.center)._multiplyBy(-scale).subtract(this.context.map._getMapPanePos());
205237

206238
if (_leaflet2.default.DomUtil.setTransform) {
207-
_leaflet2.default.DomUtil.setTransform(this.refs.container, offset, scale);
239+
_leaflet2.default.DomUtil.setTransform(this._el, offset, scale);
208240
} else {
209-
this.refs.container.style[_leaflet2.default.DomUtil.TRANSFORM] = _leaflet2.default.DomUtil.getTranslateString(offset) + ' scale(' + scale + ')';
241+
this._el.style[_leaflet2.default.DomUtil.TRANSFORM] = _leaflet2.default.DomUtil.getTranslateString(offset) + ' scale(' + scale + ')';
210242
}
211243
};
212244

213245
HeatmapLayer.prototype.reset = function reset() {
214-
var topLeft = this.props.map.containerPointToLayerPoint([0, 0]);
215-
_leaflet2.default.DomUtil.setPosition(this.refs.container, topLeft);
246+
var topLeft = this.context.map.containerPointToLayerPoint([0, 0]);
247+
_leaflet2.default.DomUtil.setPosition(this._el, topLeft);
216248

217-
var size = this.props.map.getSize();
249+
var size = this.context.map.getSize();
218250

219251
if (this._heatmap._width !== size.x) {
220-
this.refs.container.width = this._heatmap._width = size.x;
252+
this._el.width = this._heatmap._width = size.x;
221253
}
222254
if (this._heatmap._height !== size.y) {
223-
this.refs.container.height = this._heatmap._height = size.y;
255+
this._el.height = this._heatmap._height = size.y;
224256
}
225257

226-
if (this._heatmap && !this._frame && !this.props.map._animating) {
258+
if (this._heatmap && !this._frame && !this.context.map._animating) {
227259
this._frame = _leaflet2.default.Util.requestAnimFrame(this.redraw, this);
228260
}
229261

@@ -232,17 +264,17 @@ var HeatmapLayer = function (_MapLayer) {
232264

233265
HeatmapLayer.prototype.redraw = function redraw() {
234266
var r = this._heatmap._r;
235-
var size = this.props.map.getSize();
267+
var size = this.context.map.getSize();
236268

237269
var maxIntensity = this.props.max === undefined ? 1 : this.getMax(this.props);
238270

239-
var maxZoom = this.props.maxZoom === undefined ? this.props.map.getMaxZoom() : this.getMaxZoom(this.props);
271+
var maxZoom = this.props.maxZoom === undefined ? this.context.map.getMaxZoom() : this.getMaxZoom(this.props);
240272

241-
var v = 1 / Math.pow(2, Math.max(0, Math.min(maxZoom - this.props.map.getZoom(), 12)));
273+
var v = 1 / Math.pow(2, Math.max(0, Math.min(maxZoom - this.context.map.getZoom(), 12)));
242274

243275
var cellSize = r / 2;
244276
var grid = [];
245-
var panePos = this.props.map._getMapPanePos();
277+
var panePos = this.context.map._getMapPanePos();
246278
var offsetX = panePos.x % cellSize;
247279
var offsetY = panePos.y % cellSize;
248280
var getLat = this.props.latitudeExtractor;
@@ -310,7 +342,7 @@ var HeatmapLayer = function (_MapLayer) {
310342
var getDataForHeatmap = function getDataForHeatmap(points, leafletMap) {
311343
return roundResults(accumulateInGrid(points, leafletMap, getBounds(leafletMap)));
312344
};
313-
var data = getDataForHeatmap(this.props.points, this.props.map);
345+
var data = getDataForHeatmap(this.props.points, this.context.map);
314346

315347
this._heatmap.clear();
316348
this._heatmap.data(data).draw(this.getMinOpacity(this.props));
@@ -329,21 +361,7 @@ var HeatmapLayer = function (_MapLayer) {
329361
};
330362

331363
HeatmapLayer.prototype.render = function render() {
332-
var _style;
333-
334-
var mapSize = this.props.map.getSize();
335-
var transformProp = _leaflet2.default.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']);
336-
var canAnimate = this.props.map.options.zoomAnimation && _leaflet2.default.Browser.any3d;
337-
var zoomClass = 'leaflet-zoom-' + (canAnimate ? 'animated' : 'hide');
338-
339-
var canvasProps = {
340-
className: 'leaflet-heatmap-layer leaflet-layer ' + zoomClass,
341-
style: (_style = {}, _style[transformProp] = '50% 50%', _style),
342-
width: mapSize.x,
343-
height: mapSize.y
344-
};
345-
346-
return _react2.default.createElement('canvas', _extends({ ref: 'container' }, canvasProps));
364+
return null;
347365
};
348366

349367
return HeatmapLayer;

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@
2828
"author": "Jeremiah Hall <npm@jeremiahrhall.com>",
2929
"license": "MIT",
3030
"peerDependencies": {
31-
"leaflet": "^0.7.7",
32-
"react-leaflet": "^0.10.2",
33-
"react": "^0.14.7",
34-
"react-dom": "^0.14.7"
31+
"leaflet": "^1.0.2",
32+
"react-leaflet": "^1.0.0",
33+
"react": "^15.4.1",
34+
"react-dom": "^15.4.1"
3535
},
3636
"devDependencies": {
3737
"babel-cli": "^6.6.5",

0 commit comments

Comments
 (0)