react-leaflet! It’s just too simple
While working in IoT Research Labs in Hyderabad, I was assigned the task to create the second version of their software. IoT Research labs provides Fleet Management solution, that is, providing GPS, Fuel Monitoring and many more solutions to clients who needs to maintain a huge fleet of vehicles under them. As a software engineer, specially working in front-end development, React JS was chosen as the platform of our choice. The advantage of using React is a whole new topic all-together, but here I want to share with you my experience of using react-leaflet to render and use full scale global maps in our React application.
While looking for a good and easy library for rendering maps using React, I came across Leaflet JS, one of the most widely used libraries in this segment. On further investigation, it came to notice that Leaflet has their own separate library for React JS called react-leaflet. react-leaflet was easy to grasp and with their proper documentation, even for a developer like me, who hadn’t worked with maps anytime in the past, it was quite easily understandable and straight-forward. I would suggest every developer working with React to have a look at this library is they are working with rendering global scale maps.
On installing the library on my application, I imported it like—
import { Map } from ‘react-leaflet’;
After this, it was all with the flow. Inside the render function I simply opened a Map tag and mentioned the center from which the map will be loaded from and set the extent of zoom and set the style as follows —
<Map center={56.12,47.56} zoom={12} style={{height: this.state.height}} zoomControl={false}>
Setting zoomControl to false removes the buttons to zoom in and zoom out from the corner of the map. It’s default value is true and if your require the zoom control buttons, you can leave it as it is.
Something that needs to be kept in mind, is to set the height of the map being rendered to a definite value always as without it, it may not render the map of your desire. Once used correctly, the map (with its center at 56.12 latitude and 47.56 longitude here) will be rendered. But wait —
Maps are displayed in layers, so we need to have a layer in which the map will be shown. Now, the way the APIs work is that, each time you zoom in or zoom out of the map, it makes a call to the API which in turn returns a set of smaller images ( tiles )that are displayed one after the another to show the entire map. To set a layer showing such layer we need to import a TileLayer from the same library — react-leaflet.
TileLayer has 2 basic required properties that needs to be set —
- An url — from which the API call is made
- An attribution — that is a string that we need to show at the bottom end of the map.
As mentioned earlier, IoT Research Labs is based on Fleet Management and hence, World Street Map is what we decided to use.
<TileLayer attribution=’Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012' url=’https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}' />
One can look from a set of maps from the following link —
You can set the attribution to anything or simply mention the attribution mentioned in the above link.
That’s it! You have successfully rendered a world map with react-leaflet.
Yes! It’s that simple. Give it a try!
