Tutorial: Create a Mapping App Using React-Leaflet
Inspired by Map It!
When I first set out to create Map It, an app that allows users to save and share locations on maps, I had a lot of trouble getting started. I knew I wanted Map It to display a map, allow a user to click and add a marker to the map, and find the user’s location (with permission, of course). I chose react-leaflet as my mapping library because it allows for custom icons, cute pop ups, and the documentation seemed thorough. However, I struggled to find code examples that fit my use case and the documentation was sometimes hard to follow. I created this tutorial to help other developers get started with their mapping apps. I hope you enjoy!
- Since we’re creating a single page application, let’s use create-react-app as our boilerplate. In your terminal, navigate to the folder you’d like to save your project in, and then run: npm init react-app leaflet-app
- cd into leaflet-app and then run npm start. In your browser, you will see the default create-react-app.
- Let’s quickly run through the file structure of our app. Because this is a boilerplate that works for a wide variety of projects, there is a lot here that we don’t need and we can ignore. We will primarily be coding in App.js in the src folder. We will also need to use index.html in the public folder.
- In App.js, let’s delete the starter code and set up a basic react component:
- In order to build our leaflet-app, we’re going to use a combination of leaflet.js and react-leaflet (the react-leaflet setup informs you that you must also complete the leaflet.js setup). Following the installation directions for react-leaflet, in your terminal, run: npm install -s react react-dom leaflet react-leaflet@2.7.0
- In the public folder, create a new stylesheet (style.css) and paste this code:
- In the <head> of index.html paste this code:
- Following the react-leaflet setup directions, we’re going to copy paste their starter code (but we will use Map instead of MapContainer) into our render function and import the built in components:
- And now, in the browser, you should see a map! But this map isn’t showing me where I am, so let’s add a geolocation feature. Let’s start by creating a constructor function and defining a default latitude and longitude on state:
- Next, let’s set the map’s center and the marker’s position to be equal to the lat and lng on state. This will make it easy for us to change these positions once the geolocation API has found my computer’s location:
- Using the geolocation API, let’s create a function that finds my current location, and let’s bind the function to this. Let’s also create a “find me” button. Now, when we find the user’s location, that will update the lat and lng on state:
- The last thing we want to be able to do is click somewhere on the map and place a marker. Let’s do that by storing sets of coordinates on state in an array of objects, and then map through it to place markers. When we add a new marker, we’ll add that object to the end of the array on state. Let’s start by adding locations as an empty array on state:
- And let’s create a handleClick function that adds objects to the locations array. We’ll need to npm install -s react-id-generator to save each object’s id. In our handleClick function, we will start by finding the coordinates from the event, initializing an empty object, storing the latitude and longitude in the object, and then pushing the object into a copy of the locations array. We then set the state to equal our locations copy, and update the current map view to be the current marker. Our code will look something like this:
- Let’s add our onClick listener to the map, so whenever the map gets clicked, it adds the new location to the locations array:
- The final step is to map through the locations array and create markers on the map for each one. Now, when a user clicks on the map, they add a marker:
And that’s a quick intro to using react-leaflet for geolocation and plotting locations on a map. Be sure to share your projects with me and check out the source code on Github! Happy coding!
