Displaying Radar Maps with React Native

To create a React Native component with a map:

npm install --save react-native-radar @maplibre/maplibre-react-native

The SDK has a dependency on maplibre-react-native.

Next, complete any required platform-specific installation steps.

Finally, initialize the Radar SDK and add a <Map> component:

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 nullMapLibreGL.setAccessToken(null);
Radar.initialize('prj_live_pk_...');
export const App = () => (  <View style={{ width: '100%', height: '95%' }}>    <Map />  </View>);

Optionally, add assets for a marker. You can download assets here.

To add a marker to the map and control the camera:

  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>  );