react-simple-maps 3.0.0-beta.4 → 3.0.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
-
2
1
  <img src="https://img.shields.io/bundlephobia/minzip/react-simple-maps?color=%2328cb95&label=gzip" />
3
2
 
4
3
  # react-simple-maps
4
+
5
5
  Create beautiful SVG maps in react with d3-geo and topojson using a declarative api.
6
6
 
7
7
  Read the [docs](https://www.react-simple-maps.io/docs/getting-started/), or check out the [examples](https://www.react-simple-maps.io/examples/).
@@ -28,38 +28,36 @@ $ yarn add react-simple-maps
28
28
 
29
29
  ### Usage
30
30
 
31
- `React-simple-maps` exposes a set of components that can be combined to create svg maps with markers and annotations. In order to render a map you have to provide a reference to a valid topojson file. You can find example topojson files in the [`topojson-maps` folder](https://github.com/zcreativelabs/react-simple-maps/tree/master/topojson-maps) or on [topojson world-atlas](https://github.com/topojson/world-atlas). To learn how to make your own topojson maps from shapefiles, please read ["How to convert and prepare TopoJSON files for interactive mapping with d3"](https://hackernoon.com/how-to-convert-and-prepare-topojson-files-for-interactive-mapping-with-d3-499cf0ced5f) on medium.
31
+ `React-simple-maps` exposes a set of components that can be combined to create svg maps with markers and annotations. In order to render a map you have to provide a reference to a valid topojson file. You can find example topojson files on [here](https://github.com/topojson/world-atlas) or [here](https://github.com/deldersveld/topojson). To learn how to make your own topojson maps from shapefiles, please read ["How to convert and prepare TopoJSON files for interactive mapping with d3"](https://hackernoon.com/how-to-convert-and-prepare-topojson-files-for-interactive-mapping-with-d3-499cf0ced5f) on medium.
32
32
 
33
33
  ```jsx
34
- import React from "react"
35
- import ReactDOM from "react-dom"
36
- import {
37
- ComposableMap,
38
- Geographies,
39
- Geography,
40
- } from "react-simple-maps"
34
+ import React from "react";
35
+ import ReactDOM from "react-dom";
36
+ import { ComposableMap, Geographies, Geography } from "react-simple-maps";
41
37
 
42
38
  // url to a valid topojson file
43
39
  const geoUrl =
44
- "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json"
40
+ "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json";
45
41
 
46
42
  const App = () => {
47
43
  return (
48
44
  <div>
49
45
  <ComposableMap>
50
46
  <Geographies geography={geoUrl}>
51
- {({geographies}) => geographies.map(geo =>
52
- <Geography key={geo.rsmKey} geography={geo} />
53
- )}
47
+ {({ geographies }) =>
48
+ geographies.map((geo) => (
49
+ <Geography key={geo.rsmKey} geography={geo} />
50
+ ))
51
+ }
54
52
  </Geographies>
55
53
  </ComposableMap>
56
54
  </div>
57
- )
58
- }
55
+ );
56
+ };
59
57
 
60
58
  document.addEventListener("DOMContentLoaded", () => {
61
- ReactDOM.render(<App />, document.getElementById("app"))
62
- })
59
+ ReactDOM.render(<App />, document.getElementById("app"));
60
+ });
63
61
  ```
64
62
 
65
63
  Check out the [live example](https://codesandbox.io/s/basic-map-wvlol)
@@ -68,5 +66,16 @@ The above will render a world map using the [equal earth projection](https://obs
68
66
 
69
67
  For other examples and components, check out the [documentation](https://www.react-simple-maps.io/docs/getting-started).
70
68
 
69
+ ### Map files
70
+
71
+ React-simple-maps does not restrict you to one specific map and relies on custom map files that you can modify in any way necessary for the project. This means that you can visualise countries, regions, and continents in various resolutions, as long as they can be represented using geojson/topojson.
72
+
73
+ In order for this to work properly, you will however need to provide these valid map files to react-simple-maps yourself. Luckily, there are decent sources for map files on github and elsewhere. Here are some you can check out:
74
+
75
+ * [Natural Earth](https://github.com/nvkelso/natural-earth-vector)
76
+ * [Topojson maps by @deldersveld](https://github.com/deldersveld/topojson)
77
+ * [Topojson world atlas](https://github.com/topojson/world-atlas)
78
+
71
79
  ### License
80
+
72
81
  MIT licensed. Copyright (c) Richard Zimerman 2017. See [LICENSE.md](https://github.com/zcreativelabs/react-simple-maps/blob/master/LICENSE) for more details.
package/dist/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { createContext, useMemo, useCallback, useContext, useState, useEffect, memo, useRef, Fragment } from 'react';
1
+ import React, { createContext, useMemo, useCallback, forwardRef, useContext, useState, useEffect, memo, useRef, Fragment } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import * as d3Geo from 'd3-geo';
4
4
  import { geoGraticule } from 'd3-geo';
@@ -256,7 +256,7 @@ MapProvider.propTypes = {
256
256
 
257
257
  var _excluded$8 = ["width", "height", "projection", "projectionConfig", "className"];
258
258
 
259
- var ComposableMap = function ComposableMap(_ref) {
259
+ var ComposableMap = function ComposableMap(_ref, ref) {
260
260
  var _ref$width = _ref.width,
261
261
  width = _ref$width === void 0 ? 800 : _ref$width,
262
262
  _ref$height = _ref.height,
@@ -275,6 +275,7 @@ var ComposableMap = function ComposableMap(_ref) {
275
275
  projection: projection,
276
276
  projectionConfig: projectionConfig
277
277
  }, /*#__PURE__*/React.createElement("svg", _extends({
278
+ ref: ref,
278
279
  viewBox: "0 0 ".concat(width, " ").concat(height),
279
280
  className: "rsm-svg ".concat(className)
280
281
  }, restProps)));
@@ -287,6 +288,7 @@ ComposableMap.propTypes = {
287
288
  projectionConfig: PropTypes.object,
288
289
  className: PropTypes.string
289
290
  };
291
+ var ComposableMap$1 = forwardRef(ComposableMap);
290
292
 
291
293
  function getCoords(w, h, t) {
292
294
  var xOffset = (w * t.k - w) / 2;
@@ -416,7 +418,7 @@ function useGeographies(_ref) {
416
418
 
417
419
  var _excluded$7 = ["geography", "children", "parseGeographies", "className"];
418
420
 
419
- var Geographies = function Geographies(_ref) {
421
+ var Geographies = function Geographies(_ref, ref) {
420
422
  var geography = _ref.geography,
421
423
  children = _ref.children,
422
424
  parseGeographies = _ref.parseGeographies,
@@ -437,6 +439,7 @@ var Geographies = function Geographies(_ref) {
437
439
  borders = _useGeographies.borders;
438
440
 
439
441
  return /*#__PURE__*/React.createElement("g", _extends({
442
+ ref: ref,
440
443
  className: "rsm-geographies ".concat(className)
441
444
  }, restProps), geographies && geographies.length > 0 && children({
442
445
  geographies: geographies,
@@ -453,10 +456,11 @@ Geographies.propTypes = {
453
456
  parseGeographies: PropTypes.func,
454
457
  className: PropTypes.string
455
458
  };
459
+ var Geographies$1 = forwardRef(Geographies);
456
460
 
457
461
  var _excluded$6 = ["geography", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "style", "className"];
458
462
 
459
- var Geography = function Geography(_ref) {
463
+ var Geography = function Geography(_ref, ref) {
460
464
  var geography = _ref.geography,
461
465
  onMouseEnter = _ref.onMouseEnter,
462
466
  onMouseLeave = _ref.onMouseLeave,
@@ -513,6 +517,7 @@ var Geography = function Geography(_ref) {
513
517
  }
514
518
 
515
519
  return /*#__PURE__*/React.createElement("path", _extends({
520
+ ref: ref,
516
521
  tabIndex: "0",
517
522
  className: "rsm-geography ".concat(className),
518
523
  d: geography.svgPath,
@@ -537,11 +542,11 @@ Geography.propTypes = {
537
542
  style: PropTypes.object,
538
543
  className: PropTypes.string
539
544
  };
540
- var Geography$1 = memo(Geography);
545
+ var Geography$1 = memo(forwardRef(Geography));
541
546
 
542
547
  var _excluded$5 = ["fill", "stroke", "step", "className"];
543
548
 
544
- var Graticule = function Graticule(_ref) {
549
+ var Graticule = function Graticule(_ref, ref) {
545
550
  var _ref$fill = _ref.fill,
546
551
  fill = _ref$fill === void 0 ? "transparent" : _ref$fill,
547
552
  _ref$stroke = _ref.stroke,
@@ -556,6 +561,7 @@ var Graticule = function Graticule(_ref) {
556
561
  path = _useContext.path;
557
562
 
558
563
  return /*#__PURE__*/React.createElement("path", _extends({
564
+ ref: ref,
559
565
  d: path(geoGraticule().step(step)()),
560
566
  fill: fill,
561
567
  stroke: stroke,
@@ -569,7 +575,7 @@ Graticule.propTypes = {
569
575
  step: PropTypes.array,
570
576
  className: PropTypes.string
571
577
  };
572
- var Graticule$1 = memo(Graticule);
578
+ var Graticule$1 = memo(forwardRef(Graticule));
573
579
 
574
580
  function useZoomPan(_ref) {
575
581
  var center = _ref.center,
@@ -720,7 +726,7 @@ function useZoomPan(_ref) {
720
726
 
721
727
  var _excluded$4 = ["center", "zoom", "minZoom", "maxZoom", "translateExtent", "filterZoomEvent", "onMoveStart", "onMove", "onMoveEnd", "className"];
722
728
 
723
- var ZoomableGroup = function ZoomableGroup(_ref) {
729
+ var ZoomableGroup = function ZoomableGroup(_ref, ref) {
724
730
  var _ref$center = _ref.center,
725
731
  center = _ref$center === void 0 ? [0, 0] : _ref$center,
726
732
  _ref$zoom = _ref.zoom,
@@ -761,6 +767,7 @@ var ZoomableGroup = function ZoomableGroup(_ref) {
761
767
  height: height,
762
768
  fill: "transparent"
763
769
  }), /*#__PURE__*/React.createElement("g", _extends({
770
+ ref: ref,
764
771
  transform: transformString,
765
772
  className: "rsm-zoomable-group ".concat(className)
766
773
  }, restProps)));
@@ -777,10 +784,11 @@ ZoomableGroup.propTypes = {
777
784
  onMoveEnd: PropTypes.func,
778
785
  className: PropTypes.string
779
786
  };
787
+ var ZoomableGroup$1 = forwardRef(ZoomableGroup);
780
788
 
781
789
  var _excluded$3 = ["id", "fill", "stroke", "strokeWidth", "className"];
782
790
 
783
- var Sphere = function Sphere(_ref) {
791
+ var Sphere = function Sphere(_ref, ref) {
784
792
  var _ref$id = _ref.id,
785
793
  id = _ref$id === void 0 ? "rsm-sphere" : _ref$id,
786
794
  _ref$fill = _ref.fill,
@@ -806,6 +814,7 @@ var Sphere = function Sphere(_ref) {
806
814
  }, /*#__PURE__*/React.createElement("path", {
807
815
  d: spherePath
808
816
  }))), /*#__PURE__*/React.createElement("path", _extends({
817
+ ref: ref,
809
818
  d: spherePath,
810
819
  fill: fill,
811
820
  stroke: stroke,
@@ -824,11 +833,11 @@ Sphere.propTypes = {
824
833
  strokeWidth: PropTypes.number,
825
834
  className: PropTypes.string
826
835
  };
827
- var Sphere$1 = memo(Sphere);
836
+ var Sphere$1 = memo(forwardRef(Sphere));
828
837
 
829
838
  var _excluded$2 = ["coordinates", "children", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "style", "className"];
830
839
 
831
- var Marker = function Marker(_ref) {
840
+ var Marker = function Marker(_ref, ref) {
832
841
  var coordinates = _ref.coordinates,
833
842
  children = _ref.children,
834
843
  onMouseEnter = _ref.onMouseEnter,
@@ -894,6 +903,7 @@ var Marker = function Marker(_ref) {
894
903
  }
895
904
 
896
905
  return /*#__PURE__*/React.createElement("g", _extends({
906
+ ref: ref,
897
907
  transform: "translate(".concat(x, ", ").concat(y, ")"),
898
908
  className: "rsm-marker ".concat(className),
899
909
  onMouseEnter: handleMouseEnter,
@@ -918,10 +928,11 @@ Marker.propTypes = {
918
928
  style: PropTypes.object,
919
929
  className: PropTypes.string
920
930
  };
931
+ var Marker$1 = forwardRef(Marker);
921
932
 
922
933
  var _excluded$1 = ["from", "to", "coordinates", "stroke", "strokeWidth", "fill", "className"];
923
934
 
924
- var Line = function Line(_ref) {
935
+ var Line = function Line(_ref, ref) {
925
936
  var _ref$from = _ref.from,
926
937
  from = _ref$from === void 0 ? [0, 0] : _ref$from,
927
938
  _ref$to = _ref.to,
@@ -945,6 +956,7 @@ var Line = function Line(_ref) {
945
956
  coordinates: coordinates || [from, to]
946
957
  };
947
958
  return /*#__PURE__*/React.createElement("path", _extends({
959
+ ref: ref,
948
960
  d: path(lineData),
949
961
  className: "rsm-line ".concat(className),
950
962
  stroke: stroke,
@@ -962,10 +974,11 @@ Line.propTypes = {
962
974
  fill: PropTypes.string,
963
975
  className: PropTypes.string
964
976
  };
977
+ var Line$1 = forwardRef(Line);
965
978
 
966
979
  var _excluded = ["subject", "children", "connectorProps", "dx", "dy", "curve", "className"];
967
980
 
968
- var Annotation = function Annotation(_ref) {
981
+ var Annotation = function Annotation(_ref, ref) {
969
982
  var subject = _ref.subject,
970
983
  children = _ref.children,
971
984
  connectorProps = _ref.connectorProps,
@@ -989,6 +1002,7 @@ var Annotation = function Annotation(_ref) {
989
1002
 
990
1003
  var connectorPath = createConnectorPath(dx, dy, curve);
991
1004
  return /*#__PURE__*/React.createElement("g", _extends({
1005
+ ref: ref,
992
1006
  transform: "translate(".concat(x + dx, ", ").concat(y + dy, ")"),
993
1007
  className: "rsm-annotation ".concat(className)
994
1008
  }, restProps), /*#__PURE__*/React.createElement("path", _extends({
@@ -1007,5 +1021,6 @@ Annotation.propTypes = {
1007
1021
  connectorProps: PropTypes.object,
1008
1022
  className: PropTypes.string
1009
1023
  };
1024
+ var Annotation$1 = forwardRef(Annotation);
1010
1025
 
1011
- export { Annotation, ComposableMap, Geographies, Geography$1 as Geography, Graticule$1 as Graticule, Line, MapContext, MapProvider, Marker, Sphere$1 as Sphere, ZoomableGroup, useGeographies, useZoomPan };
1026
+ export { Annotation$1 as Annotation, ComposableMap$1 as ComposableMap, Geographies$1 as Geographies, Geography$1 as Geography, Graticule$1 as Graticule, Line$1 as Line, MapContext, MapProvider, Marker$1 as Marker, Sphere$1 as Sphere, ZoomableGroup$1 as ZoomableGroup, useGeographies, useZoomPan };
package/dist/index.js CHANGED
@@ -283,7 +283,7 @@ MapProvider.propTypes = {
283
283
 
284
284
  var _excluded$8 = ["width", "height", "projection", "projectionConfig", "className"];
285
285
 
286
- var ComposableMap = function ComposableMap(_ref) {
286
+ var ComposableMap = function ComposableMap(_ref, ref) {
287
287
  var _ref$width = _ref.width,
288
288
  width = _ref$width === void 0 ? 800 : _ref$width,
289
289
  _ref$height = _ref.height,
@@ -302,6 +302,7 @@ var ComposableMap = function ComposableMap(_ref) {
302
302
  projection: projection,
303
303
  projectionConfig: projectionConfig
304
304
  }, /*#__PURE__*/React__default["default"].createElement("svg", _extends({
305
+ ref: ref,
305
306
  viewBox: "0 0 ".concat(width, " ").concat(height),
306
307
  className: "rsm-svg ".concat(className)
307
308
  }, restProps)));
@@ -314,6 +315,7 @@ ComposableMap.propTypes = {
314
315
  projectionConfig: PropTypes__default["default"].object,
315
316
  className: PropTypes__default["default"].string
316
317
  };
318
+ var ComposableMap$1 = React.forwardRef(ComposableMap);
317
319
 
318
320
  function getCoords(w, h, t) {
319
321
  var xOffset = (w * t.k - w) / 2;
@@ -443,7 +445,7 @@ function useGeographies(_ref) {
443
445
 
444
446
  var _excluded$7 = ["geography", "children", "parseGeographies", "className"];
445
447
 
446
- var Geographies = function Geographies(_ref) {
448
+ var Geographies = function Geographies(_ref, ref) {
447
449
  var geography = _ref.geography,
448
450
  children = _ref.children,
449
451
  parseGeographies = _ref.parseGeographies,
@@ -464,6 +466,7 @@ var Geographies = function Geographies(_ref) {
464
466
  borders = _useGeographies.borders;
465
467
 
466
468
  return /*#__PURE__*/React__default["default"].createElement("g", _extends({
469
+ ref: ref,
467
470
  className: "rsm-geographies ".concat(className)
468
471
  }, restProps), geographies && geographies.length > 0 && children({
469
472
  geographies: geographies,
@@ -480,10 +483,11 @@ Geographies.propTypes = {
480
483
  parseGeographies: PropTypes__default["default"].func,
481
484
  className: PropTypes__default["default"].string
482
485
  };
486
+ var Geographies$1 = React.forwardRef(Geographies);
483
487
 
484
488
  var _excluded$6 = ["geography", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "style", "className"];
485
489
 
486
- var Geography = function Geography(_ref) {
490
+ var Geography = function Geography(_ref, ref) {
487
491
  var geography = _ref.geography,
488
492
  onMouseEnter = _ref.onMouseEnter,
489
493
  onMouseLeave = _ref.onMouseLeave,
@@ -540,6 +544,7 @@ var Geography = function Geography(_ref) {
540
544
  }
541
545
 
542
546
  return /*#__PURE__*/React__default["default"].createElement("path", _extends({
547
+ ref: ref,
543
548
  tabIndex: "0",
544
549
  className: "rsm-geography ".concat(className),
545
550
  d: geography.svgPath,
@@ -564,11 +569,11 @@ Geography.propTypes = {
564
569
  style: PropTypes__default["default"].object,
565
570
  className: PropTypes__default["default"].string
566
571
  };
567
- var Geography$1 = React.memo(Geography);
572
+ var Geography$1 = React.memo(React.forwardRef(Geography));
568
573
 
569
574
  var _excluded$5 = ["fill", "stroke", "step", "className"];
570
575
 
571
- var Graticule = function Graticule(_ref) {
576
+ var Graticule = function Graticule(_ref, ref) {
572
577
  var _ref$fill = _ref.fill,
573
578
  fill = _ref$fill === void 0 ? "transparent" : _ref$fill,
574
579
  _ref$stroke = _ref.stroke,
@@ -583,6 +588,7 @@ var Graticule = function Graticule(_ref) {
583
588
  path = _useContext.path;
584
589
 
585
590
  return /*#__PURE__*/React__default["default"].createElement("path", _extends({
591
+ ref: ref,
586
592
  d: path(d3Geo.geoGraticule().step(step)()),
587
593
  fill: fill,
588
594
  stroke: stroke,
@@ -596,7 +602,7 @@ Graticule.propTypes = {
596
602
  step: PropTypes__default["default"].array,
597
603
  className: PropTypes__default["default"].string
598
604
  };
599
- var Graticule$1 = React.memo(Graticule);
605
+ var Graticule$1 = React.memo(React.forwardRef(Graticule));
600
606
 
601
607
  function useZoomPan(_ref) {
602
608
  var center = _ref.center,
@@ -747,7 +753,7 @@ function useZoomPan(_ref) {
747
753
 
748
754
  var _excluded$4 = ["center", "zoom", "minZoom", "maxZoom", "translateExtent", "filterZoomEvent", "onMoveStart", "onMove", "onMoveEnd", "className"];
749
755
 
750
- var ZoomableGroup = function ZoomableGroup(_ref) {
756
+ var ZoomableGroup = function ZoomableGroup(_ref, ref) {
751
757
  var _ref$center = _ref.center,
752
758
  center = _ref$center === void 0 ? [0, 0] : _ref$center,
753
759
  _ref$zoom = _ref.zoom,
@@ -788,6 +794,7 @@ var ZoomableGroup = function ZoomableGroup(_ref) {
788
794
  height: height,
789
795
  fill: "transparent"
790
796
  }), /*#__PURE__*/React__default["default"].createElement("g", _extends({
797
+ ref: ref,
791
798
  transform: transformString,
792
799
  className: "rsm-zoomable-group ".concat(className)
793
800
  }, restProps)));
@@ -804,10 +811,11 @@ ZoomableGroup.propTypes = {
804
811
  onMoveEnd: PropTypes__default["default"].func,
805
812
  className: PropTypes__default["default"].string
806
813
  };
814
+ var ZoomableGroup$1 = React.forwardRef(ZoomableGroup);
807
815
 
808
816
  var _excluded$3 = ["id", "fill", "stroke", "strokeWidth", "className"];
809
817
 
810
- var Sphere = function Sphere(_ref) {
818
+ var Sphere = function Sphere(_ref, ref) {
811
819
  var _ref$id = _ref.id,
812
820
  id = _ref$id === void 0 ? "rsm-sphere" : _ref$id,
813
821
  _ref$fill = _ref.fill,
@@ -833,6 +841,7 @@ var Sphere = function Sphere(_ref) {
833
841
  }, /*#__PURE__*/React__default["default"].createElement("path", {
834
842
  d: spherePath
835
843
  }))), /*#__PURE__*/React__default["default"].createElement("path", _extends({
844
+ ref: ref,
836
845
  d: spherePath,
837
846
  fill: fill,
838
847
  stroke: stroke,
@@ -851,11 +860,11 @@ Sphere.propTypes = {
851
860
  strokeWidth: PropTypes__default["default"].number,
852
861
  className: PropTypes__default["default"].string
853
862
  };
854
- var Sphere$1 = React.memo(Sphere);
863
+ var Sphere$1 = React.memo(React.forwardRef(Sphere));
855
864
 
856
865
  var _excluded$2 = ["coordinates", "children", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "style", "className"];
857
866
 
858
- var Marker = function Marker(_ref) {
867
+ var Marker = function Marker(_ref, ref) {
859
868
  var coordinates = _ref.coordinates,
860
869
  children = _ref.children,
861
870
  onMouseEnter = _ref.onMouseEnter,
@@ -921,6 +930,7 @@ var Marker = function Marker(_ref) {
921
930
  }
922
931
 
923
932
  return /*#__PURE__*/React__default["default"].createElement("g", _extends({
933
+ ref: ref,
924
934
  transform: "translate(".concat(x, ", ").concat(y, ")"),
925
935
  className: "rsm-marker ".concat(className),
926
936
  onMouseEnter: handleMouseEnter,
@@ -945,10 +955,11 @@ Marker.propTypes = {
945
955
  style: PropTypes__default["default"].object,
946
956
  className: PropTypes__default["default"].string
947
957
  };
958
+ var Marker$1 = React.forwardRef(Marker);
948
959
 
949
960
  var _excluded$1 = ["from", "to", "coordinates", "stroke", "strokeWidth", "fill", "className"];
950
961
 
951
- var Line = function Line(_ref) {
962
+ var Line = function Line(_ref, ref) {
952
963
  var _ref$from = _ref.from,
953
964
  from = _ref$from === void 0 ? [0, 0] : _ref$from,
954
965
  _ref$to = _ref.to,
@@ -972,6 +983,7 @@ var Line = function Line(_ref) {
972
983
  coordinates: coordinates || [from, to]
973
984
  };
974
985
  return /*#__PURE__*/React__default["default"].createElement("path", _extends({
986
+ ref: ref,
975
987
  d: path(lineData),
976
988
  className: "rsm-line ".concat(className),
977
989
  stroke: stroke,
@@ -989,10 +1001,11 @@ Line.propTypes = {
989
1001
  fill: PropTypes__default["default"].string,
990
1002
  className: PropTypes__default["default"].string
991
1003
  };
1004
+ var Line$1 = React.forwardRef(Line);
992
1005
 
993
1006
  var _excluded = ["subject", "children", "connectorProps", "dx", "dy", "curve", "className"];
994
1007
 
995
- var Annotation = function Annotation(_ref) {
1008
+ var Annotation = function Annotation(_ref, ref) {
996
1009
  var subject = _ref.subject,
997
1010
  children = _ref.children,
998
1011
  connectorProps = _ref.connectorProps,
@@ -1016,6 +1029,7 @@ var Annotation = function Annotation(_ref) {
1016
1029
 
1017
1030
  var connectorPath = createConnectorPath(dx, dy, curve);
1018
1031
  return /*#__PURE__*/React__default["default"].createElement("g", _extends({
1032
+ ref: ref,
1019
1033
  transform: "translate(".concat(x + dx, ", ").concat(y + dy, ")"),
1020
1034
  className: "rsm-annotation ".concat(className)
1021
1035
  }, restProps), /*#__PURE__*/React__default["default"].createElement("path", _extends({
@@ -1034,17 +1048,18 @@ Annotation.propTypes = {
1034
1048
  connectorProps: PropTypes__default["default"].object,
1035
1049
  className: PropTypes__default["default"].string
1036
1050
  };
1051
+ var Annotation$1 = React.forwardRef(Annotation);
1037
1052
 
1038
- exports.Annotation = Annotation;
1039
- exports.ComposableMap = ComposableMap;
1040
- exports.Geographies = Geographies;
1053
+ exports.Annotation = Annotation$1;
1054
+ exports.ComposableMap = ComposableMap$1;
1055
+ exports.Geographies = Geographies$1;
1041
1056
  exports.Geography = Geography$1;
1042
1057
  exports.Graticule = Graticule$1;
1043
- exports.Line = Line;
1058
+ exports.Line = Line$1;
1044
1059
  exports.MapContext = MapContext;
1045
1060
  exports.MapProvider = MapProvider;
1046
- exports.Marker = Marker;
1061
+ exports.Marker = Marker$1;
1047
1062
  exports.Sphere = Sphere$1;
1048
- exports.ZoomableGroup = ZoomableGroup;
1063
+ exports.ZoomableGroup = ZoomableGroup$1;
1049
1064
  exports.useGeographies = useGeographies;
1050
1065
  exports.useZoomPan = useZoomPan;
package/dist/index.umd.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("d3-geo"),require("topojson-client"),require("d3-zoom"),require("d3-selection")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","d3-geo","topojson-client","d3-zoom","d3-selection"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).reactSimpleMaps=e.reactSimpleMaps||{},e.React,e.PropTypes,e.d3,e.topojson,e.d3,e.d3)}(this,(function(e,t,o,r,n,a,u){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,r.get?r:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,Object.freeze(t)}var l=s(t),i=s(o),f=c(r);function d(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),o.push.apply(o,r)}return o}function p(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?d(Object(o),!0).forEach((function(t){g(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):d(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function m(e){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},m(e)}function g(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function h(){return h=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},h.apply(this,arguments)}function v(e,t){if(null==e)return{};var o,r,n=function(e,t){if(null==e)return{};var o,r,n={},a=Object.keys(e);for(r=0;r<a.length;r++)o=a[r],t.indexOf(o)>=0||(n[o]=e[o]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)o=a[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(n[o]=e[o])}return n}function y(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==o)return;var r,n,a=[],u=!0,s=!1;try{for(o=o.call(e);!(u=(r=o.next()).done)&&(a.push(r.value),!t||a.length!==t);u=!0);}catch(e){s=!0,n=e}finally{try{u||null==o.return||o.return()}finally{if(s)throw n}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return b(e,t);var o=Object.prototype.toString.call(e).slice(8,-1);"Object"===o&&e.constructor&&(o=e.constructor.name);if("Map"===o||"Set"===o)return Array.from(e);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return b(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var o=0,r=new Array(t);o<t;o++)r[o]=e[o];return r}var j=["width","height","projection","projectionConfig"],M=f.geoPath,E=v(f,["geoPath"]),O=t.createContext(),k=function(e){var o=e.width,r=e.height,n=e.projection,a=e.projectionConfig,u=v(e,j),s=y(a.center||[],2),c=s[0],i=s[1],f=y(a.rotate||[],3),d=f[0],p=f[1],m=f[2],g=y(a.parallels||[],2),b=g[0],k=g[1],x=a.scale||null,w=t.useMemo((function(){return function(e){var t=e.projectionConfig,o=void 0===t?{}:t,r=e.projection,n=void 0===r?"geoEqualEarth":r,a=e.width,u=void 0===a?800:a,s=e.height,c=void 0===s?600:s;if("function"==typeof n)return n;var l=E[n]().translate([u/2,c/2]);return[l.center?"center":null,l.rotate?"rotate":null,l.scale?"scale":null,l.parallels?"parallels":null].forEach((function(e){e&&(l=l[e](o[e]||l[e]()))})),l}({projectionConfig:{center:c||0===c||i||0===i?[c,i]:null,rotate:d||0===d||p||0===p?[d,p,m]:null,parallels:b||0===b||k||0===k?[b,k]:null,scale:x},projection:n,width:o,height:r})}),[o,r,n,c,i,d,p,m,b,k,x]),N=t.useCallback(w,[w]),S=t.useMemo((function(){return{width:o,height:r,projection:N,path:M().projection(N)}}),[o,r,N]);return l.default.createElement(O.Provider,h({value:S},u))};k.propTypes={width:i.default.number,height:i.default.number,projection:i.default.oneOfType([i.default.string,i.default.func]),projectionConfig:i.default.object};var x=["width","height","projection","projectionConfig","className"],w=function(e){var t=e.width,o=void 0===t?800:t,r=e.height,n=void 0===r?600:r,a=e.projection,u=void 0===a?"geoEqualEarth":a,s=e.projectionConfig,c=void 0===s?{}:s,i=e.className,f=void 0===i?"":i,d=v(e,x);return l.default.createElement(k,{width:o,height:n,projection:u,projectionConfig:c},l.default.createElement("svg",h({viewBox:"0 0 ".concat(o," ").concat(n),className:"rsm-svg ".concat(f)},d)))};function N(e,t,o){var r=(e*o.k-e)/2,n=(t*o.k-t)/2;return[e/2-(r+o.x)/o.k,t/2-(n+o.y)/o.k]}function S(e,t){if(!("Topology"===e.type))return t?t(e.features||e):e.features||e;var o=n.feature(e,e.objects[Object.keys(e.objects)[0]]).features;return t?t(o):o}function P(e){return"Topology"===e.type?{outline:n.mesh(e,e.objects[Object.keys(e.objects)[0]],(function(e,t){return e===t})),borders:n.mesh(e,e.objects[Object.keys(e.objects)[0]],(function(e,t){return e!==t}))}:null}function C(e,t){return e?e.map((function(e,o){return p(p({},e),{},{rsmKey:"geo-".concat(o),svgPath:t(e)})})):[]}function T(e){var o=e.geography,r=e.parseGeographies,n=t.useContext(O).path,a=y(t.useState({}),2),u=a[0],s=a[1];t.useEffect((function(){var e;"undefined"!==("undefined"==typeof window?"undefined":m(window))&&(o&&("string"==typeof o?(e=o,fetch(e).then((function(e){if(!e.ok)throw Error(e.statusText);return e.json()})).catch((function(e){console.log("There was a problem when fetching the data: ",e)}))).then((function(e){e&&s({geographies:S(e,r),mesh:P(e)})})):s({geographies:S(o,r),mesh:P(o)})))}),[o,r]);var c=t.useMemo((function(){var e=u.mesh||{},t=function(e,t,o){return e&&t?{outline:p(p({},e),{},{rsmKey:"outline",svgPath:o(e)}),borders:p(p({},t),{},{rsmKey:"borders",svgPath:o(t)})}:{}}(e.outline,e.borders,n);return{geographies:C(u.geographies,n),outline:t.outline,borders:t.borders}}),[u,n]);return{geographies:c.geographies,outline:c.outline,borders:c.borders}}w.propTypes={width:i.default.number,height:i.default.number,projection:i.default.oneOfType([i.default.string,i.default.func]),projectionConfig:i.default.object,className:i.default.string};var z=["geography","children","parseGeographies","className"],D=function(e){var o=e.geography,r=e.children,n=e.parseGeographies,a=e.className,u=void 0===a?"":a,s=v(e,z),c=t.useContext(O),i=c.path,f=c.projection,d=T({geography:o,parseGeographies:n}),p=d.geographies,m=d.outline,g=d.borders;return l.default.createElement("g",h({className:"rsm-geographies ".concat(u)},s),p&&p.length>0&&r({geographies:p,outline:m,borders:g,path:i,projection:f}))};D.propTypes={geography:i.default.oneOfType([i.default.string,i.default.object,i.default.array]),children:i.default.func,parseGeographies:i.default.func,className:i.default.string};var Z=["geography","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"],G=function(e){var o=e.geography,r=e.onMouseEnter,n=e.onMouseLeave,a=e.onMouseDown,u=e.onMouseUp,s=e.onFocus,c=e.onBlur,i=e.style,f=void 0===i?{}:i,d=e.className,p=void 0===d?"":d,m=v(e,Z),g=y(t.useState(!1),2),b=g[0],j=g[1],M=y(t.useState(!1),2),E=M[0],O=M[1];return l.default.createElement("path",h({tabIndex:"0",className:"rsm-geography ".concat(p),d:o.svgPath,onMouseEnter:function(e){O(!0),r&&r(e)},onMouseLeave:function(e){O(!1),b&&j(!1),n&&n(e)},onFocus:function(e){O(!0),s&&s(e)},onBlur:function(e){O(!1),b&&j(!1),c&&c(e)},onMouseDown:function(e){j(!0),a&&a(e)},onMouseUp:function(e){j(!1),u&&u(e)},style:f[b||E?b?"pressed":"hover":"default"]},m))};G.propTypes={geography:i.default.object,onMouseEnter:i.default.func,onMouseLeave:i.default.func,onMouseDown:i.default.func,onMouseUp:i.default.func,onFocus:i.default.func,onBlur:i.default.func,style:i.default.object,className:i.default.string};var L=t.memo(G),A=["fill","stroke","step","className"],B=function(e){var o=e.fill,n=void 0===o?"transparent":o,a=e.stroke,u=void 0===a?"currentcolor":a,s=e.step,c=void 0===s?[10,10]:s,i=e.className,f=void 0===i?"":i,d=v(e,A),p=t.useContext(O).path;return l.default.createElement("path",h({d:p(r.geoGraticule().step(c)()),fill:n,stroke:u,className:"rsm-graticule ".concat(f)},d))};B.propTypes={fill:i.default.string,stroke:i.default.string,step:i.default.array,className:i.default.string};var F=t.memo(B);function U(e){var o=e.center,r=e.filterZoomEvent,n=e.onMoveStart,s=e.onMoveEnd,c=e.onMove,l=e.translateExtent,i=void 0===l?[[-1/0,-1/0],[1/0,1/0]]:l,f=e.scaleExtent,d=void 0===f?[1,8]:f,p=e.zoom,m=void 0===p?1:p,g=t.useContext(O),h=g.width,v=g.height,b=g.projection,j=y(o,2),M=j[0],E=j[1],k=y(t.useState({x:0,y:0,k:1}),2),x=k[0],w=k[1],S=t.useRef({x:0,y:0,k:1}),P=t.useRef(),C=t.useRef(),T=t.useRef(!1),z=y(i,2),D=z[0],Z=z[1],G=y(D,2),L=G[0],A=G[1],B=y(Z,2),F=B[0],U=B[1],q=y(d,2),W=q[0],R=q[1];return t.useEffect((function(){var e=u.select(P.current);var t=a.zoom().filter((function(e){return r?r(e):!!e&&(!e.ctrlKey&&!e.button)})).scaleExtent([W,R]).translateExtent([[L,A],[F,U]]).on("start",(function(e){n&&!T.current&&n({coordinates:b.invert(N(h,v,e.transform)),zoom:e.transform.k},e)})).on("zoom",(function(e){if(!T.current){var t=e.transform,o=e.sourceEvent;w({x:t.x,y:t.y,k:t.k,dragging:o}),c&&c({x:t.x,y:t.y,zoom:t.k,dragging:o},e)}})).on("end",(function(e){if(T.current)T.current=!1;else{var t=y(b.invert(N(h,v,e.transform)),2),o=t[0],r=t[1];S.current={x:o,y:r,k:e.transform.k},s&&s({coordinates:[o,r],zoom:e.transform.k},e)}}));C.current=t,e.call(t)}),[h,v,L,A,F,U,W,R,b,n,c,s,r]),t.useEffect((function(){if(M!==S.current.x||E!==S.current.y||m!==S.current.k){var e=b([M,E]),t=e[0]*m,o=e[1]*m,r=u.select(P.current);T.current=!0,r.call(C.current.transform,a.zoomIdentity.translate(h/2-t,v/2-o).scale(m)),w({x:h/2-t,y:v/2-o,k:m}),S.current={x:M,y:E,k:m}}}),[M,E,m,h,v,b]),{mapRef:P,position:x,transformString:"translate(".concat(x.x," ").concat(x.y,") scale(").concat(x.k,")")}}var q=["center","zoom","minZoom","maxZoom","translateExtent","filterZoomEvent","onMoveStart","onMove","onMoveEnd","className"],W=function(e){var o=e.center,r=void 0===o?[0,0]:o,n=e.zoom,a=void 0===n?1:n,u=e.minZoom,s=void 0===u?1:u,c=e.maxZoom,i=void 0===c?8:c,f=e.translateExtent,d=e.filterZoomEvent,p=e.onMoveStart,m=e.onMove,g=e.onMoveEnd,y=e.className,b=v(e,q),j=t.useContext(O),M=j.width,E=j.height,k=U({center:r,filterZoomEvent:d,onMoveStart:p,onMove:m,onMoveEnd:g,scaleExtent:[s,i],translateExtent:f,zoom:a}),x=k.mapRef,w=k.transformString;return l.default.createElement("g",{ref:x},l.default.createElement("rect",{width:M,height:E,fill:"transparent"}),l.default.createElement("g",h({transform:w,className:"rsm-zoomable-group ".concat(y)},b)))};W.propTypes={center:i.default.array,zoom:i.default.number,minZoom:i.default.number,maxZoom:i.default.number,translateExtent:i.default.arrayOf(i.default.array),onMoveStart:i.default.func,onMove:i.default.func,onMoveEnd:i.default.func,className:i.default.string};var R=["id","fill","stroke","strokeWidth","className"],I=function(e){var o=e.id,r=void 0===o?"rsm-sphere":o,n=e.fill,a=void 0===n?"transparent":n,u=e.stroke,s=void 0===u?"currentcolor":u,c=e.strokeWidth,i=void 0===c?.5:c,f=e.className,d=void 0===f?"":f,p=v(e,R),m=t.useContext(O).path,g=t.useMemo((function(){return m({type:"Sphere"})}),[m]);return l.default.createElement(t.Fragment,null,l.default.createElement("defs",null,l.default.createElement("clipPath",{id:r},l.default.createElement("path",{d:g}))),l.default.createElement("path",h({d:g,fill:a,stroke:s,strokeWidth:i,style:{pointerEvents:"none"},className:"rsm-sphere ".concat(d)},p)))};I.propTypes={id:i.default.string,fill:i.default.string,stroke:i.default.string,strokeWidth:i.default.number,className:i.default.string};var K=t.memo(I),_=["coordinates","children","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"],Q=function(e){var o=e.coordinates,r=e.children,n=e.onMouseEnter,a=e.onMouseLeave,u=e.onMouseDown,s=e.onMouseUp,c=e.onFocus,i=e.onBlur,f=e.style,d=void 0===f?{}:f,p=e.className,m=void 0===p?"":p,g=v(e,_),b=t.useContext(O).projection,j=y(t.useState(!1),2),M=j[0],E=j[1],k=y(t.useState(!1),2),x=k[0],w=k[1],N=y(b(o),2),S=N[0],P=N[1];return l.default.createElement("g",h({transform:"translate(".concat(S,", ").concat(P,")"),className:"rsm-marker ".concat(m),onMouseEnter:function(e){w(!0),n&&n(e)},onMouseLeave:function(e){w(!1),M&&E(!1),a&&a(e)},onFocus:function(e){w(!0),c&&c(e)},onBlur:function(e){w(!1),M&&E(!1),i&&i(e)},onMouseDown:function(e){E(!0),u&&u(e)},onMouseUp:function(e){E(!1),s&&s(e)},style:d[M||x?M?"pressed":"hover":"default"]},g),r)};Q.propTypes={coordinates:i.default.array,children:i.default.oneOfType([i.default.node,i.default.arrayOf(i.default.node)]),onMouseEnter:i.default.func,onMouseLeave:i.default.func,onMouseDown:i.default.func,onMouseUp:i.default.func,onFocus:i.default.func,onBlur:i.default.func,style:i.default.object,className:i.default.string};var $=["from","to","coordinates","stroke","strokeWidth","fill","className"],H=function(e){var o=e.from,r=void 0===o?[0,0]:o,n=e.to,a=void 0===n?[0,0]:n,u=e.coordinates,s=e.stroke,c=void 0===s?"currentcolor":s,i=e.strokeWidth,f=void 0===i?3:i,d=e.fill,p=void 0===d?"transparent":d,m=e.className,g=void 0===m?"":m,y=v(e,$),b=t.useContext(O).path,j={type:"LineString",coordinates:u||[r,a]};return l.default.createElement("path",h({d:b(j),className:"rsm-line ".concat(g),stroke:c,strokeWidth:f,fill:p},y))};H.propTypes={from:i.default.array,to:i.default.array,coordinates:i.default.array,stroke:i.default.string,strokeWidth:i.default.number,fill:i.default.string,className:i.default.string};var J=["subject","children","connectorProps","dx","dy","curve","className"],V=function(e){var o=e.subject,r=e.children,n=e.connectorProps,a=e.dx,u=void 0===a?30:a,s=e.dy,c=void 0===s?30:s,i=e.curve,f=void 0===i?0:i,d=e.className,p=void 0===d?"":d,m=v(e,J),g=y((0,t.useContext(O).projection)(o),2),b=g[0],j=g[1],M=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:30,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:30,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5,r=Array.isArray(o)?o:[o,o],n=e/2*r[0],a=t/2*r[1];return"M".concat(0,",",0," Q",-e/2-n,",").concat(-t/2+a," ").concat(-e,",").concat(-t)}(u,c,f);return l.default.createElement("g",h({transform:"translate(".concat(b+u,", ").concat(j+c,")"),className:"rsm-annotation ".concat(p)},m),l.default.createElement("path",h({d:M,fill:"transparent",stroke:"#000"},n)),r)};V.propTypes={subject:i.default.array,children:i.default.oneOfType([i.default.node,i.default.arrayOf(i.default.node)]),dx:i.default.number,dy:i.default.number,curve:i.default.number,connectorProps:i.default.object,className:i.default.string},e.Annotation=V,e.ComposableMap=w,e.Geographies=D,e.Geography=L,e.Graticule=F,e.Line=H,e.MapContext=O,e.MapProvider=k,e.Marker=Q,e.Sphere=K,e.ZoomableGroup=W,e.useGeographies=T,e.useZoomPan=U,Object.defineProperty(e,"__esModule",{value:!0})}));
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("d3-geo"),require("topojson-client"),require("d3-zoom"),require("d3-selection")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","d3-geo","topojson-client","d3-zoom","d3-selection"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).reactSimpleMaps=e.reactSimpleMaps||{},e.React,e.PropTypes,e.d3,e.topojson,e.d3,e.d3)}(this,(function(e,t,r,o,n,a,u){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=s(t),i=s(r),f=c(o);function d(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?d(Object(r),!0).forEach((function(t){g(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):d(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function m(e){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},m(e)}function g(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function h(){return h=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},h.apply(this,arguments)}function v(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}function y(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var o,n,a=[],u=!0,s=!1;try{for(r=r.call(e);!(u=(o=r.next()).done)&&(a.push(o.value),!t||a.length!==t);u=!0);}catch(e){s=!0,n=e}finally{try{u||null==r.return||r.return()}finally{if(s)throw n}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return b(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return b(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o}var j=["width","height","projection","projectionConfig"],M=f.geoPath,E=v(f,["geoPath"]),w=t.createContext(),O=function(e){var r=e.width,o=e.height,n=e.projection,a=e.projectionConfig,u=v(e,j),s=y(a.center||[],2),c=s[0],i=s[1],f=y(a.rotate||[],3),d=f[0],p=f[1],m=f[2],g=y(a.parallels||[],2),b=g[0],O=g[1],k=a.scale||null,x=t.useMemo((function(){return function(e){var t=e.projectionConfig,r=void 0===t?{}:t,o=e.projection,n=void 0===o?"geoEqualEarth":o,a=e.width,u=void 0===a?800:a,s=e.height,c=void 0===s?600:s;if("function"==typeof n)return n;var l=E[n]().translate([u/2,c/2]);return[l.center?"center":null,l.rotate?"rotate":null,l.scale?"scale":null,l.parallels?"parallels":null].forEach((function(e){e&&(l=l[e](r[e]||l[e]()))})),l}({projectionConfig:{center:c||0===c||i||0===i?[c,i]:null,rotate:d||0===d||p||0===p?[d,p,m]:null,parallels:b||0===b||O||0===O?[b,O]:null,scale:k},projection:n,width:r,height:o})}),[r,o,n,c,i,d,p,m,b,O,k]),N=t.useCallback(x,[x]),S=t.useMemo((function(){return{width:r,height:o,projection:N,path:M().projection(N)}}),[r,o,N]);return l.default.createElement(w.Provider,h({value:S},u))};O.propTypes={width:i.default.number,height:i.default.number,projection:i.default.oneOfType([i.default.string,i.default.func]),projectionConfig:i.default.object};var k=["width","height","projection","projectionConfig","className"],x=function(e,t){var r=e.width,o=void 0===r?800:r,n=e.height,a=void 0===n?600:n,u=e.projection,s=void 0===u?"geoEqualEarth":u,c=e.projectionConfig,i=void 0===c?{}:c,f=e.className,d=void 0===f?"":f,p=v(e,k);return l.default.createElement(O,{width:o,height:a,projection:s,projectionConfig:i},l.default.createElement("svg",h({ref:t,viewBox:"0 0 ".concat(o," ").concat(a),className:"rsm-svg ".concat(d)},p)))};x.propTypes={width:i.default.number,height:i.default.number,projection:i.default.oneOfType([i.default.string,i.default.func]),projectionConfig:i.default.object,className:i.default.string};var N=t.forwardRef(x);function S(e,t,r){var o=(e*r.k-e)/2,n=(t*r.k-t)/2;return[e/2-(o+r.x)/r.k,t/2-(n+r.y)/r.k]}function P(e,t){if(!("Topology"===e.type))return t?t(e.features||e):e.features||e;var r=n.feature(e,e.objects[Object.keys(e.objects)[0]]).features;return t?t(r):r}function C(e){return"Topology"===e.type?{outline:n.mesh(e,e.objects[Object.keys(e.objects)[0]],(function(e,t){return e===t})),borders:n.mesh(e,e.objects[Object.keys(e.objects)[0]],(function(e,t){return e!==t}))}:null}function T(e,t){return e?e.map((function(e,r){return p(p({},e),{},{rsmKey:"geo-".concat(r),svgPath:t(e)})})):[]}function R(e){var r=e.geography,o=e.parseGeographies,n=t.useContext(w).path,a=y(t.useState({}),2),u=a[0],s=a[1];t.useEffect((function(){var e;"undefined"!==("undefined"==typeof window?"undefined":m(window))&&(r&&("string"==typeof r?(e=r,fetch(e).then((function(e){if(!e.ok)throw Error(e.statusText);return e.json()})).catch((function(e){console.log("There was a problem when fetching the data: ",e)}))).then((function(e){e&&s({geographies:P(e,o),mesh:C(e)})})):s({geographies:P(r,o),mesh:C(r)})))}),[r,o]);var c=t.useMemo((function(){var e=u.mesh||{},t=function(e,t,r){return e&&t?{outline:p(p({},e),{},{rsmKey:"outline",svgPath:r(e)}),borders:p(p({},t),{},{rsmKey:"borders",svgPath:r(t)})}:{}}(e.outline,e.borders,n);return{geographies:T(u.geographies,n),outline:t.outline,borders:t.borders}}),[u,n]);return{geographies:c.geographies,outline:c.outline,borders:c.borders}}var z=["geography","children","parseGeographies","className"],D=function(e,r){var o=e.geography,n=e.children,a=e.parseGeographies,u=e.className,s=void 0===u?"":u,c=v(e,z),i=t.useContext(w),f=i.path,d=i.projection,p=R({geography:o,parseGeographies:a}),m=p.geographies,g=p.outline,y=p.borders;return l.default.createElement("g",h({ref:r,className:"rsm-geographies ".concat(s)},c),m&&m.length>0&&n({geographies:m,outline:g,borders:y,path:f,projection:d}))};D.propTypes={geography:i.default.oneOfType([i.default.string,i.default.object,i.default.array]),children:i.default.func,parseGeographies:i.default.func,className:i.default.string};var Z=t.forwardRef(D),G=["geography","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"],L=function(e,r){var o=e.geography,n=e.onMouseEnter,a=e.onMouseLeave,u=e.onMouseDown,s=e.onMouseUp,c=e.onFocus,i=e.onBlur,f=e.style,d=void 0===f?{}:f,p=e.className,m=void 0===p?"":p,g=v(e,G),b=y(t.useState(!1),2),j=b[0],M=b[1],E=y(t.useState(!1),2),w=E[0],O=E[1];return l.default.createElement("path",h({ref:r,tabIndex:"0",className:"rsm-geography ".concat(m),d:o.svgPath,onMouseEnter:function(e){O(!0),n&&n(e)},onMouseLeave:function(e){O(!1),j&&M(!1),a&&a(e)},onFocus:function(e){O(!0),c&&c(e)},onBlur:function(e){O(!1),j&&M(!1),i&&i(e)},onMouseDown:function(e){M(!0),u&&u(e)},onMouseUp:function(e){M(!1),s&&s(e)},style:d[j||w?j?"pressed":"hover":"default"]},g))};L.propTypes={geography:i.default.object,onMouseEnter:i.default.func,onMouseLeave:i.default.func,onMouseDown:i.default.func,onMouseUp:i.default.func,onFocus:i.default.func,onBlur:i.default.func,style:i.default.object,className:i.default.string};var A=t.memo(t.forwardRef(L)),B=["fill","stroke","step","className"],F=function(e,r){var n=e.fill,a=void 0===n?"transparent":n,u=e.stroke,s=void 0===u?"currentcolor":u,c=e.step,i=void 0===c?[10,10]:c,f=e.className,d=void 0===f?"":f,p=v(e,B),m=t.useContext(w).path;return l.default.createElement("path",h({ref:r,d:m(o.geoGraticule().step(i)()),fill:a,stroke:s,className:"rsm-graticule ".concat(d)},p))};F.propTypes={fill:i.default.string,stroke:i.default.string,step:i.default.array,className:i.default.string};var U=t.memo(t.forwardRef(F));function q(e){var r=e.center,o=e.filterZoomEvent,n=e.onMoveStart,s=e.onMoveEnd,c=e.onMove,l=e.translateExtent,i=void 0===l?[[-1/0,-1/0],[1/0,1/0]]:l,f=e.scaleExtent,d=void 0===f?[1,8]:f,p=e.zoom,m=void 0===p?1:p,g=t.useContext(w),h=g.width,v=g.height,b=g.projection,j=y(r,2),M=j[0],E=j[1],O=y(t.useState({x:0,y:0,k:1}),2),k=O[0],x=O[1],N=t.useRef({x:0,y:0,k:1}),P=t.useRef(),C=t.useRef(),T=t.useRef(!1),R=y(i,2),z=R[0],D=R[1],Z=y(z,2),G=Z[0],L=Z[1],A=y(D,2),B=A[0],F=A[1],U=y(d,2),q=U[0],W=U[1];return t.useEffect((function(){var e=u.select(P.current);var t=a.zoom().filter((function(e){return o?o(e):!!e&&(!e.ctrlKey&&!e.button)})).scaleExtent([q,W]).translateExtent([[G,L],[B,F]]).on("start",(function(e){n&&!T.current&&n({coordinates:b.invert(S(h,v,e.transform)),zoom:e.transform.k},e)})).on("zoom",(function(e){if(!T.current){var t=e.transform,r=e.sourceEvent;x({x:t.x,y:t.y,k:t.k,dragging:r}),c&&c({x:t.x,y:t.y,zoom:t.k,dragging:r},e)}})).on("end",(function(e){if(T.current)T.current=!1;else{var t=y(b.invert(S(h,v,e.transform)),2),r=t[0],o=t[1];N.current={x:r,y:o,k:e.transform.k},s&&s({coordinates:[r,o],zoom:e.transform.k},e)}}));C.current=t,e.call(t)}),[h,v,G,L,B,F,q,W,b,n,c,s,o]),t.useEffect((function(){if(M!==N.current.x||E!==N.current.y||m!==N.current.k){var e=b([M,E]),t=e[0]*m,r=e[1]*m,o=u.select(P.current);T.current=!0,o.call(C.current.transform,a.zoomIdentity.translate(h/2-t,v/2-r).scale(m)),x({x:h/2-t,y:v/2-r,k:m}),N.current={x:M,y:E,k:m}}}),[M,E,m,h,v,b]),{mapRef:P,position:k,transformString:"translate(".concat(k.x," ").concat(k.y,") scale(").concat(k.k,")")}}var W=["center","zoom","minZoom","maxZoom","translateExtent","filterZoomEvent","onMoveStart","onMove","onMoveEnd","className"],I=function(e,r){var o=e.center,n=void 0===o?[0,0]:o,a=e.zoom,u=void 0===a?1:a,s=e.minZoom,c=void 0===s?1:s,i=e.maxZoom,f=void 0===i?8:i,d=e.translateExtent,p=e.filterZoomEvent,m=e.onMoveStart,g=e.onMove,y=e.onMoveEnd,b=e.className,j=v(e,W),M=t.useContext(w),E=M.width,O=M.height,k=q({center:n,filterZoomEvent:p,onMoveStart:m,onMove:g,onMoveEnd:y,scaleExtent:[c,f],translateExtent:d,zoom:u}),x=k.mapRef,N=k.transformString;return l.default.createElement("g",{ref:x},l.default.createElement("rect",{width:E,height:O,fill:"transparent"}),l.default.createElement("g",h({ref:r,transform:N,className:"rsm-zoomable-group ".concat(b)},j)))};I.propTypes={center:i.default.array,zoom:i.default.number,minZoom:i.default.number,maxZoom:i.default.number,translateExtent:i.default.arrayOf(i.default.array),onMoveStart:i.default.func,onMove:i.default.func,onMoveEnd:i.default.func,className:i.default.string};var K=t.forwardRef(I),_=["id","fill","stroke","strokeWidth","className"],Q=function(e,r){var o=e.id,n=void 0===o?"rsm-sphere":o,a=e.fill,u=void 0===a?"transparent":a,s=e.stroke,c=void 0===s?"currentcolor":s,i=e.strokeWidth,f=void 0===i?.5:i,d=e.className,p=void 0===d?"":d,m=v(e,_),g=t.useContext(w).path,y=t.useMemo((function(){return g({type:"Sphere"})}),[g]);return l.default.createElement(t.Fragment,null,l.default.createElement("defs",null,l.default.createElement("clipPath",{id:n},l.default.createElement("path",{d:y}))),l.default.createElement("path",h({ref:r,d:y,fill:u,stroke:c,strokeWidth:f,style:{pointerEvents:"none"},className:"rsm-sphere ".concat(p)},m)))};Q.propTypes={id:i.default.string,fill:i.default.string,stroke:i.default.string,strokeWidth:i.default.number,className:i.default.string};var $=t.memo(t.forwardRef(Q)),H=["coordinates","children","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"],J=function(e,r){var o=e.coordinates,n=e.children,a=e.onMouseEnter,u=e.onMouseLeave,s=e.onMouseDown,c=e.onMouseUp,i=e.onFocus,f=e.onBlur,d=e.style,p=void 0===d?{}:d,m=e.className,g=void 0===m?"":m,b=v(e,H),j=t.useContext(w).projection,M=y(t.useState(!1),2),E=M[0],O=M[1],k=y(t.useState(!1),2),x=k[0],N=k[1],S=y(j(o),2),P=S[0],C=S[1];return l.default.createElement("g",h({ref:r,transform:"translate(".concat(P,", ").concat(C,")"),className:"rsm-marker ".concat(g),onMouseEnter:function(e){N(!0),a&&a(e)},onMouseLeave:function(e){N(!1),E&&O(!1),u&&u(e)},onFocus:function(e){N(!0),i&&i(e)},onBlur:function(e){N(!1),E&&O(!1),f&&f(e)},onMouseDown:function(e){O(!0),s&&s(e)},onMouseUp:function(e){O(!1),c&&c(e)},style:p[E||x?E?"pressed":"hover":"default"]},b),n)};J.propTypes={coordinates:i.default.array,children:i.default.oneOfType([i.default.node,i.default.arrayOf(i.default.node)]),onMouseEnter:i.default.func,onMouseLeave:i.default.func,onMouseDown:i.default.func,onMouseUp:i.default.func,onFocus:i.default.func,onBlur:i.default.func,style:i.default.object,className:i.default.string};var V=t.forwardRef(J),X=["from","to","coordinates","stroke","strokeWidth","fill","className"],Y=function(e,r){var o=e.from,n=void 0===o?[0,0]:o,a=e.to,u=void 0===a?[0,0]:a,s=e.coordinates,c=e.stroke,i=void 0===c?"currentcolor":c,f=e.strokeWidth,d=void 0===f?3:f,p=e.fill,m=void 0===p?"transparent":p,g=e.className,y=void 0===g?"":g,b=v(e,X),j=t.useContext(w).path,M={type:"LineString",coordinates:s||[n,u]};return l.default.createElement("path",h({ref:r,d:j(M),className:"rsm-line ".concat(y),stroke:i,strokeWidth:d,fill:m},b))};Y.propTypes={from:i.default.array,to:i.default.array,coordinates:i.default.array,stroke:i.default.string,strokeWidth:i.default.number,fill:i.default.string,className:i.default.string};var ee=t.forwardRef(Y),te=["subject","children","connectorProps","dx","dy","curve","className"],re=function(e,r){var o=e.subject,n=e.children,a=e.connectorProps,u=e.dx,s=void 0===u?30:u,c=e.dy,i=void 0===c?30:c,f=e.curve,d=void 0===f?0:f,p=e.className,m=void 0===p?"":p,g=v(e,te),b=y((0,t.useContext(w).projection)(o),2),j=b[0],M=b[1],E=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:30,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:30,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5,o=Array.isArray(r)?r:[r,r],n=e/2*o[0],a=t/2*o[1];return"M".concat(0,",",0," Q",-e/2-n,",").concat(-t/2+a," ").concat(-e,",").concat(-t)}(s,i,d);return l.default.createElement("g",h({ref:r,transform:"translate(".concat(j+s,", ").concat(M+i,")"),className:"rsm-annotation ".concat(m)},g),l.default.createElement("path",h({d:E,fill:"transparent",stroke:"#000"},a)),n)};re.propTypes={subject:i.default.array,children:i.default.oneOfType([i.default.node,i.default.arrayOf(i.default.node)]),dx:i.default.number,dy:i.default.number,curve:i.default.number,connectorProps:i.default.object,className:i.default.string};var oe=t.forwardRef(re);e.Annotation=oe,e.ComposableMap=N,e.Geographies=Z,e.Geography=A,e.Graticule=U,e.Line=ee,e.MapContext=w,e.MapProvider=O,e.Marker=V,e.Sphere=$,e.ZoomableGroup=K,e.useGeographies=R,e.useZoomPan=q,Object.defineProperty(e,"__esModule",{value:!0})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-simple-maps",
3
- "version": "3.0.0-beta.4",
3
+ "version": "3.0.0-beta.5",
4
4
  "description": "An svg map chart component built with and for React",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",