Let's build a Google Maps clone with React, Leaflet, and OneSDK

• create-react-app

  114 100,842 5.2 JavaScript

  Set up a modern web app by running one command.

  

  Let’s start by creating an empty React project (using create-react-app):

• OneSDK

  7 45 0.0 TypeScript

  1️⃣ One Node.js SDK for all the APIs you want to integrate with

  

  We will use React and React Leaflet on the frontend, and Node.js, Express.js, and Superface OneSDK on the backend.

• Appwrite

  appwrite.io

  sponsored

  Appwrite - The open-source backend cloud platform. The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!

  

• google-maps-clone

  1 1 10.0 JavaScript

  Let's build a basic Google Maps clone! Complementary code to the tutorial.

  

  In this tutorial, we have learned how to create a Google Maps-like application using Leaflet and React. We've utilized Geolocation API to identify location coordinates and place markers, as well as creating a route between two different locations. You can find the final project on GitHub.

• leaflet-defaulticon-compatibility

  1 78 5.8 JavaScript

  Retrieve all Leaflet Default Icon options from CSS, in particular all icon images URL's, to improve compatibility with bundlers and frameworks that modify URL's in CSS.

  First install leaflet, react-leaflet and leaflet-defaulticon-compatibility. The last package fixes compatibility with Webpack bundler (used by create-react-app) to correctly load images from Leaflet's package.

• leaflet-routing-machine

  1 990 0.0 JavaScript

  Control for routing in Leaflet

  There are many plugins that we can use. I will go with Leaflet Routing Machine.

• Openstreetmap

  167 1,876 9.1 Ruby

  The Rails application that powers OpenStreetMap

  

  To add a map component, you have many options, like Google Maps or Mapbox, but these are not free. We will use Leaflet, an open-source JavaScript library. With Leaflet, you can easily create interactive maps and add markers, pop-ups, and other types of data visualizations. Leaflet support various providers for map assets, but we will stick with the default, OpenStreetMap.

• react-leaflet

  12 4,729 5.0 TypeScript

  React components for Leaflet maps

  Leaflet has many official and third party plugins and wrappers. Since we’re using React, we can use React Leaflet which provides components for rendering Leaflet maps in React.

• Onboard AI

  getonboard.dev

  sponsored

  Learn any GitHub repo in 59 seconds. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at www.getonboard.dev.

  

• React

  463 213,563 9.6 JavaScript

  The library for web and native user interfaces

  

  React with Create React App

• Nominatim

  15 2,547 8.3 Python

  Open Source search based on OpenStreetMap data

  

  Then implement a use case. We are going to use Geocoding use case with Nominatim provider. But you can, of course, use a different provider. Copy the example code into your server.js file and make a few changes, so we can send the information we will receive from the user:

• Leaflet

  61 38,506 9.1 JavaScript

  🍃 JavaScript library for mobile-friendly interactive maps 🇺🇦

  

  To add a map component, you have many options, like Google Maps or Mapbox, but these are not free. We will use Leaflet, an open-source JavaScript library. With Leaflet, you can easily create interactive maps and add markers, pop-ups, and other types of data visualizations. Leaflet support various providers for map assets, but we will stick with the default, OpenStreetMap.

• Font-Awesome

  38 72,304 5.6 JavaScript

  The iconic SVG, font, and CSS toolkit

  

  Additionally, I am going to use Font Awesome to add icons to our project. This will make it visually appealing and add to its overall design:

• Express

  169 61,968 7.1 JavaScript

  Fast, unopinionated, minimalist web framework for node.

  

  Express for backend

Suggest a related project