How to sync the map with a list of places

This tutorial shows how to sync the map with a list of places.

This tutorial will guide you through the process of creating a compilation of locations and synchronizing it with a map. The map will display markers for each of these locations. By following these steps, you will be able to generate a list of places where selecting an item from the list will automatically select the pin on the map. Similarly, when making changes to the map view, the list of places will be updated to only show the locations that are currently visible on the map. Additionally, selecting a place on the map will highlight and select the corresponding item on the list.

Download the shoe sample icon and the selected shoe sample icon, The icon is from the Maps Icons Collection. Download the shoe shops GeoJSON sample data

Copy the following code, paste it into your favorite text editor, and save it as a .html file.
Install the npm package.
Include the CSS file.

If you have a bundler that can handle CSS, you can import the CSS or include it with a <link> in the head of the document via the CDN
Include the following code in your JavaScript file (Example: app.js).
Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.
The next is up to you. You can center your map wherever you desire (modifying the starting position) and set an appropriate zoom level (modifying the starting zoom) to match your users’ needs. Additionally, you can change the map’s look (by updating the source URL); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application.
We are going to modify the structure of the web page to have two main elements: a sidebar (aside) where we will show the list of shoe stores and the main area (main) where we will display the map.
Add the CSS classes to create the simple Flexbox Layout for the Sidebar + Main Content Area
Reload the page. Now you should see the app in your browser.
Add an event handler for the map load event. You will add code to create a GeoJSON source and a vector layer in this handler. We will also add other map event handlers.
Add a custom images to the map. You can use any image or download the shoe image and the selected shoe image we used in the tutorial. In the example, these images are in the same folder as the index.html file
Create GeoJSON source. The following snippet creates GeoJSON source hosted on MapTiler Cloud (check out the How to Upload GeoJSON to MapTiler Cloud tutorial). Publish the dataset and copy the link to the GeoJSON. Download the shoe shop GeoJSON sample data. In this example we will add a random image (in the photo property) to each of the map elements.
Add the vector layer. In this example, we will use the shoe image to display a point layer using a custom PNG icon as a pin.
Now you should see the map with pins.
Change the cursor to a pointer when the mouse is over the points layer.
Create the list with the elements that are displayed on the map.
Update the list when the map view is changed. With this event, we will have the map view and the list synchronized. Every time the view is updated (zoomed, panned) the “Search in this area” button is displayed. This will allow us to refresh the list and only show the elements that appear on the map.
Get the point layer elements when the user clicks on the map. With the click event, the user will be able to select an element on the map. This will allow us to select the same item in the list.
We are done with the functions that are executed when the map is loaded. Now we will create the functions outside of the load event handler.
Get the elements that are visible in the map view.
Select a map element when the user clicks on it.
Create a list of places.
Create the list style. Add the list style to your stylesheet.
With everything done up until now, you should be able to see your map and the list of places in your browser.
Next, we are going to add some events to link the list with the map. These events will ensure that when a list item is clicked on, the corresponding marker on the map is selected and centered on the map view.
We have already made it so that selecting an item from the list selects it on the map. Now we will do the other way, when selecting an element on the map it is selected in the list.
At this point we already have the list linked and synchronized with the map. Now we will create some functions to toggle the selected elements so that we have only one element selected in both the list and the map.
Finally, we need to show the “Search in this area” button when the map view is updated and update the list when the user clicks the button.
Congratulations! You have your map with place markers synchronized with the list of places.