Building Map-first Apps with React

Map-first UI is a great way to present data when you want to visualize data that has great geographical relevance. And if you're a React dev, The react-leaflet package helps you do just that!

I started doing maps when the coronavirus pandemic was on the rise and wanted to plot the cases worldwide on a map. Checkout Coronasafe India Map. As a React developer, my searches helped me find react-leaflet, which is a wrapper around the leaflet js library. Bonus: since react works with a virtual DOM, react-leaflet is in a lot of cases considerably faster than native leaflet!

A Look Back and A Step Forward

It's been three years since our endeavor into map-first UIs with Coronasafe. As I reflect on the journey, the passion, the late-night coding sessions, and the satisfaction of seeing our map being utilized by countless users worldwide, I can't help but feel an immense sense of accomplishment and gratitude. Throughout this period, I've received numerous queries on how we achieved this, and I've been longing to pen down this article on quickly bootstrapping Map First applications in React. So, without further ado, here's a quick guide for all the budding developers out there.

Bootstrapping a Map-first React App

1. Setting Up Your React App

Start by initializing a new React application using Create React App:

npx create-react-app map-first-react-app

Navigate to your new app's directory:

cd map-first-react-app

2. Installing Dependencies

Install react-leaflet and leaflet:

npm install react-leaflet leaflet

3. Integrating the Map

In your App.js:

• Import the necessary components from react-leaflet and styles from leaflet:
  

  import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
  import 'leaflet/dist/leaflet.css';
  

• Embed the MapContainer component within your app's render method. You can set the desired center and zoom level for the map:
  

  <MapContainer center={[51.505, -0.09]} zoom={13}>
    <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    <Marker position={[51.505, -0.09]}>
      <Popup>
        A sample marker!
      </Popup>
    </Marker>
  </MapContainer>
  

4. Overlaying Additional UI Elements

To add UI elements over your map:

• Wrap your MapContainer with a parent div element. This acts as your canvas.

• Position your UI components absolutely within this div. Utilize CSS for layout and positioning.
  

    .map-canvas {
      position: relative;
      width: 100%;
      height: 100vh;
    }

    .your-ui-element {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1000; // Ensure it's above the map
    }

• Make sure to properly handle z-index to ensure overlays don't interfere with map interactivity.

5. Serving the App

Finally, run your app:

npm start

Your React application should now display a map with overlaying UI elements. From here, the possibilities are endless. You can add markers, pop-ups, and layers, or even integrate real-time data streams.

Conclusion

A map-first application is more than just a visual treat; it's a powerful tool for conveying data in an intuitive, accessible manner. Whether you're aiming to depict global events, track assets, or share any geographically-relevant information, a map-first approach combined with React's agility can be transformative. I hope this guide empowers you to embark on your map-based projects and make an impact, just as we did at Coronasafe. Happy coding!