React leaflet map
Hi friends, in this article I will explain React leaflet map using an example.
React Leaflet map
The leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.
Most developers are familiar with google map and map box. But both are not free to use. If you want to use google map or map box you need to create an account and sometimes you may need to pay for their services.
Do we have any alternative to use?
Yes, Leaflet map is an alternative. The leaflet is open-source and free. It is a lightweight, open-source mapping library that utilizes OpenStreetMap.
In this blog, I will cover these topics.
- Show the map using React-leaflet.
- Show the markers.
- Set the default icon for the markers.
- Show the pop-up box.
- Show the map in the full-screen view
Implementation
First, create a react project.
$ create-react-app react_leaflet
$ cd react_leafletAfter created react project moves to the project directory.
Install React-Leaflet.
$ npm install react-leaflet leafletIf you face any struggles to install React-leaflet then follow this document.
Once the installation is completed then we will start writing code.
Show the React-Leaflet map
Create a react functional component and write the below codes.
In the TitleLayer component, we need to give the value for the url field. It is mandatory to give value otherwise it will throw an error.
Then move to index.js file and import and render the Leaflet map file.
Note one thing it is necessary to import leaflet style.
import 'leaflet/dist/leaflet.css';For the map, we need to set up a style to view the map. Set style for Map component<Map className=”map”> .
In index.css file set height for map otherwise, we can not see the map in the view.
.map {
height: 100vh;
}Now we can see the below output.
Show the markers
The above code is an example of showing the markers. For showing the markers, you need to give latitude and longitude value for the position.
If you want to see pop up box once you click the marker you need to write onMouseOver and onMouseOut.
<Marker
position={[data.latitude, data.longitude]}
onMouseOver={(e: any) => {
e.target.openPopup();
}}
onMouseOut={(e: any) => {
e.target.closePopup();
}}
>Set the default icon for the markers
Using the below code we can set up default Icon for all markers.
Now you can see the below output.
Show the map in the full-screen view
For showing map in a full-screen view, we need to install a plugin.
$ npm install react-leaflet-fullscreenImport below lines in your code.
import 'react-leaflet-fullscreen/dist/styles.css';
import FullscreenControl from 'react-leaflet-fullscreen';
Write <FullscreenControl position=”topright” /> before closing the Map component.
Now you can see the below output.
Thank you for reading. Have a nice day.
