@salo/interactive-map
Version:
An SVG interactive map
207 lines (171 loc) • 6.79 kB
JavaScript
import _Reflect$construct from "@babel/runtime-corejs3/core-js-stable/reflect/construct";
import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
import _parseFloat from "@babel/runtime-corejs3/core-js-stable/parse-float";
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs3/helpers/createClass";
import _assertThisInitialized from "@babel/runtime-corejs3/helpers/assertThisInitialized";
import _inherits from "@babel/runtime-corejs3/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(_Reflect$construct(Date, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components'; // COMPONENTS
import Map from './_map'; // HELPERS
import { evalCoordinates, groupPoints as _groupPoints } from '../helpers';
var Wrapper = styled.div.withConfig({
displayName: "mercator__Wrapper",
componentId: "sc-178vk2d-0"
})(["position:relative;padding:", ";width:100%;margin:0 auto;overflow:hidden;"], function (_ref) {
var hideAntarctica = _ref.hideAntarctica;
return hideAntarctica ? '0 0 56%' : '0 0 75%';
});
var InnerWrapper = styled.div.withConfig({
displayName: "mercator__InnerWrapper",
componentId: "sc-178vk2d-1"
})(["position:absolute;top:0;left:0;padding:0 0 75%;width:100%;margin:0 auto;overflow:hidden;"]);
var MapWrapper = styled.div.withConfig({
displayName: "mercator__MapWrapper",
componentId: "sc-178vk2d-2"
})(["position:absolute;top:", ";left:", ";width:", ";height:", ";transition:all 0.3s linear;"], function (_ref2) {
var top = _ref2.top;
return top;
}, function (_ref3) {
var left = _ref3.left;
return left;
}, function (_ref4) {
var zoom = _ref4.zoom;
return zoom;
}, function (_ref5) {
var zoom = _ref5.zoom;
return zoom;
});
var MercatorMap = /*#__PURE__*/function (_React$Component) {
_inherits(MercatorMap, _React$Component);
var _super = _createSuper(MercatorMap);
function MercatorMap() {
var _context;
var _this;
_classCallCheck(this, MercatorMap);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, _concatInstanceProperty(_context = [this]).call(_context, args));
_defineProperty(_assertThisInitialized(_this), "calculateZoomSize", function () {
var zoom = _this.props.zoom;
if (!isNaN(_parseFloat(zoom))) {
return "".concat(_parseFloat(zoom) * 100, "%");
}
return '100%';
});
_defineProperty(_assertThisInitialized(_this), "calculatePosition", function (size) {
var _this$props = _this.props,
zoom = _this$props.zoom,
hideAntarctica = _this$props.hideAntarctica,
center = _this$props.center;
var factor = 100 - _parseInt(size, 10);
var _evalCoordinates = evalCoordinates(center),
x = _evalCoordinates.x,
y = _evalCoordinates.y; // HANDLE NO ZOOM
if (factor === 0) {
return {
left: '0',
top: '0'
};
} // KEEP CENTERED IF ZOOMED OUT
if (factor > 0) {
var position = "".concat(factor / 2, "%");
return {
left: position,
top: position
};
} // HANDLE ORIGIN ON ZOOM IN
var left = _parseFloat(x, 10);
var top = _parseFloat(y, 10); // Eval left position
if (left >= 0 && left <= 100) {
left = left * (zoom - 1) - (50 - left);
} else if (left > 100) {
left = (zoom - 1) * 100;
} else {
left = 0;
} // Eval top position
if (top >= 0 && top <= 100) {
if (hideAntarctica) {
top = top * (zoom - 1) - (50 - 12.5 - top);
} else {
top = top * (zoom - 1) - (50 - top);
}
} else if (top > 100) {
top = (zoom - 1) * (hideAntarctica ? 75 : 100);
} else {
top = 0;
}
return {
left: "-".concat(left, "%"),
top: "-".concat(top, "%")
};
});
return _this;
}
_createClass(MercatorMap, [{
key: "render",
value: function render() {
var _this$props2 = this.props,
children = _this$props2.children,
hideAntarctica = _this$props2.hideAntarctica,
baseColor = _this$props2.baseColor,
zoom = _this$props2.zoom,
stroke = _this$props2.stroke;
var size = this.calculateZoomSize();
var _this$calculatePositi = this.calculatePosition(size),
left = _this$calculatePositi.left,
top = _this$calculatePositi.top;
return /*#__PURE__*/React.createElement(Wrapper, {
hideAntarctica: hideAntarctica
}, /*#__PURE__*/React.createElement(InnerWrapper, null, /*#__PURE__*/React.createElement(MapWrapper, {
zoom: size,
left: left,
top: top
}, /*#__PURE__*/React.createElement(Map, {
hideAntarctica: hideAntarctica,
baseColor: baseColor,
stroke: stroke
}), children({
evalCoordinates: evalCoordinates,
groupPoints: function groupPoints(locations, radius) {
return _groupPoints({
locations: locations,
radius: radius,
zoom: zoom
});
}
}))));
}
}]);
return MercatorMap;
}(React.Component);
MercatorMap.defaultProps = {
hideAntarctica: true,
baseColor: '#cccccc',
stroke: '#fff',
zoom: 1,
center: {
lat: 0,
lon: 0
}
};
MercatorMap.propTypes = {
children: PropTypes.any.isRequired,
hideAntarctica: PropTypes.bool,
baseColor: PropTypes.string,
stroke: PropTypes.string,
zoom: PropTypes.number,
center: PropTypes.shape({
lat: PropTypes.number.isRequired,
lon: PropTypes.number.isRequired
})
};
export default MercatorMap;