isard-react-native

isard maps in React Native apps: <IsardMapView> holds isard's page in a WebView, driven by its props and its ref. The map runs as it does in a browser (WebGL2, WebAssembly, its workers), on iOS 15 and later and on recent Android.

npm install isard-react-native react-native-webview

import { IsardMapView, type IsardMapViewHandle } from 'isard-react-native';

const map = useRef<IsardMapViewHandle>(null);

<IsardMapView
  ref={map}
  style={{ flex: 1 }}
  options={{ center: [2.35, 48.85], zoom: 13, pitch: 50 }}
  layers={[{ id: 'stops', type: 'circles', data: stops, color: '#e8590c', radius: 8 }]}
  onClick={({ lonLat, feature }) => setPicked(feature)}
/>;

await map.current?.flyTo({ center: [2.2945, 48.8584], zoom: 16 });

• options: the map's options at its creation, as GeoMap.create takes them (plain data).
• layers: the map's layers, the last on top, as map.add takes them, with an id; set again when they change.
• onReady, onClick, onMoveEnd, onError; the ref: setCamera, easeTo, flyTo, getCamera, pickSurface.
• isardUrl: where the page loads isard from (its npm package on jsDelivr by default, or a copy of yours).

On the web (React Native for Web, a bundler taking the browser field or .web.tsx files), the same view holds the page in an iframe with the same messages.

The app and the page exchange JSON: a layer's options are plain data (no function of a feature's properties). MIT licence.