test.html 1.4 KB

Raw Blame History Permalink

<html>
    <head>
        <!-- link에 들어가 있는건 지도 데이터를 위한 css 파일 -->
        <!-- script에 들어가 있는건 지도 데이터를 위한 js 파일 -->
        <!-- 직접 다운받아 넣을 수도 있는데 우선은 그냥 웹에서 불러올 수 있도록 해놨다. -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
        <!--css 내용 여기에 direct로 넣었다-->
        <style>
            #map {top:100; bottom:100; left:10; right:10; }
        </style>
    </head>

    <body>
        {% for cont in educations %}
        <p>where : {{cont.city}}</p>
        <p>where : {{cont.ct}}</p>
        {% endfor %}

        <div id="map"></div>

        <script>
            // map 객체 생성
            // 위도, 경도, zoom 수준
            var map = L.map('map').setView([0,0],3);
            // tilelayer를 씌우는 작업 OSM을 사용했음
            L.tileLayer('https://api.maptiler.com/maps/positron/{z}/{x}/{y}.png?key=IHLiEj11tKzE3WCyeanP',{
                attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
            }).addTo(map)

        </script>
    </body>
</html>