Python Leaflet openstreetmap log 3 polyline polygon circleMarker zoom control

Good Example

https://ithelp.ithome.com.tw/articles/10204277

polyline

polygon
circleMarker

{% extends "base.html" %}

{% block content %}
    <h1>Welcome to our site</h1>

    <div id="mapid" style="width: 80%;"></div>
    <div >Image</div>
    <div id="mapid2" style="width: 80%;"></div>

    <script type="application/javascript">
        (function($){
          $(document).ready(function(){
                $('#mapid').height(window.innerHeight);
                var myMap = L.map('mapid', {
                    center: [22.73444963475145, 120.28458595275877],
                    zoom: 6
                 });

                //   imageBounds = [[18.600625745, 115.976888855],[27.79937425, 126.02300114]];

                //https://opendata.cwb.gov.tw/fileapi/opendata/MSC/O-B0030-003.jpg
                var imageUrl = '/static/website/abc.jpeg',
                    imageBounds = [[19.500625745, 115.976888855],
                                    [28.09937425, 126.02300114]];
                imageUrlLayer = L.imageOverlay(imageUrl, imageBounds, {
                    opacity:0.4
                }).addTo(myMap);

                 L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
                     maxZoom: 14,
                        attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
                   }).addTo(myMap);

                 var NUK = L.marker([22.73444963475145, 120.28458595275877]);
                 myMap.addLayer(NUK);

                 L.marker([22.73444963475145, 120.28458595275877], {
                    draggable:true,
                    autoPan: true,
                    autoPanPadding: [200, 200],
                    autoPanSpeed: 25
                }).addTo(myMap);



                 L.marker([22.7249, 120.2540])
                 .bindPopup("<h2>蚵仔寮潮位站</h2>").addTo(myMap);

                L.circleMarker([22.73444963475145, 120.28458595275877]).addTo(myMap)
                L.circleMarker([22.73444963475145, 120.28458595275877],{
                    radius: 30
                }).addTo(myMap);

                L.polyline([
                //高雄大學路
                [[22.73264868398435, 120.28450012207031],[22.72837380478485, 120.28450012207031],[22.723307108275556, 120.28604507446288]],
                //大學南路
                [[22.727502979677855, 120.27437210083008],[22.732094540515035, 120.28209686279295],[22.732569520769065, 120.29059410095213]],
                //藍昌路
                [[22.73241119420103, 120.29239654541016],[22.721644557594896, 120.29093742370605]]
                ]).addTo(myMap);


                L.polygon([
    [[22.72979877936457, 120.27806282043456],[22.732134122265894, 120.28162479400635],[22.73252993914425, 120.29046535491942],[22.73684426881351, 120.29025077819824],[22.737715034437908, 120.28591632843016],[22.735617271475324, 120.28505802154541],[22.73767545430257, 120.2777624130249],[22.733717382905326, 120.27643203735352],[22.733638220308723, 120.27523040771484],[22.72979877936457, 120.27806282043456]],
    [[22.731461230943435, 120.27870655059813],[22.732292449154702, 120.28007984161376],[22.733163243766654, 120.27900695800781],[22.73264868398435, 120.27767658233643],[22.731461230943435, 120.27870655059813]]
]).addTo(myMap)






            });
        })($);


    </script>


    <p>This is demo applicaiton for the course
        <em>Getting started</em>
        <a href="www.google.com">Google</a>
    </p>
   <h2>Meeting</h2>
  <img src="/static/website/calendar.png" width="100px" >

<ul> {% for meeting in meetings %}
    <li>
        <a href="{% url 'detail' meeting.id %}">
            {{ meeting.title }}
        </a>
    </li>
    {% endfor %}
</ul>
    <a href="{% url 'rooms' %}">Rooms list</a>
{% endblock %}