Placing all Lat and Long markers from database onto Openstreet/Leaflet map from sql results

I am able to , from my database table , place one marker onto map based on queried result . The problem is I am unable to place more than one marker on the map when my results are more than one . So basically , I want to place all lat & long markers from sql query in db onto OSM/Leaflet MAP .

I have seen a similar example , but the coding is not quite the same .

def search_all(self):

    print ('Searching All...')

    looking = str(self.lookall.text())        

    conn = Connection to DB 

    cursor = conn.cursor()        
    query = "SELECT*FROM Relevant Tables"
    cursor.execute(query)    
    results = cursor.fetchall()
    self.tableWidget.setRowCount(0)        
    for row_number, row_data in enumerate(results):            
        self.tableWidget.insertRow(row_number)            
        for column_number, data in enumerate (row_data):                
            self.tableWidget.setItem(row_number,column_number,QtWidgets.QTableWidgetItem(str(data)))

            pass
        pass

for i in range(1,len(results)):


        lat = results[i][5]
    long = results[i][6]]

        print (lat)
    print (long)

results are printed like below:

        html = """<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
      integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
      integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
      crossorigin=""
    ></script>
  </head>
  <body>
    <div id="mapDiv" style="width: 1300px; height: 500px"></div>

    <script>
      var lat = { lat };
      var long = { long };
      var len = { lent };
      var i = 0;

      for (var i = 0; i < { lent }; i++) {{
        marker = new L.marker({ lat }, { lon }).addTo(map);
      }}

      map = L.map("mapDiv").setView([lat, lon], 13);

      L.tileLayer("https://tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png", {{
        attribution:
          'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',

        maxZoom: 20
      }}).addTo(map);

      // add marker to the map

      marker = L.marker([lat, lon]).addTo(map);
    </script>
  </body>
</html>"""

    os2 = html.format(lat = lat,lon = lon , len = lent)

    self.view.setHtml(os2)```

I am able to get my lat and longs from SQL query from DB . I am not quite sure how to implement this into the HTML code for OSM . The string formatting I do doesn't seem to doesn't seem to do the trick . As get no updated map

Solution

The idea in this case is to concatenate the coordinates:

# ...
coordinates = []
for result in results:
    coordinates.append((result[5], result[6]))

lat_center = sum([coordinate[0] for coordinate in coordinates]) / len(
    coordinates
)
lng_center = sum([coordinate[1] for coordinate in coordinates]) / len(
    coordinates
)

html = r"""
<!DOCTYPE html>
    <html>
        <head>
        <style type="text/css">
                html { height: 100%; }
                body { height: 100%; margin: 0; padding: 0 }
                #mapid { height: 100% }
        </style>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
        </head>
    <body>
        <div id="mapDiv" style="width:100%; height:100%"></div>
        <script>
"""
html += "var map = L.map('mapDiv').setView([{lat}, {lng}], 10);".format(
    lat=lat_center, lng=lng_center
)
html += """
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
"""

for latitude, longitude in coordinates:
    html += "L.marker([{lat}, {lng}]).addTo(map);\n".format(
        lat=latitude, lng=longitude
    )

html += "</script> </body> </html>"
self.view.setHtml(html)

Output:

If you want to do this more elegantly you could use Jinja2 or better folium