react-native-mapsforge-vtm
Version:
React Native components to build vector maps using Mapsforges fork of vtm. Offline rendering of OpenStreetMap data. Android only
97 lines (94 loc) • 2.92 kB
JavaScript
;
/**
* External dependencies
*/
import { useEffect, useState } from 'react';
/**
* Internal dependencies
*/
import useRefState from "../compose/useRefState.js";
import promiseQueue from "../promiseQueue.js";
import { MapLayerMBTilesBitmapModule } from "../nativeMapModules.js";
const Module = MapLayerMBTilesBitmapModule;
;
const LayerMBTilesBitmap = ({
nativeNodeHandle,
reactTreeIndex,
mapFile,
enabledZoomMin = 1,
enabledZoomMax = 20,
alpha = 256,
transparentColor,
onCreate,
onRemove,
onChange,
onError
}) => {
// @ts-ignore
const [random, setRandom] = useState(0);
const [uuid, setUuid] = useRefState(null);
const [triggerCreateNew, setTriggerCreateNew] = useState(null);
alpha = Math.round(alpha);
const createLayer = () => {
setUuid(false);
promiseQueue.enqueue(() => {
return Module.createLayer(nativeNodeHandle, mapFile, Math.round(enabledZoomMin), Math.round(enabledZoomMax), alpha, transparentColor, reactTreeIndex).then(response => {
setUuid(response.uuid);
setRandom(Math.random());
null === triggerCreateNew ? onCreate ? onCreate(response) : null : onChange ? onChange(response) : null;
}).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
});
};
useEffect(() => {
if (uuid === null && nativeNodeHandle && mapFile) {
createLayer();
}
return () => {
if (uuid && nativeNodeHandle) {
promiseQueue.enqueue(() => {
return Module.removeLayer(nativeNodeHandle, uuid).then(removedUuid => {
onRemove ? onRemove({
uuid: removedUuid
}) : null;
}).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
});
}
};
}, [nativeNodeHandle, !!uuid, triggerCreateNew]);
// enabledZoomMin enabledZoomMax changed.
useEffect(() => {
if (nativeNodeHandle && uuid) {
Module.updateEnabledZoomMinMax(nativeNodeHandle, uuid, Math.round(enabledZoomMin), Math.round(enabledZoomMax)).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
}
}, [enabledZoomMin, enabledZoomMax]);
useEffect(() => {
if (nativeNodeHandle) {
if (uuid) {
promiseQueue.enqueue(() => {
return Module.removeLayer(nativeNodeHandle, uuid).then(() => {
setUuid(null);
setTriggerCreateNew(Math.random());
}).catch(err => {
console.log('ERROR', err);
onError ? onError(err) : null;
});
});
} else if (uuid === null && mapFile) {
setTriggerCreateNew(Math.random());
}
}
}, [mapFile, alpha, transparentColor]);
return null;
};
LayerMBTilesBitmap.isMapLayer = true;
export default LayerMBTilesBitmap;
//# sourceMappingURL=LayerMBTilesBitmap.js.map