Copy
Ask AI
npm install --save react-native-radar @maplibre/maplibre-react-native
<Map>
component:
Copy
Ask AI
import { View } from 'react-native';
import Radar, { Map } from 'react-native-radar';
import MapLibreGL from '@maplibre/maplibre-react-native';
// NOTE: MapLibre requires setting their deprecated access token to null
MapLibreGL.setAccessToken(null);
Radar.initialize('prj_live_pk_...');
export const App = () => (
<View style={{ width: '100%', height: '95%' }}>
<Map />
</View>
);
Copy
Ask AI
const [cameraConfig, setCameraConfig] = useState({
triggerKey: Date.now(),
centerCoordinate: [-73.9911, 40.7342],
animationMode: 'flyTo',
animationDuration: 600,
zoomLevel: 12,
});
const onRegionDidChange = (event) => {
// do something on region change
}
const onSelect = (address) => {
// do something with selected address
}
const pointsCollection = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
_id: '123',
},
geometry: {
type: 'Point',
coordinates: [-73.9911, 40.7342]
}
}
]
};
const onPress = (event) => {
// do something on press
}
return (
<View style={{ width: '100%', marginTop: '10%', height: '90%' }}>
<Map mapOptions={{
onRegionDidChange,
}}>
<MapLibreGL.Camera
{...cameraConfig}
/>
<MapLibreGL.Images
images={{
icon: require('./assets/marker.png'),
}}
/>
<MapLibreGL.ShapeSource
id="points"
shape={pointsCollection}
onPress={onPress}
>
<MapLibreGL.SymbolLayer
id="symbol"
style={{
iconImage: 'icon',
iconSize: [
'interpolate',
['linear'],
['zoom'],
0, 0.2, // adjust the icon size for zoom level 0
12, 0.4, // adjust the icon size for zoom level 12
22, 0.8, // adjust the icon size for zoom level 22
],
iconAllowOverlap: true,
}}
/>
</MapLibreGL.ShapeSource>
</Map>
</View>
);