Introduction
OpenStreetMap (OSM) offers a free and open-source alternative to traditional map services like Google Maps. Integrating OSM into your Expo React Native web application can enhance user experience without incurring additional costs. In this guide, we'll walk you through the steps to render OpenStreetMap in an Expo web platform using the React Leaflet library.
Step 1: Install Necessary Packages
First, navigate to your project directory and install the react-leaflet and leaflet packages:
npm install react react-dom leaflet
npm install react-leaflet
npm install -D @types/leaflet
npm install leaflet-defaulticon-compatibility --save
Step 2: Import Components and Styles
In the component where you plan to use the map (e.g., Map.js), import the required components and styles:
import '../../../node_modules/leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility';
import '../../../node_modules/leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css';
import 'leaflet/dist/leaflet.css';
import React from 'react';
import { MapContainer as Map, Marker, Popup, TileLayer } from 'react-leaflet';
Step 3: Create the MapContainer Component
Create a MapContainer component that sets up the map view, tile layer, and any markers or popups you need:
const MapContainer = () => {
return (
<Map
center={[51.505, -0.09]}
zoom={13}
scrollWheelZoom={false}
style={{ height: '400px', width: '100%' }}
>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505, -0.09]}>
<Popup>
An approach to solve using osm in expo web platform.
</Popup>
</Marker>
</Map>
);
};
export default MapContainer;
Step 4: Integrate the Map Component into Your App
import React from 'react';
import { View } from 'react-native';
import MapContainer from './MapContainer';
export default function App() {
return (
<View style={{ flex: 1 }}>
<MapContainer />
</View>
);
}
Step 5: Handle Server-Side Rendering Issues
If you're using Server-Side Rendering (SSR), you might encounter issues because Leaflet depends on the window object, which isn't available during SSR. To resolve this, use dynamic importing with React.lazy and React.Suspense:
import React from 'react';
import { View, Platform } from 'react-native';
export default function App() {
const Map = React.useMemo(() => {
if (Platform.OS === 'web') {
return React.lazy(() => import('./MapContainer'));
}
return () => null;
}, []);
return (
<View style={{ flex: 1 }}>
<React.Suspense fallback={<View>Loading...</View>}>
<MapContainer />
</React.Suspense>
</View>
);
}
This approach ensures that the MapContainer component is only loaded on the web platform and not during SSR, preventing errors related to the window object.
Conclusion
By following these steps you will be able to use OpenStreetMap in the Expo React Native web platform, with any tile layer.
Happy Coding!
If you found this guide helpful, feel free to share it with others who might benefit from it. For any questions or feedback, leave a comment below.
Top comments (1)
Do we need key for showing the directions and all?