A truly great feature of Leaflet is its convenient popup management. We don't have to create any kind of popup mechanism (HTML elements, close button, or custom code on different events); Leaflet can create full-fledged popups automatically just by providing an HTML string. An HTML string is a simple string that can contain HTML tags. The HTML tags are interpreted rather than printed directly, and the resulting DOM structure is rendered instead. Let's create some popup content for our houses layer:

1. Add an additional property to the optional list of properties of the L.geoJson.ajax layer. The property name must be onEachFeature. It requires two properties: one for every processed feature and one for the processed feature's layer object, which has the bindPopup method. The function can be void; therefore, it does not need a return value:

        onEachFeature: function(feature, layer) {

        }

2. In the function, first, create an HTML string and save it into a variable. Different strings can be concatenated with the + operator. When a number is added to a string, the number is automatically converted into its string representation. Use three attributes of the features--the name containing the street name, the size containing the size of the house, and the price containing the price of the house. Additionally, use the <br> tag to insert line breaks:

        var htmlString = 'House on ' + feature.properties.name +
         '.<br>Size: ' + feature.properties.size + ' m²<br>Price:
         ' + feature.properties.price + ' HUF';

3. Bind a popup to the feature using the layer object's bindPopup method. It requires only an HTML string as a parameter:

        layer.bindPopup(htmlString);

Our house map now annotates some of the attributes of our houses: