@kbfront/kb-ui
Version:
KB React UI Library
134 lines • 6.78 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.EGoogleMapTypeId = void 0;
var react_1 = __importStar(require("react"));
var Loading_1 = __importDefault(require("components/Loading"));
var index_1 = require("index");
require("./index.scss");
var EGoogleMapTypeId;
(function (EGoogleMapTypeId) {
EGoogleMapTypeId["HYBRID"] = "HYBRID";
EGoogleMapTypeId["ROADMAP"] = "ROADMAP";
EGoogleMapTypeId["SATELLITE"] = "SATELLITE";
EGoogleMapTypeId["TERRAIN"] = "TERRAIN";
})(EGoogleMapTypeId = exports.EGoogleMapTypeId || (exports.EGoogleMapTypeId = {}));
var GoogleMap = function (_a) {
var mapSettings = _a.mapSettings, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.mapControls, mapControls = _c === void 0 ? true : _c, getMap = _a.getMap, getMarker = _a.getMarker, getInfoWindow = _a.getInfoWindow;
var key = mapSettings.key, _d = mapSettings.id, id = _d === void 0 ? "map" : _d, _e = mapSettings.icon, icon = _e === void 0 ? { url: null, size: [30, 70] } : _e, _f = mapSettings.position, position = _f === void 0 ? { lat: 40.4104301, lng: 49.9372203 } : _f, _g = mapSettings.center, center = _g === void 0 ? { lat: 40.4104301, lng: 49.9372203 } : _g, _h = mapSettings.zoom, zoom = _h === void 0 ? 18 : _h, locations = mapSettings.locations, styles = mapSettings.styles, _j = mapSettings.mapTypeId, mapTypeId = _j === void 0 ? EGoogleMapTypeId.ROADMAP : _j;
var mapKey = "https://maps.googleapis.com/maps/api/js?key=" + key;
var map;
var marker;
var _k = react_1.useState(false), loading = _k[0], setLoading = _k[1];
var _l = react_1.useState(locations || [position]), places = _l[0], setPlace = _l[1];
react_1.useEffect(function () {
if (locations) {
setPlace(locations);
}
}, [locations]);
function initMap() {
var _a, _b, _c, _d;
map = new google.maps.Map(document.getElementById(id), {
center: center,
zoom: zoom,
styles: styles,
mapTypeId: "" + google.maps.MapTypeId[mapTypeId],
});
var iconSettings = {
url: icon.url,
scaledSize: new google.maps.Size(icon.size[0], icon.size[1]),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32),
};
var _loop_1 = function (loc) {
marker = new google.maps.Marker({
map: map,
position: { lat: +places[loc]["lat"], lng: +places[loc]["lng"] },
icon: iconSettings.url ? iconSettings : null,
title: ((_b = (_a = places === null || places === void 0 ? void 0 : places[loc]) === null || _a === void 0 ? void 0 : _a["title"]) === null || _b === void 0 ? void 0 : _b.toString()) || "click to zoom",
animation: google.maps.Animation.DROP,
});
var infowindow = new google.maps.InfoWindow({
content: (_d = (_c = places === null || places === void 0 ? void 0 : places[loc]) === null || _c === void 0 ? void 0 : _c["title"]) === null || _d === void 0 ? void 0 : _d.toString(),
});
getMap && getMap(map);
getMarker && getMarker(marker);
getInfoWindow && getInfoWindow(infowindow);
google.maps.event.addListener(marker, "click", (function (marker, count) {
return function () {
var _a, _b;
marker.setAnimation(google.maps.Animation.BOUNCE);
marker.setAnimation(null);
if ((_a = places === null || places === void 0 ? void 0 : places[loc]) === null || _a === void 0 ? void 0 : _a["title"]) {
infowindow.setContent((_b = places === null || places === void 0 ? void 0 : places[loc]) === null || _b === void 0 ? void 0 : _b["title"].toString());
infowindow.open(map, marker);
}
};
})(marker, location));
};
for (var loc = 0; loc < (places === null || places === void 0 ? void 0 : places.length); loc++) {
_loop_1(loc);
}
}
var callBack = function () {
var interval = setInterval(function () {
if (document.head.querySelector("script[src^='https://maps.googleapis.com']")) {
clearInterval(interval);
setLoading(false);
initMap();
}
}, 500);
};
var createMap = function () {
if (key) {
setLoading(true);
var script = document.createElement("script");
script.setAttribute("src", mapKey);
document.body.appendChild(script);
callBack();
}
};
react_1.useEffect(function () {
createMap();
}, [places]);
return (react_1.default.createElement("div", { className: "map-container " + (mapControls ? "" : "remove-controls") + " " + className },
" ",
loading ? (react_1.default.createElement(Loading_1.default, { color: index_1.EColor.DANGER, fixed: index_1.EBoolean.FALSE })) : (react_1.default.createElement("div", __assign({}, { id: id }))),
" "));
};
exports.default = GoogleMap;
//# sourceMappingURL=index.js.map