Medium Brython map add OpenStreetTileLayer

map.html

{% extends '/base-map.html' %}
{% block body %}
<div>
    <p id="coords"></p>
    <div id="mapid" style="margin: 1em;"></div>
</div>
    
<script type="text/python">
from browser import alert, document, window, html

world_map = document["mapid"]

center =  (7.0166666, 100.4666648) # hatyai coords
zoom = 10

# Access the leaflet.js API
leaflet = window.L

def click(ev):
    print('click')
# Display coordinates
ul = html.UL(id="nav")
ul <= html.LI(f'latitude: {center[0]}')
ul <= html.LI(f'longitude: {center[1]}')
document["coords"] <= ul

# Create world map
mymap = leaflet.map('mapid').setView(center, zoom)
leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    "maxZoom": 19,
	"attribution": '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap)

# Put marker on map
leaflet.marker([center[0],center[1]]).addTo(mymap).bindPopup(f'''ใจกลางหาดใหญ่ คือ <b>{center}</b> </br>
    ไก่ทอดอร่อยมาก แต่ชานมไข่มุกอร่อยกว่า''')

</script>
{% endblock body %}