Adding markers and popups

In this recipe, you will learn how to add markers with popups dynamically. We will enhance the previous recipe, which displays a map, and we will add a button that will open a popup in which we can type coordinates.

When we click on the OK button, a new marker will be created, and the map will zoom and pan to the location of this marker; if there are multiple markers, it will zoom to fit them all.

How to do it…

Perform the following steps:

1. Create a map and add a base layer.

2. Then add new markers to the map using L.marker([latitude, longitude]).addTo(map);.

3. Use bindPopup('enter html content here') to bind a popup to the marker.

Adding a basic marker with a popup

Here are the steps to be performed:

1. Open the chapter-4-example4-starter project folder in your favorite text editor. The project contains the map we used in other recipes with a New Marker button. When this button is clicked on, it will trigger a new method that will open a prompt to type the coordinates. Let's create...