Map in React js with popup and sidebar

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:

Display MapTiler SDK JS map using React JS with Material UI

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.

    Display a popup in a map with React JS

  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.

    Add a Sidebar to a map with React JS

  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.

    Display sidebar with map information using React JS with Material UI

Maps in React series

This example is the third episode of the 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.

Related examples

Map in React JS point data from geojson data

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
Map in React JS create a heatmap

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
Map in React js with geocoding control

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 Map in React js with geocoding control

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