Mapping with React Leaflet.js

Photo by Charlotte Noelle on Unsplash

When we’re talking about creating an application with a map feature, people tend to think of using Google maps. That’s my first thought if I am going to implement one in mine, but I also came across a library that we can use in JavaScript and React to render a map.

What is React Leaflet?

Leaflet.js is an open-source JavaScript library for mobile-friendly interactive maps, developed by Vladimir Agafonkin and launched in 2010. It is used in conjunction with OpenStreetMap for map data but can utilize other services, including Google maps. In this blog, we are going to use React-Leaflet which provides bindings between React and Leaflet. It does not replace Leaflet but leverages it to use Leaflet Layers as React components. Link at the bottom of the page if you’re interested in reading the Documentations.

First, we want to create a new react app by typing this command on your terminal npx create-react-app my-app . After that,cd my-app and you should be in your app directory.

Install the libraries with the commandnpm install leaflet react-leaflet inside your app folder. After you’re done installing the libraries, we want to add some CSS link to the <head> of index.html file in order to get the map displaying correctly.

index.html
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""
/>

And then create a new css file inside your src folder to control the size of your map display.

This will give you a full-screen map.

inside your App.js, import the files from react-leaflet at the top of your file page and the css file you just made.

Remove any unnecessary code inside the App.js file, and create a function:

// App.jsimport react from 'react';
import { Map, TileLayer } from 'react-leaflet';
import './App.css'
function App() {
return <Map></Map>
}
export default App;

If you run npm start at this point, you should see a screen with a map that is not showing anything, followed by an error (Error: Set map center and zoom first.). The map component requires that we set a center position(an array of latitude and longitude) and the default zoom level:

<Map center={[Latitude, Longitude]} zoom={10}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy;
<a href="http://osm.org/copyright">OpenStreetMap</a>
contributors'
/>
</Map>

You can set the Latitude and Longitude to any coordinates you like, (I used latlong.net to find the city I wanted) and it will set your default map location when you first render the map, zoom level 10 sets the zoom radius which you can change to a smaller or bigger number. The <TileLayer/> component and the code inside the example above are necessary to give attribution towards OpenStreetMap, otherwise, the map will not render and you will only see a grey square. You can read more about this on the link at the bottom of this page.

New York City

And you should have the map rendered!

There are other components you can use to add more features, such as <Marker> and <Popup> That can put up a marker on the map and create a popup notification on click:

Leaflet with <Marker> and <Popup> component

Conclusion

Why use React Leaflet instead of Google Maps?

Obviously, Google maps have a much better database for places, directions, street view, and a lot of other attributes. Many features will prove too much effort for those looking for a plug-n-play solution when using Leaflet, but the ability to design your map without fear of licensing or maybe ads and unexpected data changes might make Leaflet the choice for some developers.

--

--

--

Aspiring Software Engineer, currently a student at Flatiron School Software Engineering Program

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Create a Chatbot with Dialogflow, NodeJS, and Webhooks

Styling in React

Making Typing Animation with React Hooks

Establishing a connection with MongoDB and React using Koa js

Angular 10 Login Form using Reactive Forms.

Trending Programming Memes to Lighten Up Your Mood

User handling with Firebase and Angular

//platform.twitter.com/widgets.js from Twitter https://twitter.com/thepoolsideceo

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cannigia Laluw

Cannigia Laluw

Aspiring Software Engineer, currently a student at Flatiron School Software Engineering Program

More from Medium

Working with LedgerDimension values from posted transactions in D365FO

Creating my first Microsoft Independent Connector — step by step guide for WorldTime API

Deep Dive in Tradefeeds Analyst Ratings API and Database

IBS 2022 — Smart & Stylish