Creating Popups on Points in Leaflet

Included in this tutorial:

• Why Add Popups? 

• Creating a Simple Popup with an example

Software version in examples: Leaflet 1.9.4

Tutorial Data: The tutorial includes demonstration with sample data available here.

Credits: L. Meisterlin & Steven Dela Cruz Duncan (2025)

In this tutorial, we cover how to create popups (aka tooltips) on point data using Leaflet. Popups allow users to interact with individual points on your map and view custom content, such as information about a location, when they click on a marker.

Related Tutorials:

• Plotting Points in Leaflet

• Getting Started with Leaflet

---

Why Add Popups? 

Popups are a core feature of interactive web maps. They allow users to click on specific map features, such as points, polygons, or lines, and reveal more detailed information. Popups are commonly used to display data stored in a layer’s attribute table, such as place names, descriptions, statistics, or other reference information.

In this tutorial, we will cover how to create a popup that displays the geographic coordinates of each point. However, this method can be easily adapted to show any column from your dataset, giving you flexibility in what each popup communicates.

---

Creating a Simple Popup

This tutorial assumes you already have a Leaflet map set up and have plotted the points from a GeoJSON file. In our example, we are using the points1_table_join.json file from previous tutorials (linked above). We will now use that same file and code to make markers with popups that display the information about the latitude and longitude coordinates of each point.

Writing and Styling the Popup, with an Example

Put simply, to add a popup to a point, we include a few simple lines code inside the existing geoJSON block where the features (points) are styled. 

Here, we will demonstrate with an example: the popup will display the coordinates of the point, but you can modify it to show any attribute from your dataset. To do this, add a few lines of code to your html file, described below.  

code to add popup marker on points

(The text featured in the screenshot image above is replicated below.)

L.geoJSON(data, {
    pointToLayer: function(feature, latlng) {
	    const lon = feature.geometry.coordinates[0].toFixed(6);
	    const lat = feature.geometry.coordinates[1].toFixed(6);
	    const popupText = ‘This point is located at Longitude: ${lon}, Latitude: ${lat}’;

	    return L.circleMarker(latlng, {
	   	    radius: 3, // Set marker size
		    fillColor: ‘green’, // Fill color
		    color: ‘black’, // Outline color
		    weight: 1, // Border width
		    opacity: 1,
		    fillOpacity: 0.8
	    }).bindPopup(popupText); // Attach the popup to the marker
    }
}).addTo(map);

In this example, we have written a function that…

1. defines two variables (called “lon” and “lat”) as the x and y coordinate, respectively, per point;

2. calls upon those variables in the popup’s text (“popupText”); then

3. returns that text within a popup at each point’s marker. 

Once added, clicking on any point in your map will display its own popup. It should look something like this:

View fullsize

Clicking on each point reveals a popup showing its coordinates.