react-native-mapsforge-vtm
Version:
React Native components to build vector maps using Mapsforges fork of vtm. Offline rendering of OpenStreetMap data. Android only
457 lines (443 loc) • 15.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _lodashEs = require("lodash-es");
var _MapViewManager = _interopRequireDefault(require("./MapViewManager.js"));
var _useMapLayersCreated = _interopRequireDefault(require("../compose/useMapLayersCreated.js"));
var _nativeMapModules = require("../nativeMapModules.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* External dependencies
*/
/**
* Internal dependencies
*/
const createFragment = nativeNodeHandle => {
const create = _reactNative.UIManager.getViewManagerConfig('MapViewManager')?.Commands?.create;
if (create) {
try {
_reactNative.UIManager.dispatchViewManagerCommand(nativeNodeHandle, create.toString(), [nativeNodeHandle]);
} catch (err) {
console.log('Error', err);
}
}
};
const useDefaultWidth = propsWidth => {
const {
width
} = (0, _reactNative.useWindowDimensions)();
return propsWidth || width;
};
;
const defaultCenter = {
lng: -77.605,
lat: -9.118
};
// 0 never include in response.
// 1 include in lifeCycle response.
// 2 include in lifeCycle and onMapEvent response.
const responseIncludeDefaults = {
zoomLevel: 0,
zoom: 0,
scale: 0,
zoomScale: 0,
bearing: 0,
roll: 0,
tilt: 0,
center: 0
};
const numOrBoolToNum = (numOrBool, defaultVal) => {
return (0, _lodashEs.isBoolean)(numOrBool) || (0, _lodashEs.isNumber)(numOrBool) ? !!numOrBool ? 1 : 0 : defaultVal;
};
const MapContainer = ({
children,
nativeNodeHandle = null,
// It's not possible to control the nativeNodeHandle. It's a prop just to lift the state up.
setNativeNodeHandle = null,
onPause = null,
onResume = null,
onMapEvent,
onHardwareKeyUp,
width,
height = 200,
center = defaultCenter,
moveEnabled,
tiltEnabled,
rotationEnabled,
zoomEnabled,
zoomLevel,
zoomMin,
zoomMax,
tilt = 0,
minTilt = 0,
maxTilt = 65,
bearing = 0,
minBearing = -180,
maxBearing = 180,
roll = 0,
minRoll = -180,
maxRoll = 180,
hgtDirPath,
responseInclude = responseIncludeDefaults,
onError,
mapEventRate = 100,
hgtInterpolation,
hgtReadFileRate = 100,
hgtFileInfoPurgeThreshold = 3,
emitsMapEvents = null,
emitsHardwareKeyUp = null
}) => {
const ref = (0, _react.useRef)(null);
const [nativeNodeHandle_, setNativeNodeHandle_] = (0, _react.useState)(null);
nativeNodeHandle = nativeNodeHandle ? nativeNodeHandle : nativeNodeHandle_;
setNativeNodeHandle = setNativeNodeHandle ? setNativeNodeHandle : setNativeNodeHandle_;
const mapLayersCreated = (0, _useMapLayersCreated.default)((0, _reactNative.findNodeHandle)(ref?.current), onError);
width = useDefaultWidth(width);
moveEnabled = numOrBoolToNum(moveEnabled, 1);
rotationEnabled = numOrBoolToNum(rotationEnabled, 1);
zoomEnabled = numOrBoolToNum(zoomEnabled, 1);
tiltEnabled = numOrBoolToNum(tiltEnabled, 1);
hgtInterpolation = numOrBoolToNum(hgtInterpolation, 1);
zoomLevel = (0, _lodashEs.isNumber)(zoomLevel) ? Math.round(zoomLevel) : 12;
zoomMin = (0, _lodashEs.isNumber)(zoomMin) ? Math.round(zoomMin) : 3;
zoomMax = (0, _lodashEs.isNumber)(zoomMax) ? Math.round(zoomMax) : 20;
responseInclude = {
...responseIncludeDefaults,
...responseInclude
};
emitsMapEvents = (0, _lodashEs.isBoolean)(emitsMapEvents) ? emitsMapEvents : !!onMapEvent;
emitsHardwareKeyUp = !emitsHardwareKeyUp ? ['KEYCODE_VOLUME_UP', 'KEYCODE_VOLUME_DOWN'] : emitsHardwareKeyUp;
(0, _react.useEffect)(() => {
const nodeHandle = (0, _reactNative.findNodeHandle)(ref?.current);
if (nodeHandle) {
setNativeNodeHandle(nodeHandle);
}
}, []);
(0, _react.useEffect)(() => {
if (nativeNodeHandle) {
createFragment(nativeNodeHandle);
}
}, [nativeNodeHandle]);
// center changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setCenter(nativeNodeHandle, center).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [Object.values(center).join('')]);
// moveEnabled changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setPropsInteractionsEnabled(nativeNodeHandle, 'moveEnabled', moveEnabled).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [moveEnabled]);
// tiltEnabled changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setPropsInteractionsEnabled(nativeNodeHandle, 'tiltEnabled', tiltEnabled).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [tiltEnabled]);
// rotationEnabled changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setPropsInteractionsEnabled(nativeNodeHandle, 'rotationEnabled', rotationEnabled).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [rotationEnabled]);
// zoomEnabled changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setPropsInteractionsEnabled(nativeNodeHandle, 'zoomEnabled', zoomEnabled).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [zoomEnabled]);
// zoomLevel changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setZoomLevel(nativeNodeHandle, zoomLevel).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [zoomLevel]);
// zoomMin changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setZoomMin(nativeNodeHandle, zoomMin).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [zoomMin]);
// zoomMax changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setZoomMax(nativeNodeHandle, zoomMax).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [zoomMax]);
// tilt changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setViewport(nativeNodeHandle, 'tilt', tilt).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [tilt]);
// minTilt changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setViewport(nativeNodeHandle, 'minTilt', minTilt).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [minTilt]);
// maxTilt changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setViewport(nativeNodeHandle, 'maxTilt', maxTilt).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [maxTilt]);
// bearing changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setViewport(nativeNodeHandle, 'bearing', bearing).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [bearing]);
// minBearing changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setViewport(nativeNodeHandle, 'minBearing', minBearing).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [minBearing]);
// maxBearing changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setViewport(nativeNodeHandle, 'maxBearing', maxBearing).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [maxBearing]);
// roll changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setViewport(nativeNodeHandle, 'roll', roll).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [roll]);
// minRoll changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setViewport(nativeNodeHandle, 'minRoll', minRoll).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [minRoll]);
// maxRoll changed.
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setViewport(nativeNodeHandle, 'maxRoll', maxRoll).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [maxRoll]);
// hgtDirPath
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setHgtDirPath(nativeNodeHandle, hgtDirPath || null).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [hgtDirPath]);
// responseInclude
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setResponseInclude(nativeNodeHandle, responseInclude).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [Object.keys(responseInclude).map(key => key + responseInclude[key]).join('')]);
// mapEventRate
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setEventRate(nativeNodeHandle, mapEventRate).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [mapEventRate]);
// hgtInterpolation
// hgtReadFileRate
// hgtFileInfoPurgeThreshold
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setHgtReader(nativeNodeHandle, hgtInterpolation, hgtReadFileRate, hgtFileInfoPurgeThreshold).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [hgtInterpolation, hgtReadFileRate, hgtFileInfoPurgeThreshold]);
// emitsMapEvents
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setEmitsMapEvents(nativeNodeHandle, emitsMapEvents ? 1 : 0).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [emitsMapEvents]);
// emitsMapEvents
(0, _react.useEffect)(() => {
if (mapLayersCreated && nativeNodeHandle) {
_nativeMapModules.MapContainerModule.setEmitsHardwareKeyUp(nativeNodeHandle, emitsHardwareKeyUp).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [emitsHardwareKeyUp]);
(0, _react.useEffect)(() => {
const eventEmitter = new _reactNative.NativeEventEmitter();
let eventListener = eventEmitter.addListener('MapLifecycle', response => {
if (response.nativeNodeHandle === nativeNodeHandle) {
switch (response.type) {
case 'onPause':
if (onPause) {
onPause(response);
}
break;
case 'onResume':
if (onResume) {
onResume(response);
}
break;
}
}
});
return () => {
eventListener.remove();
};
}, [nativeNodeHandle, onPause, onResume]);
(0, _react.useEffect)(() => {
const eventEmitter = new _reactNative.NativeEventEmitter();
let eventListener = eventEmitter.addListener('onMapEvent', response => {
if (response.nativeNodeHandle === nativeNodeHandle && onMapEvent) {
onMapEvent(response);
}
});
return () => {
eventListener.remove();
};
}, [nativeNodeHandle, onMapEvent]);
(0, _react.useEffect)(() => {
const eventEmitter = new _reactNative.NativeEventEmitter();
let eventListener = eventEmitter.addListener('onHardwareKeyUp', response => {
if (response.nativeNodeHandle === nativeNodeHandle && onMapEvent) {
onHardwareKeyUp && onHardwareKeyUp(response);
}
});
return () => {
eventListener.remove();
};
}, [nativeNodeHandle, onHardwareKeyUp]);
let lastIndex = 0; // It starts with the MapFragment event layer. Otherwise it would be -1 here.
const wrapChildren = children => !children || !(0, _reactNative.findNodeHandle)(ref?.current) ? null : _react.Children.map(children, child => {
let newChild = child;
if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
return newChild;
}
const type = (0, _lodashEs.get)(child, 'type');
if (!type || !type.valueOf) {
return newChild;
}
const isMapLayer = (0, _lodashEs.get)(type.valueOf(), 'isMapLayer');
lastIndex = isMapLayer ? lastIndex + 1 : lastIndex;
newChild = child && type ? /*#__PURE__*/(0, _react.cloneElement)(child, {
...{
nativeNodeHandle
},
...(isMapLayer ? {
reactTreeIndex: lastIndex
} : {}),
...(child?.props?.children && {
children: wrapChildren(child.props.children)
})
}) : child;
return newChild;
});
const wrappedChildren = wrapChildren(children);
// Wrap into non scrollable ScrollView to fix top positioning.
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
scrollEnabled: false,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MapViewManager.default, {
ref: ref,
width: width,
height: height,
widthForLayoutSize: _reactNative.PixelRatio.getPixelSizeForLayoutSize(width),
heightForLayoutSize: _reactNative.PixelRatio.getPixelSizeForLayoutSize(height),
center: center,
moveEnabled: moveEnabled,
tiltEnabled: tiltEnabled,
rotationEnabled: rotationEnabled,
zoomEnabled: zoomEnabled,
zoomLevel: zoomLevel,
zoomMin: zoomMin,
zoomMax: zoomMax,
tilt: tilt,
minTilt: minTilt,
maxTilt: maxTilt,
bearing: bearing,
minBearing: minBearing,
maxBearing: maxBearing,
roll: roll,
minRoll: minRoll,
maxRoll: maxRoll,
hgtDirPath: hgtDirPath,
responseInclude: responseInclude,
mapEventRate: mapEventRate,
hgtInterpolation: hgtInterpolation,
hgtReadFileRate: hgtReadFileRate,
hgtFileInfoPurgeThreshold: hgtFileInfoPurgeThreshold,
emitsMapEvents: emitsMapEvents ? 1 : 0,
emitsHardwareKeyUp: emitsHardwareKeyUp
}), mapLayersCreated && wrappedChildren]
});
};
var _default = exports.default = MapContainer;
//# sourceMappingURL=MapContainer.js.map