From 8df6be67fd37c8523981c106a596797a63a7edb4 Mon Sep 17 00:00:00 2001
From: Richard Hull <rm_hull@yahoo.co.uk>
Date: Thu, 30 Nov 2017 10:14:27 -0500
Subject: [PATCH] [fix] Use 'deep-equal' to compare whether arrays are equal

Using `JSON.stringify()`, when a marker has a popup created with `L.popup()`,
rather than a straight string, then the following error is thrown:

    Uncaught TypeError: Converting circular structure to JSON
        at JSON.stringify (<anonymous>)
        at isArraysEqual

See https://github.com/YUzhva/react-leaflet-markercluster/issues/55
---
 dist/react-leaflet-markercluster.js     | 8 ++++++--
 dist/react-leaflet-markercluster.min.js | 2 +-
 package-lock.json                       | 5 ++---
 package.json                            | 3 +++
 src/react-leaflet-markercluster.js      | 3 ++-
 5 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/dist/react-leaflet-markercluster.js b/dist/react-leaflet-markercluster.js
index 4553eca..3231c88 100644
--- a/dist/react-leaflet-markercluster.js
+++ b/dist/react-leaflet-markercluster.js
@@ -20,6 +20,10 @@ var _leaflet = require('leaflet');
 
 var _leaflet2 = _interopRequireDefault(_leaflet);
 
+var _deepEqual = require('deep-equal');
+
+var _deepEqual2 = _interopRequireDefault(_deepEqual);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -42,7 +46,7 @@ function havingDeprecatedProps(markers) {
 
 // NOTE: Helpers
 function isArraysEqual(firstArray, secondArray) {
-  return JSON.stringify(firstArray) === JSON.stringify(secondArray);
+  return firstArray.length === secondArray.length && (0, _deepEqual2.default)(firstArray, secondArray);
 }
 
 function removeMarkersWithSameCoordinates(markers) {
@@ -252,4 +256,4 @@ MarkerClusterGroup.propTypes = {
 
 MarkerClusterGroup.defaultProps = {
   markers: []
-};
+};
\ No newline at end of file
diff --git a/dist/react-leaflet-markercluster.min.js b/dist/react-leaflet-markercluster.min.js
index 562466a..5e1a1a5 100644
--- a/dist/react-leaflet-markercluster.min.js
+++ b/dist/react-leaflet-markercluster.min.js
@@ -1 +1 @@
-"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r}function _inherits(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)}function havingDeprecatedProps(e){return-1!==e.findIndex(function(e){return e.lat||e.lng})}function isArraysEqual(e,r){return JSON.stringify(e)===JSON.stringify(r)}function removeMarkersWithSameCoordinates(e){var r=[e[0]];return e.forEach(function(e){JSON.stringify(r).includes(JSON.stringify(e))||r.push(e)}),r}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var a=r[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(r,t,a){return t&&e(r.prototype,t),a&&e(r,a),r}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes),_reactLeaflet=require("react-leaflet"),_leaflet=require("leaflet"),_leaflet2=_interopRequireDefault(_leaflet);require("leaflet.markercluster"),require("./deprecated-styles.min.css");var MarkerClusterGroup=function(e){function r(){return _classCallCheck(this,r),_possibleConstructorReturn(this,(r.__proto__||Object.getPrototypeOf(r)).apply(this,arguments))}return _inherits(r,_reactLeaflet.LayerGroup),_createClass(r,[{key:"componentWillMount",value:function(){var e=this.props,r=e.markers,t=e.options;this.leafletElement=_leaflet2.default.markerClusterGroup(t),this.initMapClasses(),r.length&&(this.addLayersWithMarkersFromProps(r),havingDeprecatedProps(r)&&console.warn('[react-leaflet-markercluster] Warning: marker "lat: xx", "lng: xx" properties are deprecated and will be removed in v1.2.0. Please use "position: [lat, lng]" instead https://goo.gl/s7a6Cj')),this.initEventListeners(this.leafletElement)}},{key:"componentWillReceiveProps",value:function(e){isArraysEqual(this.props.markers,e.markers)||(this.layerContainer.removeLayer(this.leafletElement),this.leafletElement.clearLayers(),e.markers.length&&this.addLayersWithMarkersFromProps(e.markers))}},{key:"initMapClasses",value:function(){var e=this.props.wrapperOptions;if(e){console.warn('[react-leaflet-markercluster] Warning: "wrapperOptions" property is deprecated and will be removed in v1.2.0. Please see: https://goo.gl/s7a6Cj');var r=this.context.map._container.className,t=-1!==r.indexOf("marker-cluster-styled"),a=-1!==r.indexOf("marker-cluster-animated");e.enableDefaultStyle&&!t&&(this.context.map._container.className+=" marker-cluster-styled"),e.disableDefaultAnimation||a||(this.context.map._container.className+=" marker-cluster-animated")}}},{key:"addLayersWithMarkersFromProps",value:function(e){var r=this.props,t=r.markerOptions,a=r.wrapperOptions,n=r.children,o=t?Object.assign({},t):{},s=[];(a&&a.removeDuplicates?removeMarkersWithSameCoordinates(e):e).forEach(function(e){var r=e.options?Object.assign({},e.options):null,t=_leaflet2.default.marker(e.position||[e.lat,e.lng],r||o);e.popup&&t.bindPopup(e.popup),e.tooltip&&t.bindTooltip(e.tooltip),s.push(t)}),this.leafletElement.addLayers(s),n||this.layerContainer.addLayer(this.leafletElement)}},{key:"initEventListeners",value:function(e){var r=this;this.props.onMarkerClick&&e.on("click",function(e){r.props.onMarkerClick(e.layer)}),this.props.onClusterClick&&e.on("clusterclick",function(e){r.props.onClusterClick(e.layer)}),this.props.onPopupClose&&e.on("popupclose",function(e){r.props.onPopupClose(e.popup)})}},{key:"addLayersWithReactLeafletMarkers",value:function(){var e=this,r=[];return _react.Children.map(this.props.children,function(t,a){return(0,_react.cloneElement)(t,{ref:function(t){t&&(r.push(t.leafletElement),a!==e.props.children.length-1&&Array.isArray(e.props.children)||(e.leafletElement.addLayers(r),e.layerContainer.addLayer(e.leafletElement)))},key:"react-leaflet-marker-"+JSON.stringify(t.props.position)+"-"+a})})}},{key:"getLeafletElement",value:function(){return this.leafletElement}},{key:"render",value:function(){return this.props.children?_react2.default.createElement("section",{className:"marker-cluster-group"},this.addLayersWithReactLeafletMarkers()):null}}]),r}();exports.default=MarkerClusterGroup,MarkerClusterGroup.propTypes={markers:_propTypes2.default.arrayOf(_propTypes2.default.object),children:_propTypes2.default.node,options:_propTypes2.default.object,markerOptions:_propTypes2.default.object,wrapperOptions:_propTypes2.default.object,onMarkerClick:_propTypes2.default.func,onClusterClick:_propTypes2.default.func,onPopupClose:_propTypes2.default.func},MarkerClusterGroup.defaultProps={markers:[]};
+"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _classCallCheck(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r}function _inherits(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)}function havingDeprecatedProps(e){return-1!==e.findIndex(function(e){return e.lat||e.lng})}function isArraysEqual(e,r){return e.length===r.length&&(0,_deepEqual2.default)(e,r)}function removeMarkersWithSameCoordinates(e){var r=[e[0]];return e.forEach(function(e){JSON.stringify(r).includes(JSON.stringify(e))||r.push(e)}),r}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var a=r[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(r,t,a){return t&&e(r.prototype,t),a&&e(r,a),r}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes),_reactLeaflet=require("react-leaflet"),_leaflet=require("leaflet"),_leaflet2=_interopRequireDefault(_leaflet),_deepEqual=require("deep-equal"),_deepEqual2=_interopRequireDefault(_deepEqual);require("leaflet.markercluster"),require("./deprecated-styles.css");var MarkerClusterGroup=function(e){function r(){return _classCallCheck(this,r),_possibleConstructorReturn(this,(r.__proto__||Object.getPrototypeOf(r)).apply(this,arguments))}return _inherits(r,_reactLeaflet.LayerGroup),_createClass(r,[{key:"componentWillMount",value:function(){var e=this.props,r=e.markers,t=e.options;this.leafletElement=_leaflet2.default.markerClusterGroup(t),this.initMapClasses(),r.length&&(this.addLayersWithMarkersFromProps(r),havingDeprecatedProps(r)&&console.warn('[react-leaflet-markercluster] Warning: marker "lat: xx", "lng: xx" properties are deprecated and will be removed in v1.2.0. Please use "position: [lat, lng]" instead https://goo.gl/s7a6Cj')),this.initEventListeners(this.leafletElement)}},{key:"componentWillReceiveProps",value:function(e){isArraysEqual(this.props.markers,e.markers)||(this.layerContainer.removeLayer(this.leafletElement),this.leafletElement.clearLayers(),e.markers.length&&this.addLayersWithMarkersFromProps(e.markers))}},{key:"initMapClasses",value:function(){var e=this.props.wrapperOptions;if(e){console.warn('[react-leaflet-markercluster] Warning: "wrapperOptions" property is deprecated and will be removed in v1.2.0. Please see: https://goo.gl/s7a6Cj');var r=this.context.map._container.className,t=-1!==r.indexOf("marker-cluster-styled"),a=-1!==r.indexOf("marker-cluster-animated");e.enableDefaultStyle&&!t&&(this.context.map._container.className+=" marker-cluster-styled"),e.disableDefaultAnimation||a||(this.context.map._container.className+=" marker-cluster-animated")}}},{key:"addLayersWithMarkersFromProps",value:function(e){var r=this.props,t=r.markerOptions,a=r.wrapperOptions,n=r.children,o=t?Object.assign({},t):{},l=[];(a&&a.removeDuplicates?removeMarkersWithSameCoordinates(e):e).forEach(function(e){var r=e.options?Object.assign({},e.options):null,t=_leaflet2.default.marker(e.position||[e.lat,e.lng],r||o);e.popup&&t.bindPopup(e.popup),e.tooltip&&t.bindTooltip(e.tooltip),l.push(t)}),this.leafletElement.addLayers(l),n||this.layerContainer.addLayer(this.leafletElement)}},{key:"initEventListeners",value:function(e){var r=this;this.props.onMarkerClick&&e.on("click",function(e){r.props.onMarkerClick(e.layer)}),this.props.onClusterClick&&e.on("clusterclick",function(e){r.props.onClusterClick(e.layer)}),this.props.onPopupClose&&e.on("popupclose",function(e){r.props.onPopupClose(e.popup)})}},{key:"addLayersWithReactLeafletMarkers",value:function(){var e=this,r=[];return _react.Children.map(this.props.children,function(t,a){return(0,_react.cloneElement)(t,{ref:function(t){t&&(r.push(t.leafletElement),a!==e.props.children.length-1&&Array.isArray(e.props.children)||(e.leafletElement.addLayers(r),e.layerContainer.addLayer(e.leafletElement)))},key:"react-leaflet-marker-"+JSON.stringify(t.props.position)+"-"+a})})}},{key:"getLeafletElement",value:function(){return this.leafletElement}},{key:"render",value:function(){return this.props.children?_react2.default.createElement("section",{className:"marker-cluster-group"},this.addLayersWithReactLeafletMarkers()):null}}]),r}();exports.default=MarkerClusterGroup,MarkerClusterGroup.propTypes={markers:_propTypes2.default.arrayOf(_propTypes2.default.object),children:_propTypes2.default.node,options:_propTypes2.default.object,markerOptions:_propTypes2.default.object,wrapperOptions:_propTypes2.default.object,onMarkerClick:_propTypes2.default.func,onClusterClick:_propTypes2.default.func,onPopupClose:_propTypes2.default.func},MarkerClusterGroup.defaultProps={markers:[]};
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9b036b3..3fe1f12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2433,8 +2433,7 @@
     "deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
-      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
-      "dev": true
+      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
     },
     "deep-is": {
       "version": "0.1.3",
@@ -10953,7 +10952,7 @@
       }
     },
     "react-highlight": {
-      "version": "github:briancappello/react-highlight#a1812a5842396f9561abaed4a9bc55c1cfd624d3",
+      "version": "github:briancappello/react-highlight#ecf53ae1bb03deddb897515e7ed65b9e9f7af65b",
       "dev": true,
       "requires": {
         "highlight.js": "9.12.0"
diff --git a/package.json b/package.json
index 23e2013..11d0c05 100644
--- a/package.json
+++ b/package.json
@@ -97,5 +97,8 @@
     "prop-types": "^15.5.7",
     "react": "^15.0.0 || ^16.0.0",
     "react-leaflet": "^1.4.0"
+  },
+  "dependencies": {
+    "deep-equal": "^1.0.1"
   }
 }
diff --git a/src/react-leaflet-markercluster.js b/src/react-leaflet-markercluster.js
index d54224a..6eab53f 100644
--- a/src/react-leaflet-markercluster.js
+++ b/src/react-leaflet-markercluster.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { LayerGroup } from 'react-leaflet';
 import L from 'leaflet';
+import deepEqual from 'deep-equal';
 
 require('leaflet.markercluster');
 
@@ -16,7 +17,7 @@ function havingDeprecatedProps(markers) {
 
 // NOTE: Helpers
 function isArraysEqual(firstArray, secondArray) {
-  return (JSON.stringify(firstArray) === JSON.stringify(secondArray));
+  return firstArray.length === secondArray.length && deepEqual(firstArray, secondArray);
 }
 
 function removeMarkersWithSameCoordinates(markers) {