Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-simple-maps

Package Overview
Dependencies
Maintainers
1
Versions
54
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-simple-maps - npm Package Compare versions

Comparing version 2.1.2 to 2.2.0

99

dist/index.es.js

@@ -5,5 +5,5 @@ import React, { createContext, useMemo, useCallback, useContext, useState, useEffect, memo, useRef, Fragment } from 'react';

import { geoPath as geoPath$1, geoGraticule } from 'd3-geo';
import { feature } from 'topojson-client';
import { feature, mesh } from 'topojson-client';
import { zoom, zoomIdentity } from 'd3-zoom';
import { select, event } from 'd3-selection';
import { select } from 'd3-selection';

@@ -220,3 +220,6 @@ var _extends = Object.assign || function (target) {

function getFeatures(geographies, parseGeographies) {
if (Array.isArray(geographies)) return parseGeographies ? parseGeographies(geographies) : geographies;
var isTopojson = geographies.type === "Topology";
if (!isTopojson) {
return parseGeographies ? parseGeographies(geographies.features || geographies) : geographies.features || geographies;
}
var feats = feature(geographies, geographies.objects[Object.keys(geographies.objects)[0]]).features;

@@ -226,2 +229,21 @@ return parseGeographies ? parseGeographies(feats) : feats;

function getMesh(geographies) {
var isTopojson = geographies.type === "Topology";
if (!isTopojson) return null;
var outline = mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
return a === b;
});
var borders = mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
return a !== b;
});
return { outline: outline, borders: borders };
}
function prepareMesh(outline, borders, path) {
return outline && borders ? {
outline: _extends({}, outline, { rsmKey: "outline", svgPath: path(outline) }),
borders: _extends({}, borders, { rsmKey: "borders", svgPath: path(borders) })
} : {};
}
function prepareFeatures(geographies, path) {

@@ -258,6 +280,6 @@ return geographies ? geographies.map(function (d, i) {

var _useState = useState(),
var _useState = useState({}),
_useState2 = slicedToArray(_useState, 2),
geographies = _useState2[0],
setGeographies = _useState2[1];
output = _useState2[0],
setOutput = _useState2[1];

@@ -267,16 +289,35 @@ useEffect(function () {

if (!geography) return;
if (isString(geography)) {
fetchGeographies(geography).then(function (geos) {
if (geos) setGeographies(getFeatures(geos, parseGeographies));
if (geos) {
setOutput({
geographies: getFeatures(geos, parseGeographies),
mesh: getMesh(geos)
});
}
});
} else {
setGeographies(getFeatures(geography, parseGeographies));
setOutput({
geographies: getFeatures(geography, parseGeographies),
mesh: getMesh(geography)
});
}
}, [geography, parseGeographies]);
var output = useMemo(function () {
return prepareFeatures(geographies, path);
}, [geographies, path]);
var _useMemo = useMemo(function () {
var mesh = output.mesh || {};
var preparedMesh = prepareMesh(mesh.outline, mesh.borders, path);
return {
geographies: prepareFeatures(output.geographies, path),
outline: preparedMesh.outline,
borders: preparedMesh.borders
};
}, [output, path]),
geographies = _useMemo.geographies,
outline = _useMemo.outline,
borders = _useMemo.borders;
return { geographies: output };
return { geographies: geographies, outline: outline, borders: borders };
}

@@ -297,3 +338,5 @@

var _useGeographies = useGeographies({ geography: geography, parseGeographies: parseGeographies }),
geographies = _useGeographies.geographies;
geographies = _useGeographies.geographies,
outline = _useGeographies.outline,
borders = _useGeographies.borders;

@@ -303,3 +346,3 @@ return React.createElement(

_extends({ className: "rsm-geographies " + className }, restProps),
geographies && geographies.length > 0 && children({ geographies: geographies, path: path, projection: projection })
geographies && geographies.length > 0 && children({ geographies: geographies, outline: outline, borders: borders, path: path, projection: projection })
);

@@ -481,18 +524,18 @@ };

function handleZoomStart() {
function handleZoomStart(d3Event) {
if (!onMoveStart || bypassEvents.current) return;
onMoveStart({ coordinates: projection.invert(getCoords(width, height, event.transform)), zoom: event.transform.k }, event);
onMoveStart({ coordinates: projection.invert(getCoords(width, height, d3Event.transform)), zoom: d3Event.transform.k }, d3Event);
}
function handleZoom() {
function handleZoom(d3Event) {
if (bypassEvents.current) return;
var transform = event.transform,
sourceEvent = event.sourceEvent;
var transform = d3Event.transform,
sourceEvent = d3Event.sourceEvent;
setPosition({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent });
if (!onMove) return;
onMove({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent }, event);
onMove({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent }, d3Event);
}
function handleZoomEnd() {
function handleZoomEnd(d3Event) {
if (bypassEvents.current) {

@@ -503,3 +546,3 @@ bypassEvents.current = false;

var _projection$invert = projection.invert(getCoords(width, height, event.transform)),
var _projection$invert = projection.invert(getCoords(width, height, d3Event.transform)),
_projection$invert2 = slicedToArray(_projection$invert, 2),

@@ -509,15 +552,15 @@ x = _projection$invert2[0],

lastPosition.current = { x: x, y: y, k: event.transform.k };
lastPosition.current = { x: x, y: y, k: d3Event.transform.k };
if (!onMoveEnd) return;
onMoveEnd({ coordinates: [x, y], zoom: event.transform.k }, event);
onMoveEnd({ coordinates: [x, y], zoom: d3Event.transform.k }, d3Event);
}
function filterFunc() {
function filterFunc(d3Event) {
if (filterZoomEvent) {
return filterZoomEvent(event);
return filterZoomEvent(d3Event);
}
return event ? !event.ctrlKey && !event.button : false;
return d3Event ? !d3Event.ctrlKey && !d3Event.button : false;
}
var zoom$1 = zoom().filter(filterFunc).scaleExtent([minZoom, maxZoom]).translateExtent([[a1, a1], [b1, b2]]).on("start", handleZoomStart).on("zoom", handleZoom).on("end", handleZoomEnd);
var zoom$1 = zoom().filter(filterFunc).scaleExtent([minZoom, maxZoom]).translateExtent([[a1, a2], [b1, b2]]).on("start", handleZoomStart).on("zoom", handleZoom).on("end", handleZoomEnd);

@@ -524,0 +567,0 @@ zoomRef.current = zoom$1;

@@ -225,3 +225,6 @@ 'use strict';

function getFeatures(geographies, parseGeographies) {
if (Array.isArray(geographies)) return parseGeographies ? parseGeographies(geographies) : geographies;
var isTopojson = geographies.type === "Topology";
if (!isTopojson) {
return parseGeographies ? parseGeographies(geographies.features || geographies) : geographies.features || geographies;
}
var feats = topojsonClient.feature(geographies, geographies.objects[Object.keys(geographies.objects)[0]]).features;

@@ -231,2 +234,21 @@ return parseGeographies ? parseGeographies(feats) : feats;

function getMesh(geographies) {
var isTopojson = geographies.type === "Topology";
if (!isTopojson) return null;
var outline = topojsonClient.mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
return a === b;
});
var borders = topojsonClient.mesh(geographies, geographies.objects[Object.keys(geographies.objects)[0]], function (a, b) {
return a !== b;
});
return { outline: outline, borders: borders };
}
function prepareMesh(outline, borders, path) {
return outline && borders ? {
outline: _extends({}, outline, { rsmKey: "outline", svgPath: path(outline) }),
borders: _extends({}, borders, { rsmKey: "borders", svgPath: path(borders) })
} : {};
}
function prepareFeatures(geographies, path) {

@@ -263,6 +285,6 @@ return geographies ? geographies.map(function (d, i) {

var _useState = React.useState(),
var _useState = React.useState({}),
_useState2 = slicedToArray(_useState, 2),
geographies = _useState2[0],
setGeographies = _useState2[1];
output = _useState2[0],
setOutput = _useState2[1];

@@ -272,16 +294,35 @@ React.useEffect(function () {

if (!geography) return;
if (isString(geography)) {
fetchGeographies(geography).then(function (geos) {
if (geos) setGeographies(getFeatures(geos, parseGeographies));
if (geos) {
setOutput({
geographies: getFeatures(geos, parseGeographies),
mesh: getMesh(geos)
});
}
});
} else {
setGeographies(getFeatures(geography, parseGeographies));
setOutput({
geographies: getFeatures(geography, parseGeographies),
mesh: getMesh(geography)
});
}
}, [geography, parseGeographies]);
var output = React.useMemo(function () {
return prepareFeatures(geographies, path);
}, [geographies, path]);
var _useMemo = React.useMemo(function () {
var mesh = output.mesh || {};
var preparedMesh = prepareMesh(mesh.outline, mesh.borders, path);
return {
geographies: prepareFeatures(output.geographies, path),
outline: preparedMesh.outline,
borders: preparedMesh.borders
};
}, [output, path]),
geographies = _useMemo.geographies,
outline = _useMemo.outline,
borders = _useMemo.borders;
return { geographies: output };
return { geographies: geographies, outline: outline, borders: borders };
}

@@ -302,3 +343,5 @@

var _useGeographies = useGeographies({ geography: geography, parseGeographies: parseGeographies }),
geographies = _useGeographies.geographies;
geographies = _useGeographies.geographies,
outline = _useGeographies.outline,
borders = _useGeographies.borders;

@@ -308,3 +351,3 @@ return React__default.createElement(

_extends({ className: "rsm-geographies " + className }, restProps),
geographies && geographies.length > 0 && children({ geographies: geographies, path: path, projection: projection })
geographies && geographies.length > 0 && children({ geographies: geographies, outline: outline, borders: borders, path: path, projection: projection })
);

@@ -486,18 +529,18 @@ };

function handleZoomStart() {
function handleZoomStart(d3Event) {
if (!onMoveStart || bypassEvents.current) return;
onMoveStart({ coordinates: projection.invert(getCoords(width, height, d3Selection.event.transform)), zoom: d3Selection.event.transform.k }, d3Selection.event);
onMoveStart({ coordinates: projection.invert(getCoords(width, height, d3Event.transform)), zoom: d3Event.transform.k }, d3Event);
}
function handleZoom() {
function handleZoom(d3Event) {
if (bypassEvents.current) return;
var transform = d3Selection.event.transform,
sourceEvent = d3Selection.event.sourceEvent;
var transform = d3Event.transform,
sourceEvent = d3Event.sourceEvent;
setPosition({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent });
if (!onMove) return;
onMove({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent }, d3Selection.event);
onMove({ x: transform.x, y: transform.y, k: transform.k, dragging: sourceEvent }, d3Event);
}
function handleZoomEnd() {
function handleZoomEnd(d3Event) {
if (bypassEvents.current) {

@@ -508,3 +551,3 @@ bypassEvents.current = false;

var _projection$invert = projection.invert(getCoords(width, height, d3Selection.event.transform)),
var _projection$invert = projection.invert(getCoords(width, height, d3Event.transform)),
_projection$invert2 = slicedToArray(_projection$invert, 2),

@@ -514,15 +557,15 @@ x = _projection$invert2[0],

lastPosition.current = { x: x, y: y, k: d3Selection.event.transform.k };
lastPosition.current = { x: x, y: y, k: d3Event.transform.k };
if (!onMoveEnd) return;
onMoveEnd({ coordinates: [x, y], zoom: d3Selection.event.transform.k }, d3Selection.event);
onMoveEnd({ coordinates: [x, y], zoom: d3Event.transform.k }, d3Event);
}
function filterFunc() {
function filterFunc(d3Event) {
if (filterZoomEvent) {
return filterZoomEvent(d3Selection.event);
return filterZoomEvent(d3Event);
}
return d3Selection.event ? !d3Selection.event.ctrlKey && !d3Selection.event.button : false;
return d3Event ? !d3Event.ctrlKey && !d3Event.button : false;
}
var zoom = d3Zoom.zoom().filter(filterFunc).scaleExtent([minZoom, maxZoom]).translateExtent([[a1, a1], [b1, b2]]).on("start", handleZoomStart).on("zoom", handleZoom).on("end", handleZoomEnd);
var zoom = d3Zoom.zoom().filter(filterFunc).scaleExtent([minZoom, maxZoom]).translateExtent([[a1, a2], [b1, b2]]).on("start", handleZoomStart).on("zoom", handleZoom).on("end", handleZoomEnd);

@@ -529,0 +572,0 @@ zoomRef.current = zoom;

@@ -1,1 +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=e||self).reactSimpleMaps=e.reactSimpleMaps||{},e.React,e.PropTypes,e.d3,e.topojson,e.d3,e.d3)}(this,function(e,t,o,n,r,a,s){"use strict";var i="default"in t?t.default:t;o=o&&o.hasOwnProperty("default")?o.default:o;var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},u=function(e,t){var o={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(o[n]=e[n]);return o},l=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var o=[],n=!0,r=!1,a=void 0;try{for(var s,i=e[Symbol.iterator]();!(n=(s=i.next()).done)&&(o.push(s.value),!t||o.length!==t);n=!0);}catch(e){r=!0,a=e}finally{try{!n&&i.return&&i.return()}finally{if(r)throw a}}return o}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},f=n.geoPath,p=u(n,["geoPath"]),d=t.createContext(),m=function(e){var o=e.width,n=e.height,r=e.projection,a=e.projectionConfig,s=u(e,["width","height","projection","projectionConfig"]),m=a.center||[],v=l(m,2),h=v[0],g=v[1],y=a.rotate||[],M=l(y,3),E=M[0],j=M[1],x=M[2],k=a.parallels||[],b=l(k,2),N=b[0],w=b[1],C=a.scale||null,S=t.useMemo(function(){return function(e){var t=e.projectionConfig,o=void 0===t?{}:t,n=e.projection,r=void 0===n?"geoEqualEarth":n,a=e.width,s=void 0===a?800:a,i=e.height,c=void 0===i?600:i;if("function"==typeof r)return r;var u=p[r]().translate([s/2,c/2]);return[u.center?"center":null,u.rotate?"rotate":null,u.scale?"scale":null,u.parallels?"parallels":null].forEach(function(e){e&&(u=u[e](o[e]||u[e]()))}),u}({projectionConfig:{center:h||0===h||g||0===g?[h,g]:null,rotate:E||0===E||j||0===j?[E,j,x]:null,parallels:N||0===N||w||0===w?[N,w]:null,scale:C},projection:r,width:o,height:n})},[o,n,r,h,g,E,j,x,N,w,C]),T=t.useCallback(S,[S]),O=t.useMemo(function(){return{width:o,height:n,projection:T,path:f().projection(T)}},[o,n,T]);return i.createElement(d.Provider,c({value:O},s))};m.propTypes={width:o.number,height:o.number,projection:o.oneOfType([o.string,o.func]),projectionConfig:o.object};var v=function(e){var t=e.width,o=void 0===t?800:t,n=e.height,r=void 0===n?600:n,a=e.projection,s=void 0===a?"geoEqualEarth":a,l=e.projectionConfig,f=void 0===l?{}:l,p=e.className,d=void 0===p?"":p,v=u(e,["width","height","projection","projectionConfig","className"]);return i.createElement(m,{width:o,height:r,projection:s,projectionConfig:f},i.createElement("svg",c({viewBox:"0 0 "+o+" "+r,className:"rsm-svg "+d},v)))};function h(e,t,o){var n=(e*o.k-e)/2,r=(t*o.k-t)/2;return[e/2-(n+o.x)/o.k,t/2-(r+o.y)/o.k]}function g(e,t){if(Array.isArray(e))return t?t(e):e;var o=r.feature(e,e.objects[Object.keys(e.objects)[0]]).features;return t?t(o):o}function y(e){var o=e.geography,n=e.parseGeographies,r=t.useContext(d).path,a=t.useState(),s=l(a,2),i=s[0],u=s[1];return t.useEffect(function(){var e;"undefined"!=typeof window&&("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&&u(g(e,n))}):u(g(o,n)))},[o,n]),{geographies:t.useMemo(function(){return function(e,t){return e?e.map(function(e,o){return c({},e,{rsmKey:"geo-"+o,svgPath:t(e)})}):[]}(i,r)},[i,r])}}v.propTypes={width:o.number,height:o.number,projection:o.oneOfType([o.string,o.func]),projectionConfig:o.object,className:o.string};var M=function(e){var o=e.geography,n=e.children,r=e.parseGeographies,a=e.className,s=void 0===a?"":a,l=u(e,["geography","children","parseGeographies","className"]),f=t.useContext(d),p=f.path,m=f.projection,v=y({geography:o,parseGeographies:r}).geographies;return i.createElement("g",c({className:"rsm-geographies "+s},l),v&&v.length>0&&n({geographies:v,path:p,projection:m}))};M.propTypes={geography:o.oneOfType([o.string,o.object,o.array]),children:o.func,parseGeographies:o.func,className:o.string};var E=function(e){var o=e.geography,n=e.onMouseEnter,r=e.onMouseLeave,a=e.onMouseDown,s=e.onMouseUp,f=e.onFocus,p=e.onBlur,d=e.style,m=void 0===d?{}:d,v=e.className,h=void 0===v?"":v,g=u(e,["geography","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"]),y=t.useState(!1),M=l(y,2),E=M[0],j=M[1],x=t.useState(!1),k=l(x,2),b=k[0],N=k[1];return i.createElement("path",c({tabIndex:"0",className:"rsm-geography "+h,d:o.svgPath,onMouseEnter:function(e){N(!0),n&&n(e)},onMouseLeave:function(e){N(!1),E&&j(!1),r&&r(e)},onFocus:function(e){N(!0),f&&f(e)},onBlur:function(e){N(!1),E&&j(!1),p&&p(e)},onMouseDown:function(e){j(!0),a&&a(e)},onMouseUp:function(e){j(!1),s&&s(e)},style:m[E||b?E?"pressed":"hover":"default"]},g))};E.propTypes={geography:o.object,onMouseEnter:o.func,onMouseLeave:o.func,onMouseDown:o.func,onMouseUp:o.func,onFocus:o.func,onBlur:o.func,style:o.object,className:o.string};var j=t.memo(E),x=function(e){var o=e.fill,r=void 0===o?"transparent":o,a=e.stroke,s=void 0===a?"currentcolor":a,l=e.step,f=void 0===l?[10,10]:l,p=e.className,m=void 0===p?"":p,v=u(e,["fill","stroke","step","className"]),h=t.useContext(d).path;return i.createElement("path",c({d:h(n.geoGraticule().step(f)()),fill:r,stroke:s,className:"rsm-graticule "+m},v))};x.propTypes={fill:o.string,stroke:o.string,step:o.array,className:o.string};var k=t.memo(x);function b(e){var o=e.center,n=e.filterZoomEvent,r=e.onMoveStart,i=e.onMoveEnd,c=e.onMove,u=e.translateExtent,f=void 0===u?[[-1/0,-1/0],[1/0,1/0]]:u,p=e.scaleExtent,m=void 0===p?[1,8]:p,v=e.zoom,g=void 0===v?1:v,y=t.useContext(d),M=y.width,E=y.height,j=y.projection,x=l(o,2),k=x[0],b=x[1],N=t.useState({x:0,y:0,k:1}),w=l(N,2),C=w[0],S=w[1],T=t.useRef({x:0,y:0,k:1}),O=t.useRef(),P=t.useRef(),z=t.useRef(!1),Z=l(f,2),G=Z[0],L=Z[1],B=l(G,2),F=B[0],q=B[1],D=l(L,2),U=D[0],W=D[1],A=l(m,2),R=A[0],I=A[1];return t.useEffect(function(){var e=s.select(O.current);var t=a.zoom().filter(function(){return n?n(s.event):!!s.event&&!s.event.ctrlKey&&!s.event.button}).scaleExtent([R,I]).translateExtent([[F,F],[U,W]]).on("start",function(){r&&!z.current&&r({coordinates:j.invert(h(M,E,s.event.transform)),zoom:s.event.transform.k},s.event)}).on("zoom",function(){if(!z.current){var e=s.event.transform,t=s.event.sourceEvent;S({x:e.x,y:e.y,k:e.k,dragging:t}),c&&c({x:e.x,y:e.y,k:e.k,dragging:t},s.event)}}).on("end",function(){if(z.current)z.current=!1;else{var e=j.invert(h(M,E,s.event.transform)),t=l(e,2),o=t[0],n=t[1];T.current={x:o,y:n,k:s.event.transform.k},i&&i({coordinates:[o,n],zoom:s.event.transform.k},s.event)}});P.current=t,e.call(t)},[M,E,F,q,U,W,R,I,j,r,c,i,n]),t.useEffect(function(){if(k!==T.current.x||b!==T.current.y||g!==T.current.k){var e=j([k,b]),t=e[0]*g,o=e[1]*g,n=s.select(O.current);z.current=!0,n.call(P.current.transform,a.zoomIdentity.translate(M/2-t,E/2-o).scale(g)),S({x:M/2-t,y:E/2-o,k:g}),T.current={x:k,y:b,k:g}}},[k,b,g,M,E,j]),{mapRef:O,position:C,transformString:"translate("+C.x+" "+C.y+") scale("+C.k+")"}}var N=function(e){var o=e.center,n=void 0===o?[0,0]:o,r=e.zoom,a=void 0===r?1:r,s=e.minZoom,l=void 0===s?1:s,f=e.maxZoom,p=void 0===f?8:f,m=e.translateExtent,v=e.filterZoomEvent,h=e.onMoveStart,g=e.onMove,y=e.onMoveEnd,M=e.className,E=u(e,["center","zoom","minZoom","maxZoom","translateExtent","filterZoomEvent","onMoveStart","onMove","onMoveEnd","className"]),j=t.useContext(d),x=j.width,k=j.height,N=b({center:n,filterZoomEvent:v,onMoveStart:h,onMove:g,onMoveEnd:y,scaleExtent:[l,p],translateExtent:m,zoom:a}),w=N.mapRef,C=N.transformString;return i.createElement("g",{ref:w},i.createElement("rect",{width:x,height:k,fill:"transparent"}),i.createElement("g",c({transform:C,className:"rsm-zoomable-group "+M},E)))};N.propTypes={center:o.array,zoom:o.number,minZoom:o.number,maxZoom:o.number,translateExtent:o.arrayOf(o.array),onMoveStart:o.func,onMove:o.func,onMoveEnd:o.func,className:o.string};var w=function(e){var o=e.id,n=void 0===o?"rsm-sphere":o,r=e.fill,a=void 0===r?"transparent":r,s=e.stroke,l=void 0===s?"currentcolor":s,f=e.strokeWidth,p=void 0===f?.5:f,m=e.className,v=void 0===m?"":m,h=u(e,["id","fill","stroke","strokeWidth","className"]),g=t.useContext(d).path,y=t.useMemo(function(){return g({type:"Sphere"})},[g]);return i.createElement(t.Fragment,null,i.createElement("defs",null,i.createElement("clipPath",{id:n},i.createElement("path",{d:y}))),i.createElement("path",c({d:y,fill:a,stroke:l,strokeWidth:p,style:{pointerEvents:"none"},className:"rsm-sphere "+v},h)))};w.propTypes={id:o.string,fill:o.string,stroke:o.string,strokeWidth:o.number,className:o.string};var C=t.memo(w),S=function(e){var o=e.coordinates,n=e.children,r=e.onMouseEnter,a=e.onMouseLeave,s=e.onMouseDown,f=e.onMouseUp,p=e.onFocus,m=e.onBlur,v=e.style,h=void 0===v?{}:v,g=e.className,y=void 0===g?"":g,M=u(e,["coordinates","children","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"]),E=t.useContext(d).projection,j=t.useState(!1),x=l(j,2),k=x[0],b=x[1],N=t.useState(!1),w=l(N,2),C=w[0],S=w[1],T=E(o),O=l(T,2),P=O[0],z=O[1];return i.createElement("g",c({transform:"translate("+P+", "+z+")",className:"rsm-marker "+y,onMouseEnter:function(e){S(!0),r&&r(e)},onMouseLeave:function(e){S(!1),k&&b(!1),a&&a(e)},onFocus:function(e){S(!0),p&&p(e)},onBlur:function(e){S(!1),k&&b(!1),m&&m(e)},onMouseDown:function(e){b(!0),s&&s(e)},onMouseUp:function(e){b(!1),f&&f(e)},style:h[k||C?k?"pressed":"hover":"default"]},M),n)};S.propTypes={coordinates:o.array,children:o.oneOfType([o.node,o.arrayOf(o.node)]),onMouseEnter:o.func,onMouseLeave:o.func,onMouseDown:o.func,onMouseUp:o.func,onFocus:o.func,onBlur:o.func,style:o.object,className:o.string};var T=function(e){var o=e.from,n=void 0===o?[0,0]:o,r=e.to,a=void 0===r?[0,0]:r,s=e.coordinates,l=e.stroke,f=void 0===l?"currentcolor":l,p=e.strokeWidth,m=void 0===p?3:p,v=e.fill,h=void 0===v?"transparent":v,g=e.className,y=void 0===g?"":g,M=u(e,["from","to","coordinates","stroke","strokeWidth","fill","className"]),E=t.useContext(d).path,j={type:"LineString",coordinates:s||[n,a]};return i.createElement("path",c({d:E(j),className:"rsm-line "+y,stroke:f,strokeWidth:m,fill:h},M))};T.propTypes={from:o.array,to:o.array,coordinates:o.array,stroke:o.string,strokeWidth:o.number,fill:o.string,className:o.string};var O=function(e){var o=e.subject,n=e.children,r=e.connectorProps,a=e.dx,s=void 0===a?30:a,f=e.dy,p=void 0===f?30:f,m=e.curve,v=void 0===m?0:m,h=e.className,g=void 0===h?"":h,y=u(e,["subject","children","connectorProps","dx","dy","curve","className"]),M=(0,t.useContext(d).projection)(o),E=l(M,2),j=E[0],x=E[1],k=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,n=Array.isArray(o)?o:[o,o];return"M0,0 Q"+(-e/2-e/2*n[0])+","+(-t/2+t/2*n[1])+" "+-e+","+-t}(s,p,v);return i.createElement("g",c({transform:"translate("+(j+s)+", "+(x+p)+")",className:"rsm-annotation "+g},y),i.createElement("path",c({d:k,fill:"transparent",stroke:"#000"},r)),n)};O.propTypes={subject:o.array,children:o.oneOfType([o.node,o.arrayOf(o.node)]),dx:o.number,dy:o.number,curve:o.number,connectorProps:o.object,className:o.string},e.Annotation=O,e.ComposableMap=v,e.Geographies=M,e.Geography=j,e.Graticule=k,e.Line=T,e.Marker=S,e.Sphere=C,e.ZoomableGroup=N,e.useGeographies=y,e.useZoomPan=b,Object.defineProperty(e,"__esModule",{value:!0})});
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(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"],o):o((e=e||self).reactSimpleMaps=e.reactSimpleMaps||{},e.React,e.PropTypes,e.d3,e.topojson,e.d3,e.d3)}(this,(function(e,o,t,r,n,a,s){"use strict";var i="default"in o?o.default:o;t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var c=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},u=function(e,o){var t={};for(var r in e)o.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},l=function(e,o){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,o){var t=[],r=!0,n=!1,a=void 0;try{for(var s,i=e[Symbol.iterator]();!(r=(s=i.next()).done)&&(t.push(s.value),!o||t.length!==o);r=!0);}catch(e){n=!0,a=e}finally{try{!r&&i.return&&i.return()}finally{if(n)throw a}}return t}(e,o);throw new TypeError("Invalid attempt to destructure non-iterable instance")},p=r.geoPath,f=u(r,["geoPath"]),d=o.createContext(),m=function(e){var t=e.width,r=e.height,n=e.projection,a=e.projectionConfig,s=u(e,["width","height","projection","projectionConfig"]),m=a.center||[],h=l(m,2),v=h[0],g=h[1],y=a.rotate||[],b=l(y,3),M=b[0],E=b[1],j=b[2],k=a.parallels||[],x=l(k,2),N=x[0],w=x[1],C=a.scale||null,O=o.useMemo((function(){return function(e){var o=e.projectionConfig,t=void 0===o?{}:o,r=e.projection,n=void 0===r?"geoEqualEarth":r,a=e.width,s=void 0===a?800:a,i=e.height,c=void 0===i?600:i;if("function"==typeof n)return n;var u=f[n]().translate([s/2,c/2]);return[u.center?"center":null,u.rotate?"rotate":null,u.scale?"scale":null,u.parallels?"parallels":null].forEach((function(e){e&&(u=u[e](t[e]||u[e]()))})),u}({projectionConfig:{center:v||0===v||g||0===g?[v,g]:null,rotate:M||0===M||E||0===E?[M,E,j]:null,parallels:N||0===N||w||0===w?[N,w]:null,scale:C},projection:n,width:t,height:r})}),[t,r,n,v,g,M,E,j,N,w,C]),T=o.useCallback(O,[O]),S=o.useMemo((function(){return{width:t,height:r,projection:T,path:p().projection(T)}}),[t,r,T]);return i.createElement(d.Provider,c({value:S},s))};m.propTypes={width:t.number,height:t.number,projection:t.oneOfType([t.string,t.func]),projectionConfig:t.object};var h=function(e){var o=e.width,t=void 0===o?800:o,r=e.height,n=void 0===r?600:r,a=e.projection,s=void 0===a?"geoEqualEarth":a,l=e.projectionConfig,p=void 0===l?{}:l,f=e.className,d=void 0===f?"":f,h=u(e,["width","height","projection","projectionConfig","className"]);return i.createElement(m,{width:t,height:n,projection:s,projectionConfig:p},i.createElement("svg",c({viewBox:"0 0 "+t+" "+n,className:"rsm-svg "+d},h)))};function v(e,o,t){var r=(e*t.k-e)/2,n=(o*t.k-o)/2;return[e/2-(r+t.x)/t.k,o/2-(n+t.y)/t.k]}function g(e,o){if(!("Topology"===e.type))return o?o(e.features||e):e.features||e;var t=n.feature(e,e.objects[Object.keys(e.objects)[0]]).features;return o?o(t):t}function y(e){return"Topology"===e.type?{outline:n.mesh(e,e.objects[Object.keys(e.objects)[0]],(function(e,o){return e===o})),borders:n.mesh(e,e.objects[Object.keys(e.objects)[0]],(function(e,o){return e!==o}))}:null}function b(e,o){return e?e.map((function(e,t){return c({},e,{rsmKey:"geo-"+t,svgPath:o(e)})})):[]}function M(e){var t=e.geography,r=e.parseGeographies,n=o.useContext(d).path,a=o.useState({}),s=l(a,2),i=s[0],u=s[1];o.useEffect((function(){var e;"undefined"!=typeof window&&(t&&("string"==typeof t?(e=t,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&&u({geographies:g(e,r),mesh:y(e)})})):u({geographies:g(t,r),mesh:y(t)})))}),[t,r]);var p=o.useMemo((function(){var e=i.mesh||{},o=function(e,o,t){return e&&o?{outline:c({},e,{rsmKey:"outline",svgPath:t(e)}),borders:c({},o,{rsmKey:"borders",svgPath:t(o)})}:{}}(e.outline,e.borders,n);return{geographies:b(i.geographies,n),outline:o.outline,borders:o.borders}}),[i,n]);return{geographies:p.geographies,outline:p.outline,borders:p.borders}}h.propTypes={width:t.number,height:t.number,projection:t.oneOfType([t.string,t.func]),projectionConfig:t.object,className:t.string};var E=function(e){var t=e.geography,r=e.children,n=e.parseGeographies,a=e.className,s=void 0===a?"":a,l=u(e,["geography","children","parseGeographies","className"]),p=o.useContext(d),f=p.path,m=p.projection,h=M({geography:t,parseGeographies:n}),v=h.geographies,g=h.outline,y=h.borders;return i.createElement("g",c({className:"rsm-geographies "+s},l),v&&v.length>0&&r({geographies:v,outline:g,borders:y,path:f,projection:m}))};E.propTypes={geography:t.oneOfType([t.string,t.object,t.array]),children:t.func,parseGeographies:t.func,className:t.string};var j=function(e){var t=e.geography,r=e.onMouseEnter,n=e.onMouseLeave,a=e.onMouseDown,s=e.onMouseUp,p=e.onFocus,f=e.onBlur,d=e.style,m=void 0===d?{}:d,h=e.className,v=void 0===h?"":h,g=u(e,["geography","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"]),y=o.useState(!1),b=l(y,2),M=b[0],E=b[1],j=o.useState(!1),k=l(j,2),x=k[0],N=k[1];return i.createElement("path",c({tabIndex:"0",className:"rsm-geography "+v,d:t.svgPath,onMouseEnter:function(e){N(!0),r&&r(e)},onMouseLeave:function(e){N(!1),M&&E(!1),n&&n(e)},onFocus:function(e){N(!0),p&&p(e)},onBlur:function(e){N(!1),M&&E(!1),f&&f(e)},onMouseDown:function(e){E(!0),a&&a(e)},onMouseUp:function(e){E(!1),s&&s(e)},style:m[M||x?M?"pressed":"hover":"default"]},g))};j.propTypes={geography:t.object,onMouseEnter:t.func,onMouseLeave:t.func,onMouseDown:t.func,onMouseUp:t.func,onFocus:t.func,onBlur:t.func,style:t.object,className:t.string};var k=o.memo(j),x=function(e){var t=e.fill,n=void 0===t?"transparent":t,a=e.stroke,s=void 0===a?"currentcolor":a,l=e.step,p=void 0===l?[10,10]:l,f=e.className,m=void 0===f?"":f,h=u(e,["fill","stroke","step","className"]),v=o.useContext(d).path;return i.createElement("path",c({d:v(r.geoGraticule().step(p)()),fill:n,stroke:s,className:"rsm-graticule "+m},h))};x.propTypes={fill:t.string,stroke:t.string,step:t.array,className:t.string};var N=o.memo(x);function w(e){var t=e.center,r=e.filterZoomEvent,n=e.onMoveStart,i=e.onMoveEnd,c=e.onMove,u=e.translateExtent,p=void 0===u?[[-1/0,-1/0],[1/0,1/0]]:u,f=e.scaleExtent,m=void 0===f?[1,8]:f,h=e.zoom,g=void 0===h?1:h,y=o.useContext(d),b=y.width,M=y.height,E=y.projection,j=l(t,2),k=j[0],x=j[1],N=o.useState({x:0,y:0,k:1}),w=l(N,2),C=w[0],O=w[1],T=o.useRef({x:0,y:0,k:1}),S=o.useRef(),P=o.useRef(),z=o.useRef(!1),Z=l(p,2),G=Z[0],L=Z[1],B=l(G,2),F=B[0],q=B[1],D=l(L,2),U=D[0],W=D[1],R=l(m,2),A=R[0],K=R[1];return o.useEffect((function(){var e=s.select(S.current);var o=a.zoom().filter((function(e){return r?r(e):!!e&&(!e.ctrlKey&&!e.button)})).scaleExtent([A,K]).translateExtent([[F,q],[U,W]]).on("start",(function(e){n&&!z.current&&n({coordinates:E.invert(v(b,M,e.transform)),zoom:e.transform.k},e)})).on("zoom",(function(e){if(!z.current){var o=e.transform,t=e.sourceEvent;O({x:o.x,y:o.y,k:o.k,dragging:t}),c&&c({x:o.x,y:o.y,k:o.k,dragging:t},e)}})).on("end",(function(e){if(z.current)z.current=!1;else{var o=E.invert(v(b,M,e.transform)),t=l(o,2),r=t[0],n=t[1];T.current={x:r,y:n,k:e.transform.k},i&&i({coordinates:[r,n],zoom:e.transform.k},e)}}));P.current=o,e.call(o)}),[b,M,F,q,U,W,A,K,E,n,c,i,r]),o.useEffect((function(){if(k!==T.current.x||x!==T.current.y||g!==T.current.k){var e=E([k,x]),o=e[0]*g,t=e[1]*g,r=s.select(S.current);z.current=!0,r.call(P.current.transform,a.zoomIdentity.translate(b/2-o,M/2-t).scale(g)),O({x:b/2-o,y:M/2-t,k:g}),T.current={x:k,y:x,k:g}}}),[k,x,g,b,M,E]),{mapRef:S,position:C,transformString:"translate("+C.x+" "+C.y+") scale("+C.k+")"}}var C=function(e){var t=e.center,r=void 0===t?[0,0]:t,n=e.zoom,a=void 0===n?1:n,s=e.minZoom,l=void 0===s?1:s,p=e.maxZoom,f=void 0===p?8:p,m=e.translateExtent,h=e.filterZoomEvent,v=e.onMoveStart,g=e.onMove,y=e.onMoveEnd,b=e.className,M=u(e,["center","zoom","minZoom","maxZoom","translateExtent","filterZoomEvent","onMoveStart","onMove","onMoveEnd","className"]),E=o.useContext(d),j=E.width,k=E.height,x=w({center:r,filterZoomEvent:h,onMoveStart:v,onMove:g,onMoveEnd:y,scaleExtent:[l,f],translateExtent:m,zoom:a}),N=x.mapRef,C=x.transformString;return i.createElement("g",{ref:N},i.createElement("rect",{width:j,height:k,fill:"transparent"}),i.createElement("g",c({transform:C,className:"rsm-zoomable-group "+b},M)))};C.propTypes={center:t.array,zoom:t.number,minZoom:t.number,maxZoom:t.number,translateExtent:t.arrayOf(t.array),onMoveStart:t.func,onMove:t.func,onMoveEnd:t.func,className:t.string};var O=function(e){var t=e.id,r=void 0===t?"rsm-sphere":t,n=e.fill,a=void 0===n?"transparent":n,s=e.stroke,l=void 0===s?"currentcolor":s,p=e.strokeWidth,f=void 0===p?.5:p,m=e.className,h=void 0===m?"":m,v=u(e,["id","fill","stroke","strokeWidth","className"]),g=o.useContext(d).path,y=o.useMemo((function(){return g({type:"Sphere"})}),[g]);return i.createElement(o.Fragment,null,i.createElement("defs",null,i.createElement("clipPath",{id:r},i.createElement("path",{d:y}))),i.createElement("path",c({d:y,fill:a,stroke:l,strokeWidth:f,style:{pointerEvents:"none"},className:"rsm-sphere "+h},v)))};O.propTypes={id:t.string,fill:t.string,stroke:t.string,strokeWidth:t.number,className:t.string};var T=o.memo(O),S=function(e){var t=e.coordinates,r=e.children,n=e.onMouseEnter,a=e.onMouseLeave,s=e.onMouseDown,p=e.onMouseUp,f=e.onFocus,m=e.onBlur,h=e.style,v=void 0===h?{}:h,g=e.className,y=void 0===g?"":g,b=u(e,["coordinates","children","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","onFocus","onBlur","style","className"]),M=o.useContext(d).projection,E=o.useState(!1),j=l(E,2),k=j[0],x=j[1],N=o.useState(!1),w=l(N,2),C=w[0],O=w[1],T=M(t),S=l(T,2),P=S[0],z=S[1];return i.createElement("g",c({transform:"translate("+P+", "+z+")",className:"rsm-marker "+y,onMouseEnter:function(e){O(!0),n&&n(e)},onMouseLeave:function(e){O(!1),k&&x(!1),a&&a(e)},onFocus:function(e){O(!0),f&&f(e)},onBlur:function(e){O(!1),k&&x(!1),m&&m(e)},onMouseDown:function(e){x(!0),s&&s(e)},onMouseUp:function(e){x(!1),p&&p(e)},style:v[k||C?k?"pressed":"hover":"default"]},b),r)};S.propTypes={coordinates:t.array,children:t.oneOfType([t.node,t.arrayOf(t.node)]),onMouseEnter:t.func,onMouseLeave:t.func,onMouseDown:t.func,onMouseUp:t.func,onFocus:t.func,onBlur:t.func,style:t.object,className:t.string};var P=function(e){var t=e.from,r=void 0===t?[0,0]:t,n=e.to,a=void 0===n?[0,0]:n,s=e.coordinates,l=e.stroke,p=void 0===l?"currentcolor":l,f=e.strokeWidth,m=void 0===f?3:f,h=e.fill,v=void 0===h?"transparent":h,g=e.className,y=void 0===g?"":g,b=u(e,["from","to","coordinates","stroke","strokeWidth","fill","className"]),M=o.useContext(d).path,E={type:"LineString",coordinates:s||[r,a]};return i.createElement("path",c({d:M(E),className:"rsm-line "+y,stroke:p,strokeWidth:m,fill:v},b))};P.propTypes={from:t.array,to:t.array,coordinates:t.array,stroke:t.string,strokeWidth:t.number,fill:t.string,className:t.string};var z=function(e){var t=e.subject,r=e.children,n=e.connectorProps,a=e.dx,s=void 0===a?30:a,p=e.dy,f=void 0===p?30:p,m=e.curve,h=void 0===m?0:m,v=e.className,g=void 0===v?"":v,y=u(e,["subject","children","connectorProps","dx","dy","curve","className"]),b=(0,o.useContext(d).projection)(t),M=l(b,2),E=M[0],j=M[1],k=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:30,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:30,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:.5,r=Array.isArray(t)?t:[t,t],n=e/2*r[0],a=o/2*r[1];return"M0,0 Q"+(-e/2-n)+","+(-o/2+a)+" "+-e+","+-o}(s,f,h);return i.createElement("g",c({transform:"translate("+(E+s)+", "+(j+f)+")",className:"rsm-annotation "+g},y),i.createElement("path",c({d:k,fill:"transparent",stroke:"#000"},n)),r)};z.propTypes={subject:t.array,children:t.oneOfType([t.node,t.arrayOf(t.node)]),dx:t.number,dy:t.number,curve:t.number,connectorProps:t.object,className:t.string},e.Annotation=z,e.ComposableMap=h,e.Geographies=E,e.Geography=k,e.Graticule=N,e.Line=P,e.Marker=S,e.Sphere=T,e.ZoomableGroup=C,e.useGeographies=M,e.useZoomPan=w,Object.defineProperty(e,"__esModule",{value:!0})}));
{
"name": "react-simple-maps",
"version": "2.1.2",
"version": "2.2.0",
"description": "An svg map chart component built with and for React",

@@ -49,4 +49,4 @@ "main": "dist/index.js",

"mocha": "^5.2.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"prop-types": "^15.7.2",

@@ -56,12 +56,12 @@ "react-test-utils": "^0.0.1"

"peerDependencies": {
"react": "^16.8.0",
"react-dom": "^16.8.0",
"react": "^16.8.0 || 17.x",
"react-dom": "^16.8.0 || 17.x",
"prop-types": "^15.7.2"
},
"dependencies": {
"d3-geo": "^1.11.9",
"d3-selection": "^1.4.1",
"d3-zoom": "^1.8.3",
"topojson-client": "^3.0.0"
"d3-geo": "^2.0.1",
"d3-selection": "^2.0.0",
"d3-zoom": "^2.0.0",
"topojson-client": "^3.1.0"
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc