Build an interactive Map with React and React Leaflet
Build an interactive Map tool with React and React Leaflet
If you would like to build a React app featuring an interactive map, then you’re in the right place!
Objectives
In this series of articles, we are going to build an interactive map tool using the React Leaflet library. We are going to implement three different types of layers, specifically:
- a layer of polygons
- a layer of points
- a WMS layer (images obtained from a Web Map Service)
The first two layers will depend on each other and, to reflect the relationship existing between them, we are going to add a level of interaction where the selection of one of the polygons of the first layer will actually affect the outcome and the shape of the second layer, where only those points related to the selected polygon will be displayed.
Also, we are going to use a few more features of the React Leaflet library, such as the Tooltip and the LayersControl, which is useful if you want to switch between different base layers. Finally, we are going to build our own custom control and use it to display relevant information regarding the selected polygons/points.
If that sounds interesting, keep reading!
List of requirements
Summary
- Intro
- Create a basic React app
- Install Styled Components
- Install React Leaflet
- Start building Map
- Add a LayersControl
Intro
Throughout this first article, we are going to start building a simple map to which we will add a base layers control, which will allow us to choose between different base layers. But first, let’s create our React app!
Create a basic React app
To create a basic React app, run:
npx create-react-app [your-app-name] --use-npmAlso, to have your new app work with react-leaflet, make sure you edit your package.json file by setting its browserslist property to:
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
]You can read the whole thread at this link.
Install Styled Components
We have used the Styled Components library to style our components. To install it, move into your new project directory and run:
npm install --save styled-componentsInstall React Leaflet
First things first, we must install the React Leaflet library. To do so, use the following command:
npm install --save leaflet react-leafletAt this point, you can import the necessary components from react-leaflet and use them to start building your Map.
Start building Map
Create a Map component and import React Leaflet's MapContainer - it will wrap all of our Map's elements. Also, make sure Leaflet's CSS is loaded by importing 'leaflet/dist/leaflet.css'.
// app/src/components/Map/Map.js
import styled from 'styled-components';
import { MapContainer } from 'react-leaflet';import 'leaflet/dist/leaflet.css';// Style React Leaflet's MapContainer to take 100% of the page's size
const MapWrapper = styled(MapContainer)`
width: 100vw;
height: 100vh;
`;// Define initial bounds
const initBounds = [
[42.5993718217880613, 1.5937492475355806],
[45.9312500000000341, 7.6656250000000341]
];const Map = () => {
return (
<MapWrapper
bounds={initBounds}
zoom={8}
scrollWheelZoom={false}>
</MapWrapper>
);
};export default Map;
Now add your Map to App.js
And ta-dah! You have already laid the foundation of your Map! So far the Map is only displaying a grey rectangle though so let’s go ahead and add more features to it. Let’s start with a LayersControl.
Add a LayersControl
The LayersControl will allow the user to choose between different base layers. First, we need to build a JSON file containing the different base layers' information. Our Map features three different base layers so our baselayers.json file looks like this:
Now we need a BaseLayer component:
And since we want our map to feature more than just one base layer, we are going to need a BaseLayersFactory that returns one BaseLayer for each base layer in our baselayers.json file.
At this point, all that remains to do is just wrap our BaseLayersFactory component with React Leaflet's LayersControl and place it inside our MapWrapper.
Your map should now look like this:
Try changing the map’s base layer using the base layers control in the top-left corner and see what happens!
Interested in discovering how we can further enhance our Map and make it even more interactive? Stay tuned! Soon we will be publishing a new article in which we are going to discover more interesting features and add two new layers to our Map: a layer of polygons and a layer of points.
We are also going to discover how you can play with these layers so that by clicking on a certain polygon (first layer), the points layer (second layer) gets loaded onto the map and filtered in order to only display those points related to the selected polygon. Cool, right?
If you found this article inspiring, please give it a thumbs-up, and don’t forget to share it with the world! Thanks a lot and see you next week!
