Map in React js with popup and sidebar

Maps in React series

In this series, we will learn how to create a map app in React with popups, a visualization switcher, geocoding control, 3D terrain, and a sidebar.

• Episode 0: Map in React JS with Material UI
• Episode 1: Map in React JS point data from geojson data
• Episode 2: Map in React JS create a heatmap
• Episode 3: Map in React js with popup and sidebar
• Episode 4: Map in React js with geocoding control
• Episode 5: 3D Map in React js with geocoding control

This example is the Episode 3 of the Maps in React series. In this step-by-step tutorial, you’ll learn how to create a map with a sidebar and popup in your React JS map using the MapTiler SDK JS.

In this example, I’ll focus on creating popups and a sidebar.

By the end of this tutorial, you will be able to create a popup and a sidebar. With your newfound knowledge, you will be able to create visually stunning maps with React + MapTiler SDK. Take a look at the final output of this tutorial below:

^{Click on a point to see its information in the sidebar}

When you want to show info in a pop-up, the best place to start is to check which attributes your data has. You can do that simply by looking at the json of your data, or you can open the data in the vector data editor and look at the type of each attribute.

1. This tutorial builds on Map in React JS create a heatmap code. (That tutorial shows how to create a heatmap and a layer switcher).

2. In the src/components/Map/map.jsx component, create a new useEffect, with a map.on function. This function will react to clicks en the pointLayer.

3. Let’s create a new Popup. It will take coordinates from the clicked feature and the description from the feature property name.

4. Now we can see the name of the accommodation. You can add more information to the popup, but having them in the sidebar will give us more space for all the details.

   

5. Let’s create a new sidebar component to put all the information in it!

6. Create a new folder called Sidebar inside the components folder.

7. Create a new file called sidebar.jsx inside the Sidebar folder. We will use the Material UI persistent drawer. Write the following lines in the sidebar.jsx:

8. Import the sidebar to the Map component. We want to pass props from the map component to the sidebar. It is easier if props are passed just down from the map to the sidebar. If you prefer to merge the map navbar and sidebar in App.jsx, you can, but your code would be a bit less straightforward because you would need to use the useContext hook.

9. Render the Sidebar. Update the Map return function.

10. Just passing sidebar to the map component wouldnt work. This will not work at first because the example sidebar includes a navbar and text field. Let’s modify the sidebar.jsx file to work with our map.

11. First, remove the navbar part. That is the AppBar component.

12. Let’s check out map now, the navbar is gone, but sidebar is still not working.

    

13. Let’s remove everything that’s not necessary from our Sidebar component. We’re only interested in the Drawer with its header and the List. Replace all the code in the sidebar.jsx file with this:

14. Change the name of my map in the navbar. Open the /src/components/Navbar/navbar.jsx and change this line

15. We decided that the sidebar would just overlay my map, and We would reposition the visualization switch button. Create a Main component. To avoid unnecessary tile rerendering, it’s better if the sidebar just overlays the map.

16. Render the Main component and move the button inside it. Change the button top to 84.

17. Add some style to the Main component. Add these lines to the map.css file.

18. Change the .container position to absolute.

19. Add the handlers to the Nabvar and Sidebar components to open and close the Sidebar. Update the Map component.

20. Create a new states isOpen and clickedItem. We want the sidebar to be closed on map load. So the initial state should be false.

21. Get the clicked feature on the map and store it in the clickedItem state. We will also open the sidebar.

22. Update the sidebar to show the information of the selected feature. Update the sidebar.jsx file.

23. Congratulations! You have created a map with a sidebar to show the information of the selected item on the map.

    

Full code to download

We have created a repository with the result of this tutorial that will serve as a basis to build future applications. You can access the repository at Maps in React.

Next episode

Continue to Episode 4: Map in React js with geocoding control to learn how to create a map with a geocoding control in your React JS map using the MapTiler SDK JS.

Related examples

Points from geojson

Example

In this step-by-step tutorial, you’ll learn how to add geojson points to your React JS map using the MapTiler SDK JS

Heatmap

Example

In this step-by-step tutorial, you’ll learn how to create a heatmap in your React JS map using the MapTiler SDK JS

Geocoding control

Example

In this step-by-step tutorial, you’ll learn how to create a map with a geocoding control in your React JS map using the MapTiler SDK JS

3D Terrain Map

Example

In this step-by-step tutorial, you’ll learn how to create a 3D terrain map with a geocoding control in your React JS map using the MapTiler SDK JS