React Leaflet & TypeScript: Build Interactive Maps

In today’s web development landscape, integrating maps into applications has become increasingly popular. Whether you’re building a location-based service, a travel app, or a simple data visualization project, having a reliable mapping library is essential. This article will guide you through creating a simple map using React, TypeScript, and LeafletJS. By the end, you'll have a functional map application and a solid understanding of how to leverage React Leaflet for your projects.

What is React Leaflet?

React Leaflet is a powerful library that provides React components for Leaflet, a popular open-source JavaScript library for interactive maps. It allows developers to easily integrate and customize maps in React applications while taking advantage of the flexibility and capabilities of LeafletJS. With React Leaflet, you can create responsive, interactive maps that can display various geographic data layers and user interactions.

Setting Up Your Project

1. Create a New React Project

First, create a new React project using Vite with TypeScript template:

2. Install Required Packages

Next, install the necessary packages, including React Leaflet and Leaflet:

Also, you will need to install the types for Leaflet:

3. Include Leaflet CSS

To properly display the map, you need to include Leaflet’s CSS. Open the src/App.tsx file and add the following line:

Creating Your First Map

1. Set Up the Map Component

Now, let’s create a simple map component. Create a new file called MapComponent.tsx in the src directory:

2. Update Your App Component

Next, import the MapComponent into your main App.tsx file and render it:

1. Run Your Application

Now, you can run your application to see the map:

Open your browser and navigate to http://localhost:5173/. You should see a simple map centered on Singapore!

Let’s style the map. Open index.css, clear its contents, and add the following class for .leaflet-container:

Adding Markers and Popups

1. Install Marker Component

To add markers and popups, you will need the Marker and Popup components from React Leaflet. Modify your MapComponent as follows:

2. Test Your Markers

Run your application again. You should now see a marker on the map, and clicking it will open a popup.

Add Shapes to the Map

Here’s how to add different shapes like polygons, circles, and rectangles to your map. Modify your MapComponent.tsx:

1. Explanation of the Code

Polygon:

• A polygon is drawn by specifying an array of latitude and longitude points in the positions prop.
• In the example above, a triangle-shaped polygon is created with three sets of coordinates.
• You can change the color property to any valid CSS color.

Circle:

• A circle is drawn by providing a center prop with a latitude and longitude and a radius (in meters).
• In this case, a blue circle with a 500-meter radius is drawn.

Rectangle:

• A rectangle is defined by two opposite corners using the bounds prop.
• The rectangle is rendered as a green box on the map.

1. Run Your Application

To see the shapes on your map, run the application:

1. Customizing Shapes

You can further customize the shapes by adjusting properties like:

• Color: Modify the color prop to change the border color of the shape.
• Fill color: Use the fillColor prop to set the inside color of the shape.
• Stroke weight: Adjust the border thickness with the weight prop.
• Opacity: Use fillOpacity and opacity to control transparency.

Example:

With React Leaflet, adding shapes such as polygons, circles, and rectangles to your maps is simple and efficient.

Common React Leaflet Events

Let’s explore how you can use React Leaflet events in your project, including how to listen for and respond to events like map clicks, marker drags, and zoom changes.

Here are some of the most commonly used events in React Leaflet:

• Map Events: onClick, onZoom, onMove, onLoad
• Marker Events: onClick, onDragEnd, onMouseOver, onPopupOpen
• Layer Events: onAdd, onRemove, onPopupOpen

Each component (such as MapContainer, Marker, Polygon) can listen for different events depending on its type. You can pass event handlers directly to these components as props.

Example: Handling Map Click and Marker Events

Let’s create an example where we listen to map clicks and move markers to the changes.

Create MapWithEvents.tsx component:

Explanation:

• onClick Event: Captures the latitude and longitude of the point where the user clicks on the map and updates the state with that information.

Display the Map

Finally, you need to render the MapWithShapes component in your main MapComponent.tsx file:

List GeoJSON Location Data in the Map

Let’s display a list of all the parks in Singapore using GeoJSON location data. You can download or copy the list from here - https://data.gov.sg/datasets/d_14d807e20158338fd578c2913953516e/view. If you choose to download it, rename the file to Park-Facilities.json.

Now, let’s create the Parks.tsx component and render it inside the MapComponent.tsx

Connect it to MapComponent

Loading all of these markers took quite some time because Singapore has a large number of parks 🤩

Render names on Markers

To render the names on the parks we need to modify the GeoJSON function:

Now when we click on the marker, we can see the name of the park, or his id number

Costumize the Markers With Custom Icons

You can create a custom icon by using L.icon(). This function allows you to set the URL for the icon image, size, anchor points, and more.

Download the icon:

Modify the Parks.tsx component:

The Explanation:

1. L.icon(): This method is used to define a custom Leaflet icon.

• iconUrl: The URL or path to the image file for the custom icon.
• iconSize: Defines the width and height of the icon.
• iconAnchor: Specifies which point of the icon image corresponds to the exact geographical location (usually the bottom center of the image).
• popupAnchor: Determines the position of the popup relative to the icon.

1. pointToLayer: A function that is called for each point feature in the GeoJSON file. It converts each park location (latlng) into a marker with the custom parkIcon.

Toggle Between Different Lyers With LayersControl

To add a Layers Control to a React Leaflet map, you can use the LayersControl component provided by React Leaflet. This allows you to toggle between different layers on the map.

Setup the Layers Control

Now, let’s set up different tile layers (like a satellite view, street view, etc.) and markers as layers that can be toggled using LayersControl.

Import Required Components

You will need LayersControl, LayerGroup, and optionally Marker or any other components for different layers.

Explanation of LayersControl:

LayersControl: This component wraps all layers you want to control. You can switch between base layers and toggle overlays on or off.

• BaseLayer: Represents layers that switch between each other. Only one base layer can be active at a time.
• Overlay: Represents layers that can be turned on or off independently from the base layers.

Base Layers:

• We define two base layers: one using OpenStreetMap tiles, and another using a satellite view. Only one of these can be visible at a time.
• The checked attribute on a BaseLayer makes it the default layer when the map loads.

Overlays:

• The Overlay layer is for additional features that can be toggled on and off independently of the base layers.
• In this case, we add a marker as an overlay.

LayerGroup:

• Groups multiple layers together.
• Inside the LayerGroup, we have a several markers, each at different coordinates. These markers will be treated as one group.
• The Overlay component here wraps the LayerGroup, allowing you to toggle the visibility of the grouped markers via the control or a button.

You can find the code from the article on the github.

Conclusion

In this article, we covered how to create a simple map using React, TypeScript, and LeafletJS. You learned how to set up your project, create a map component, add markers and popups, and customize your map’s appearance. With these skills, you can further expand your application by integrating additional features like user location tracking, clustering, or displaying geographic data.

By mastering React Leaflet, you’re well on your way to building engaging and interactive map-based applications that enhance user experiences. Happy coding!