How to style text passed from iteration in leaflet map pop up window-CodePudding

I have a list of points in which I want to iterate and add to leaflet map. I am able to add the points to the maps but when I try to style the text using h1 tags, the style is not applied text from the iteration. From leaflet tutorials I can see that the text in pop up can be styled with header tags. How can i style this text which i am passing to the pop up window through iteration. Below is my sample code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
     integrity="sha256-kLaT2GOSpHechhsozzB flnD zUyjE2LlfWPgU04xyI="
     crossorigin=""/>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc i2uENFpDZ9YPdf5Hf D7ewM="
    crossorigin=""></script>
    <title>TestMap</title>
</head>
<style>
    #map{height : 100vh;}
</style>
<body style="margin:0;padding:0">
    <div id="map"></div>
    
</body>
<script>
var locations = [
    ["Point 1", 61, 23],
    ["Point 2", 62, 21],
  ];

var map = L.map('map').setView([ 63,27], 5.5);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    for (let loc of locations){
        //  console.log(loc[0])
        marker = new L.marker([loc[1], loc[2]])
        .bindPopup("<h1> loc[0] </h1> ")
        .addTo(map);
    }

</script>
</html>

CodePudding user response：

You can use HTML tags within the bindPopup method. For example:

locations.forEach(function(location) {
  var point = L.marker([location[1], location[2]]).addTo(map);
  point.bindPopup(`<h1>${location[0]}</h1>`);
});

This will add an h1 element around the location name within the popup.

For styling h1 element using CSS:

h1 {
  color: red;
}

CodePudding user response：

Based on the answer provided by @divyavinod6, I changed the for to forEach to perform the iteration. The forEach allows running function on the iteration element. below is the full code if it will be useful for someone else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="customstyle.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"

     integrity="sha256-kLaT2GOSpHechhsozzB flnD zUyjE2LlfWPgU04xyI="
     crossorigin=""/>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc i2uENFpDZ9YPdf5Hf D7ewM="
    crossorigin=""></script>
    <title>TestMap</title>
</head>
<style>
    #map{height : 100vh;}
</style>
<body style="margin:0;padding:0">
    <div id="map"></div>
    
</body>
<script>
var locations = [
    ["Point 1", 61, 23],
    ["Point 2", 62, 21],
  ];

var map = L.map('map').setView([ 63,27], 5.5);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

locations.forEach(function(location) {
    var point = L.marker([location[1], location[2]]).addTo(map);
    point.bindPopup(`<h1>${location[0]}</h1>`);
});

</script>
</html>