Google Maps clone with React, Leaflet, and OneSDK

A complementary code to the tutorial Let's build a Google Maps clone.

Provides the following features:

• Displaying a map
• Adding markers to the map using location search
• Display route and routing instructions between two places

Uses the following libraries:

• React with Create React App
• Leaflet
  • React Leaflet
  • Leaflet Routing Machine
  • leaflet-defaulticon-compatibility to fix icons bundling in Create React App
• Express for backend
• OneSDK with Geocoding use case

Uses the following providers:

• OpenStreetMap map tiles
• Nominatim for geocoding (via OneSDK)
• OSRM for routing (via Leaflet Routing Machine)

Warning The choice of providers is for low volume, development purposes only. Leaflet Routing Machine recommends different routing provider for production. For geocoding, various other providers are supported.

Setup

1. Clone the repository

   git clone https://github.com/superfaceai/google-maps-clone.git

2. Install dependencies for both the frontend and backend

   cd google-maps-clone
   npm install
   cd server
   npm install
   cd ..

Usage

Start frontend application:

npm start

In separate terminal, start the backend server:

cd server
npm start