How to Render OpenStreetMap in an Expo React Native Web App Using React Leaflet

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='&copy; <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.

Comments

[Dheeraj TP]

Do we need key for showing the directions and all?