maplist.html 3.51 KB
<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>
            #mapbase {position:relative; width:50%; height:0;padding-bottom:60%; }
        </style>
    </head>

    <body>

        {%for data in exportdata%}
        <p>{{data.cntr}}</p>
        {%endfor%}

        <div id="mapbase"></div>

        <script type="text/javascript">            
            // map 객체 생성 map안에 넣어주는건 div id
            // 위도, 경도, zoom 수준
            var map = L.map('mapbase').setView([36.5205243,128.0540569], 7);
            // tilelayer를 씌우는 작업 OSM을 사용했음
            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                maxZoom: 10,
                id: 'mapbox/light-v9',
                tileSize: 512,
                zoomOffset:-1,
                accessToken: 'pk.eyJ1IjoidGpzZGszMTA1IiwiYSI6ImNrYWM5bXljZzB1N28ycnA5bTVsNHZsbnkifQ.W3-irWof5WMR8BcfBR4Ftw'
            }).addTo(map);

            // mapdata 가져오는 부분
            var statesData = "{{maps}}".replace(/&quot;/g,"\"");
            
            statesData = JSON.parse(statesData);
            
            // replace 쓰는 방법 : (바꾸기 전 문자, 바꾸고 난 후 문자)
            // density data 추가하는 부분
            var densitydata = "{{exportdata}}".replace(/&#x27;/g,"\"");
            densitydata = densitydata.slice(13,-4);
            densitydata = JSON.parse(densitydata);
            
            document.write(densitydata);

            for(var i =0; i<densitydata.length; i++)
            {
                for(var j=0; j<statesData.features.length; j++)
                {
                    if (statesData.features[j]['properties']['SIG_KOR_NM'].indexOf(densitydata[i]['cntr'])==0)
                        {
                            statesData.features[j]['properties']['density']=densitydata[i]['count'];
                            break;
                        }
                }
            };

            function getColor(d) {
                return d > 30 ? '#800026' :
                    d > 25  ? '#BD0026' :
                    d > 20  ? '#E31A1C' :
                    d > 15  ? '#FC4E2A' :
                    d > 10  ? '#FD8D3C' :
                    d > 5   ? '#FEB24C' :
                    d > 0   ? '#FED976' :
                                '#FFEDA0';
            }
            function style(feature) {
                return {
                    fillColor: getColor(feature.properties.density),
                    weight: 2,
                    opacity: 1,
                    color: 'white',
                    dashArray: '3',
                    fillOpacity: 0.7
                };
            }
            L.geoJson(statesData, {style: style}).addTo(map);
        </script>
    </body>
</html>