Mapping with React Leaflet.js
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.
<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.
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='©
<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.
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:
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.
