get example working and some lint fixes

Author: evansiroky

lib/HeatmapLayer.js

@@ -6,10 +6,6 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
 var _lodash = require('lodash.map');
 
 var _lodash2 = _interopRequireDefault(_lodash);
@@ -68,9 +64,9 @@ function isInvalidLatLngArray(arr) {
   return !isValidLatLngArray(arr);
 }
 
-function safeRemoveLayer(map, el) {
-  var _map$getPanes = map.getPanes(),
-      overlayPane = _map$getPanes.overlayPane;
+function safeRemoveLayer(leafletMap, el) {
+  var _leafletMap$getPanes = leafletMap.getPanes(),
+      overlayPane = _leafletMap$getPanes.overlayPane;
 
   if (overlayPane.contains(el)) {
     overlayPane.removeChild(el);
@@ -95,41 +91,34 @@ var HeatmapLayer = function (_MapLayer) {
   };
 
   HeatmapLayer.prototype.componentDidMount = function componentDidMount() {
-    var _style;
+    var _this2 = this;
 
     var canAnimate = this.context.map.options.zoomAnimation && _leaflet2.default.Browser.any3d;
     var zoomClass = 'leaflet-zoom-' + (canAnimate ? 'animated' : 'hide');
     var mapSize = this.context.map.getSize();
     var transformProp = _leaflet2.default.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']);
 
-    var canvasProps = {
-      className: 'leaflet-heatmap-layer leaflet-layer ' + zoomClass,
-      style: (_style = {}, _style[transformProp] = '50% 50%', _style),
-      width: mapSize.x,
-      height: mapSize.y
-    };
-
     this._el = _leaflet2.default.DomUtil.create('canvas', zoomClass);
     this._el.style[transformProp] = '50% 50%';
     this._el.width = mapSize.x;
     this._el.height = mapSize.y;
 
     var el = this._el;
 
-    var element = _leaflet2.default.Layer.extend({
-      onAdd: function onAdd(map) {
-        map.getPanes().overlayPane.appendChild(el);
+    var Heatmap = _leaflet2.default.Layer.extend({
+      onAdd: function onAdd(leafletMap) {
+        return leafletMap.getPanes().overlayPane.appendChild(el);
       },
-      addTo: function addTo(map) {
-        map.addLayer(this);
-        return this;
+      addTo: function addTo(leafletMap) {
+        leafletMap.addLayer(_this2);
+        return _this2;
       },
-      onRemove: function onRemove(map) {
-        safeRemoveLayer(map, el);
+      onRemove: function onRemove(leafletMap) {
+        return safeRemoveLayer(leafletMap, el);
       }
     });
 
-    this.leafletElement = new element();
+    this.leafletElement = new Heatmap();
     _MapLayer.prototype.componentDidMount.call(this);
     this._heatmap = (0, _simpleheat2.default)(this._el);
     this.reset();
@@ -222,14 +211,14 @@ var HeatmapLayer = function (_MapLayer) {
   };
 
   HeatmapLayer.prototype.attachEvents = function attachEvents() {
-    var _this2 = this;
+    var _this3 = this;
 
     var leafletMap = this.props.map;
     leafletMap.on('viewreset', function () {
-      return _this2.reset();
+      return _this3.reset();
     });
     leafletMap.on('moveend', function () {
-      return _this2.reset();
+      return _this3.reset();
     });
     if (leafletMap.options.zoomAnimation && _leaflet2.default.Browser.any3d) {
       leafletMap.on('zoomanim', this._animateZoom, this);
@@ -241,9 +230,9 @@ var HeatmapLayer = function (_MapLayer) {
     var offset = this.context.map._getCenterOffset(e.center)._multiplyBy(-scale).subtract(this.context.map._getMapPanePos());
 
     if (_leaflet2.default.DomUtil.setTransform) {
-      _leaflet2.default.DomUtil.setTransform(this.refs.container, offset, scale);
+      _leaflet2.default.DomUtil.setTransform(this._el, offset, scale);
     } else {
-      this.refs.container.style[_leaflet2.default.DomUtil.TRANSFORM] = _leaflet2.default.DomUtil.getTranslateString(offset) + ' scale(' + scale + ')';
+      this._el.style[_leaflet2.default.DomUtil.TRANSFORM] = _leaflet2.default.DomUtil.getTranslateString(offset) + ' scale(' + scale + ')';
     }
   };
 
@@ -254,10 +243,10 @@ var HeatmapLayer = function (_MapLayer) {
     var size = this.context.map.getSize();
 
     if (this._heatmap._width !== size.x) {
-      this.refs.container.width = this._heatmap._width = size.x;
+      this._el.width = this._heatmap._width = size.x;
     }
     if (this._heatmap._height !== size.y) {
-      this.refs.container.height = this._heatmap._height = size.y;
+      this._el.height = this._heatmap._height = size.y;
     }
 
     if (this._heatmap && !this._frame && !this.props.map._animating) {

src/HeatmapLayer.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import map from 'lodash.map';
 import reduce from 'lodash.reduce';
 import filter from 'lodash.filter';
@@ -63,8 +62,8 @@ function isInvalidLatLngArray(arr: Array<number>): boolean {
   return !isValidLatLngArray(arr);
 }
 
-function safeRemoveLayer (map, el) {
-  const {overlayPane} = map.getPanes();
+function safeRemoveLayer(leafletMap: Map, el): void {
+  const { overlayPane } = leafletMap.getPanes();
   if (overlayPane.contains(el)) {
     overlayPane.removeChild(el);
   }
@@ -104,36 +103,23 @@ export default class HeatmapLayer extends MapLayer {
       ['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']
     );
 
-    const canvasProps = {
-      className: `leaflet-heatmap-layer leaflet-layer ${zoomClass}`,
-      style: {
-        [transformProp]: '50% 50%'
-      },
-      width: mapSize.x,
-      height: mapSize.y
-    };
-
     this._el = L.DomUtil.create('canvas', zoomClass);
-    this._el.style[transformProp] = '50% 50%'
+    this._el.style[transformProp] = '50% 50%';
     this._el.width = mapSize.x;
     this._el.height = mapSize.y;
 
-    var el = this._el
+    const el = this._el;
 
-    var element = L.Layer.extend({
-      onAdd: function (map) {
-        map.getPanes().overlayPane.appendChild(el);
-      },
-      addTo: function (map) {
-        map.addLayer(this);
+    const Heatmap = L.Layer.extend({
+      onAdd: (leafletMap) => leafletMap.getPanes().overlayPane.appendChild(el),
+      addTo: (leafletMap) => {
+        leafletMap.addLayer(this);
         return this;
       },
-      onRemove: function(map) {
-        safeRemoveLayer(map, el);
-      }
+      onRemove: (leafletMap) => safeRemoveLayer(leafletMap, el)
     });
 
-    this.leafletElement = new element();
+    this.leafletElement = new Heatmap();
     super.componentDidMount();
     this._heatmap = simpleheat(this._el);
     this.reset();
@@ -245,9 +231,9 @@ export default class HeatmapLayer extends MapLayer {
                       .subtract(this.context.map._getMapPanePos());
 
     if (L.DomUtil.setTransform) {
-      L.DomUtil.setTransform(this.refs.container, offset, scale);
+      L.DomUtil.setTransform(this._el, offset, scale);
     } else {
-      this.refs.container.style[L.DomUtil.TRANSFORM] =
+      this._el.style[L.DomUtil.TRANSFORM] =
           `${L.DomUtil.getTranslateString(offset)} scale(${scale})`;
     }
   }
@@ -259,10 +245,10 @@ export default class HeatmapLayer extends MapLayer {
     const size = this.context.map.getSize();
 
     if (this._heatmap._width !== size.x) {
-      this.refs.container.width = this._heatmap._width = size.x;
+      this._el.width = this._heatmap._width = size.x;
     }
     if (this._heatmap._height !== size.y) {
-      this.refs.container.height = this._heatmap._height = size.y;
+      this._el.height = this._heatmap._height = size.y;
     }
 
     if (this._heatmap && !this._frame && !this.props.map._animating) {