Python Leaflet openstreetmap log 1

又學新野. 

做左頭兩個, 因為係JS 都可以見到個效果, for detail 睇下面

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

- Add 左 Map, popUp, 同埋 marker

{% extends "base.html" %}

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

    <div id="mapid" 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: 14
                 });

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

                 nukPopup = L.popup().setLatLng([22.7249, 120.2540]).setContent("蚵仔寮潮位站")
                 myMap.openPopup(nukPopup);



            });
        })($);


    </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 %}