Python Leaflet openstreetmap log 2


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

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


GIS中常用網格圖層表示地形的高低起伏

拖曳且自動平移，並設定距邊界200pixel時，自動平移地圖，一次平移量為25 pixel。


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

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


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


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

* 不能同一個HTML 用兩個地圖, 要研究



呢個要研
imageBounds = [[19.500625745, 115.976888855],
                [28.09937425, 126.02300114]];
同埋個open source 都要諗諗.

https://opendata.cwb.gov.tw/dataset/observation?page=7

哈哈哈



{% 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]];

                var imageUrl = 'https://opendata.cwb.gov.tw/fileapi/opendata/MSC/O-B0030-003.jpg',
                    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);

                 nukPopup = L.popup().setLatLng([22.7249, 120.2540]).setContent("蚵仔寮潮位站")
                 myMap.openPopup(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 %}

Change image



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

                 nukPopup = L.popup().setLatLng([22.7249, 120.2540]).setContent("蚵仔寮潮位站")
                 myMap.openPopup(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 %}
=====================
20200713

之前出現這個問係tooltops 問題, delete 左就無事

jquery-3.2.1.min.js:2 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at e._updateContent (leaflet.js:5)
at e.update (leaflet.js:5)
at e.onAdd (leaflet.js:5)
at e.onAdd (leaflet.js:5)
at e._layerAdd (leaflet.js:5)
at e.whenReady (leaflet.js:5)
at e.addLayer (leaflet.js:5)
at e.openPopup (leaflet.js:5)
at HTMLDocument. ((index):60)
at j (jquery-3.2.1.min.js:2)

留言

張貼留言

這個網誌中的熱門文章

香港袐密行動

圖片
  好多朋友話, 時間過去, 記憶變得濛糊, 當日的好友, 今日好像已經忘記誰是誰了. 我更加向大家對薦這一本書. 我不會講書中的故事, 因為大家都有自己的故事. 當中你會回憶當年的你, 而你我的回憶不同, 雖然我們曾經在時空交雜過, 可是我們在事件上找到各自各的位置, 發揮各自各的功能. 如果你覺得書中的故事荒謬 (OnL9), 不真實, 吹水. 那麼回想5年前, 天台的風景。 你有想像過TG 的氣味? 你有想像過路上滿是路障? 你有想像過一街之距, 兩個世界? 這是他們的回憶，他們見到的。 5年過去, 離散的我更珍惜相敍的時光, 因為這是我們學到的. 也更珍惜當下. 人生苦短, 比起回頭, 我更喜歡向前, 因為回望了過去, 向前行就更明確. 看書吧. 一齊加油.
閱讀完整內容

要老是忘記, 我更記不起

圖片
  黃昏，您誤入我的房間，我開門請您回去，一度的寧靜，期待著夜幕到來。早上陽光把我叫醒，我看著您眼定定看著窗邊，當涼風從窗邊透出，您回去了，沒有回頭，也沒有說話。 我們也是大家的過客，大家借過大家的溫度。過去和幻想組織了美好的回憶。那怕只有片段，時間和回憶可以成正比，也可以沒有關係。“不借得太多也想借點火，就算不說一句都很清楚，雙方都經過太多。“ 這本書就是一連串愛情的小故事，可能有相似的，也可能有別人的。很多人說，愛情總是可以令成長，我不同意，不論有否成長，我的角度，每一個您的出現，也改變了我的習慣。習慣了密碼用上您的生日，習慣耐心溫柔地弄乾您的長頭髮，習慣了冰凍的茶味。 “不應講的死也不說 是否等於欺騙 衷心的欺騙 我真心想你快活如蜜甜“ 愛情不須要將來，須要的只有回憶。 我說昨晚的“您“，是隻蜜蜂， 大家請不要過份FF , 感謝閱讀 😚😚😚
閱讀完整內容