Medium Brython user location mark was added

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 success(pos):
    # Display coordinates
    ul = html.UL(id="nav")
    ul <= html.LI(f'latitude: {pos.coords.latitude}')
    ul <= html.LI(f'longitude: {pos.coords.longitude}')
    document["coords"] <= ul

    leaflet.marker([pos.coords.latitude, pos.coords.longitude]).addTo(mymap).bindPopup('<b>ตำแหน่งของคุณ</b>')

def error(error):
    print("Your browser doesn't support geolocation")

def click(ev):
    print('click')

# 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)

window.navigator.geolocation.getCurrentPosition(success, error)

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

</script>
{% endblock body %}