authscape 1.0.650 → 1.0.652
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/index.js +118 -0
- package/package.json +1 -1
- package/src/components/googleMaps.js +117 -0
package/index.js
CHANGED
|
@@ -2242,6 +2242,124 @@ var FileUploader = function FileUploader(_ref) {
|
|
|
2242
2242
|
exports.FileUploader = FileUploader;
|
|
2243
2243
|
"use strict";
|
|
2244
2244
|
|
|
2245
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2246
|
+
Object.defineProperty(exports, "__esModule", {
|
|
2247
|
+
value: true
|
|
2248
|
+
});
|
|
2249
|
+
exports.Overview = exports.GoogleMapsHeatmap = exports.GoogleMaps = void 0;
|
|
2250
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
2251
|
+
var _api = require("@react-google-maps/api");
|
|
2252
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
2253
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
2254
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2255
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
2256
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
2257
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
2258
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
2259
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
2260
|
+
var containerStyle = {
|
|
2261
|
+
width: '100%',
|
|
2262
|
+
height: '100%'
|
|
2263
|
+
};
|
|
2264
|
+
var center = {
|
|
2265
|
+
lat: 38,
|
|
2266
|
+
lng: -98
|
|
2267
|
+
};
|
|
2268
|
+
var GoogleMaps = function GoogleMaps(_ref) {
|
|
2269
|
+
var apiKey = _ref.apiKey,
|
|
2270
|
+
hasLoaded = _ref.hasLoaded,
|
|
2271
|
+
children = _ref.children;
|
|
2272
|
+
return /*#__PURE__*/_react["default"].createElement(_api.LoadScript, {
|
|
2273
|
+
googleMapsApiKey: apiKey,
|
|
2274
|
+
libraries: ['visualization']
|
|
2275
|
+
}, /*#__PURE__*/_react["default"].createElement(_api.GoogleMap, {
|
|
2276
|
+
mapContainerStyle: containerStyle,
|
|
2277
|
+
center: center,
|
|
2278
|
+
zoom: 5
|
|
2279
|
+
}, hasLoaded && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children)));
|
|
2280
|
+
};
|
|
2281
|
+
exports.GoogleMaps = GoogleMaps;
|
|
2282
|
+
var GoogleMapsHeatmap = function GoogleMapsHeatmap(_ref2) {
|
|
2283
|
+
var apiKey = _ref2.apiKey,
|
|
2284
|
+
_ref2$data = _ref2.data,
|
|
2285
|
+
data = _ref2$data === void 0 ? [] : _ref2$data,
|
|
2286
|
+
gradient = _ref2.gradient,
|
|
2287
|
+
_ref2$radius = _ref2.radius,
|
|
2288
|
+
radius = _ref2$radius === void 0 ? 50 : _ref2$radius,
|
|
2289
|
+
_ref2$opacity = _ref2.opacity,
|
|
2290
|
+
opacity = _ref2$opacity === void 0 ? 0.6 : _ref2$opacity,
|
|
2291
|
+
overlay = _ref2.overlay;
|
|
2292
|
+
var _useState = (0, _react.useState)(null),
|
|
2293
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
2294
|
+
heatmapData = _useState2[0],
|
|
2295
|
+
setHeatmapData = _useState2[1];
|
|
2296
|
+
var _useState3 = (0, _react.useState)(false),
|
|
2297
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
2298
|
+
hasLoaded = _useState4[0],
|
|
2299
|
+
setHasLoaded = _useState4[1];
|
|
2300
|
+
(0, _react.useEffect)(function () {
|
|
2301
|
+
if (window.google) {
|
|
2302
|
+
var mappingData = [];
|
|
2303
|
+
data.forEach(function (element) {
|
|
2304
|
+
mappingData.push({
|
|
2305
|
+
location: new google.maps.LatLng(element.lat, element.lng),
|
|
2306
|
+
weight: element.weight,
|
|
2307
|
+
data: element
|
|
2308
|
+
});
|
|
2309
|
+
});
|
|
2310
|
+
|
|
2311
|
+
// const data = [
|
|
2312
|
+
// { location: new google.maps.LatLng(35.6895, 139.6917), weight: 100 }, // Tokyo
|
|
2313
|
+
// { location: new google.maps.LatLng(34.0522, -118.2437), weight: 200 }, // Los Angeles
|
|
2314
|
+
// { location: new google.maps.LatLng(51.5074, -0.1278), weight: 500 }, // London
|
|
2315
|
+
// // Add more data points as needed
|
|
2316
|
+
// ];
|
|
2317
|
+
setHeatmapData(mappingData);
|
|
2318
|
+
}
|
|
2319
|
+
}, []);
|
|
2320
|
+
(0, _react.useEffect)(function () {
|
|
2321
|
+
if (heatmapData != null) {
|
|
2322
|
+
setHasLoaded(true);
|
|
2323
|
+
}
|
|
2324
|
+
}, [heatmapData]);
|
|
2325
|
+
return /*#__PURE__*/_react["default"].createElement(GoogleMaps, {
|
|
2326
|
+
apiKey: apiKey,
|
|
2327
|
+
hasLoaded: hasLoaded
|
|
2328
|
+
}, /*#__PURE__*/_react["default"].createElement(_api.HeatmapLayerF, {
|
|
2329
|
+
data: heatmapData,
|
|
2330
|
+
options: {
|
|
2331
|
+
radius: radius,
|
|
2332
|
+
opacity: opacity,
|
|
2333
|
+
gradient: gradient != null ? gradient : ['rgba(0, 255, 255, 0)', 'rgba(0, 255, 255, 1)', 'rgba(0, 191, 255, 1)', 'rgba(0, 127, 255, 1)', 'rgba(0, 63, 255, 1)', 'rgba(0, 0, 255, 1)', 'rgba(0, 0, 223, 1)', 'rgba(0, 0, 191, 1)', 'rgba(0, 0, 159, 1)', 'rgba(0, 0, 127, 1)', 'rgba(63, 0, 91, 1)', 'rgba(127, 0, 63, 1)', 'rgba(191, 0, 31, 1)', 'rgba(255, 0, 0, 1)']
|
|
2334
|
+
}
|
|
2335
|
+
}), heatmapData != null && heatmapData.map(function (point) {
|
|
2336
|
+
return /*#__PURE__*/_react["default"].createElement(_api.OverlayViewF, {
|
|
2337
|
+
position: {
|
|
2338
|
+
lat: point.location.lat(),
|
|
2339
|
+
lng: point.location.lng()
|
|
2340
|
+
},
|
|
2341
|
+
mapPaneName: _api.OverlayView.OVERLAY_MOUSE_TARGET
|
|
2342
|
+
}, overlay(point));
|
|
2343
|
+
}));
|
|
2344
|
+
};
|
|
2345
|
+
|
|
2346
|
+
// components
|
|
2347
|
+
exports.GoogleMapsHeatmap = GoogleMapsHeatmap;
|
|
2348
|
+
var Overview = function Overview(_ref3) {
|
|
2349
|
+
var lat = _ref3.lat,
|
|
2350
|
+
lng = _ref3.lng,
|
|
2351
|
+
children = _ref3.children;
|
|
2352
|
+
return /*#__PURE__*/_react["default"].createElement(_api.OverlayViewF, {
|
|
2353
|
+
position: {
|
|
2354
|
+
lat: lat,
|
|
2355
|
+
lng: lng
|
|
2356
|
+
},
|
|
2357
|
+
mapPaneName: _api.OverlayView.OVERLAY_MOUSE_TARGET
|
|
2358
|
+
}, children);
|
|
2359
|
+
};
|
|
2360
|
+
exports.Overview = Overview;
|
|
2361
|
+
"use strict";
|
|
2362
|
+
|
|
2245
2363
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2246
2364
|
Object.defineProperty(exports, "__esModule", {
|
|
2247
2365
|
value: true
|
package/package.json
CHANGED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react'
|
|
2
|
+
import { LoadScript, GoogleMap, OverlayView, OverlayViewF, HeatmapLayerF } from '@react-google-maps/api';
|
|
3
|
+
|
|
4
|
+
const containerStyle = {
|
|
5
|
+
width: '100%',
|
|
6
|
+
height: '100%'
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
const center = {
|
|
10
|
+
lat: 38,
|
|
11
|
+
lng: -98
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export const GoogleMaps = ({apiKey, hasLoaded, children}) => {
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<LoadScript googleMapsApiKey={apiKey} libraries={['visualization']}>
|
|
18
|
+
<GoogleMap
|
|
19
|
+
mapContainerStyle={containerStyle}
|
|
20
|
+
center={center}
|
|
21
|
+
zoom={5}>
|
|
22
|
+
{hasLoaded &&
|
|
23
|
+
<>
|
|
24
|
+
{children}
|
|
25
|
+
</>
|
|
26
|
+
}
|
|
27
|
+
</GoogleMap>
|
|
28
|
+
</LoadScript>
|
|
29
|
+
)
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
export const GoogleMapsHeatmap = ({apiKey, data = [], gradient, radius = 50, opacity = 0.6, overlay}) => {
|
|
34
|
+
const [heatmapData, setHeatmapData] = useState(null);
|
|
35
|
+
const [hasLoaded, setHasLoaded] = useState(false);
|
|
36
|
+
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (window.google) {
|
|
39
|
+
|
|
40
|
+
let mappingData = [];
|
|
41
|
+
data.forEach(element => {
|
|
42
|
+
mappingData.push({ location: new google.maps.LatLng(element.lat, element.lng), weight: element.weight, data: element });
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
// const data = [
|
|
46
|
+
// { location: new google.maps.LatLng(35.6895, 139.6917), weight: 100 }, // Tokyo
|
|
47
|
+
// { location: new google.maps.LatLng(34.0522, -118.2437), weight: 200 }, // Los Angeles
|
|
48
|
+
// { location: new google.maps.LatLng(51.5074, -0.1278), weight: 500 }, // London
|
|
49
|
+
// // Add more data points as needed
|
|
50
|
+
// ];
|
|
51
|
+
setHeatmapData(mappingData);
|
|
52
|
+
|
|
53
|
+
}
|
|
54
|
+
}, []);
|
|
55
|
+
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
|
|
58
|
+
if (heatmapData != null)
|
|
59
|
+
{
|
|
60
|
+
setHasLoaded(true);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
}, [heatmapData]);
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
|
|
67
|
+
<GoogleMaps apiKey={apiKey} hasLoaded={hasLoaded}>
|
|
68
|
+
|
|
69
|
+
<HeatmapLayerF
|
|
70
|
+
data={heatmapData}
|
|
71
|
+
options={{
|
|
72
|
+
radius: radius,
|
|
73
|
+
opacity: opacity,
|
|
74
|
+
gradient: gradient != null ? gradient : [
|
|
75
|
+
'rgba(0, 255, 255, 0)',
|
|
76
|
+
'rgba(0, 255, 255, 1)',
|
|
77
|
+
'rgba(0, 191, 255, 1)',
|
|
78
|
+
'rgba(0, 127, 255, 1)',
|
|
79
|
+
'rgba(0, 63, 255, 1)',
|
|
80
|
+
'rgba(0, 0, 255, 1)',
|
|
81
|
+
'rgba(0, 0, 223, 1)',
|
|
82
|
+
'rgba(0, 0, 191, 1)',
|
|
83
|
+
'rgba(0, 0, 159, 1)',
|
|
84
|
+
'rgba(0, 0, 127, 1)',
|
|
85
|
+
'rgba(63, 0, 91, 1)',
|
|
86
|
+
'rgba(127, 0, 63, 1)',
|
|
87
|
+
'rgba(191, 0, 31, 1)',
|
|
88
|
+
'rgba(255, 0, 0, 1)'
|
|
89
|
+
]
|
|
90
|
+
}}
|
|
91
|
+
/>
|
|
92
|
+
|
|
93
|
+
{heatmapData != null && heatmapData.map(point => {
|
|
94
|
+
return (
|
|
95
|
+
<OverlayViewF
|
|
96
|
+
position={{lat: point.location.lat(), lng: point.location.lng()}}
|
|
97
|
+
mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}>
|
|
98
|
+
{overlay(point)}
|
|
99
|
+
</OverlayViewF>
|
|
100
|
+
)
|
|
101
|
+
})}
|
|
102
|
+
</GoogleMaps>
|
|
103
|
+
)
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// components
|
|
107
|
+
export const Overview = ({lat, lng, children}) => {
|
|
108
|
+
|
|
109
|
+
return (
|
|
110
|
+
<OverlayViewF
|
|
111
|
+
position={{lat: lat, lng: lng}}
|
|
112
|
+
mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}>
|
|
113
|
+
{children}
|
|
114
|
+
</OverlayViewF>
|
|
115
|
+
)
|
|
116
|
+
}
|
|
117
|
+
|