bento-charts
Version:
Charts library for Bento-platform
17 lines • 1.39 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Marker, Popup } from 'react-leaflet';
import BentoMapContainer from './BentoMapContainer';
var BentoPointMap = function (_a) {
var height = _a.height, center = _a.center, zoom = _a.zoom, tileLayer = _a.tileLayer, data = _a.data, onClick = _a.onClick, renderPopupBody = _a.renderPopupBody;
return (_jsx(BentoMapContainer, { height: height, center: center, zoom: zoom, tileLayer: tileLayer, children: data.map(function (point, i) {
var coordinates = point.coordinates, title = point.title;
// We expect points in [long, lat] order (consistent with GeoJSON), but Leaflet wants them in [lat, long].
var coordinatesLatLongOrder = [coordinates[1], coordinates[0]];
return (_jsx(Marker, { position: coordinatesLatLongOrder, children: _jsxs(Popup, { children: [_jsx("h4", { style: { marginBottom: renderPopupBody ? 6 : 0 }, children: onClick ? (_jsx("a", { href: "#", onClick: function (e) {
onClick(point);
e.preventDefault();
}, children: title })) : (_jsx(_Fragment, { children: title })) }), renderPopupBody ? renderPopupBody(point) : null] }) }, i));
}) }));
};
export default BentoPointMap;
//# sourceMappingURL=BentoPointMap.js.map