[Flask] 초간단! HTML과 Flask 통신 - 3

본 포스팅에서는 Naver Cloud Flatform의 API를 이용해 Flask서버에서 지도 정보를 받아서 웹 페이지에서 지도를 그려주는 것에 관해 다룹니다.

Naver Cloud Flatform에서는 네이버 지도에 관한 여러 어플리케이션(e.g. Web Dynamic Map, Geocoding)을 API로 제공합니다. 회원 가입을 하고 ID를 발급 받는 과정등은 추후에 다른 포스팅에서 다루도록하고 본 포스팅에서는 geocoding을 이용하여 어떻게 지도를 불러오고 웹페이지에 그리는지에 대해 다루도록 하겠습니다.

먼저 flask서버에서 geocoding을 이용할 수 있도록 관련 설정을 해주고, requests 라이브러리의 get함수를 통해서 url의 정보를 가져옵니다. 그 후, 이것을 parsing하여 원하는 정보를 추출합니다. API의 response에 대한 정보는 코드 아래와 같습니다.

client_id = "CLIENT_ID"
client_secret = "CLIENT_SECRET"
endpoint = "https://naveropenapi.apigw.ntruss.com/map-geocode/v2/geocode"
headers = {
    "X-NCP-APIGW-API-KEY-ID": client_id,
    "X-NCP-APIGW-API-KEY": client_secret,
}
address = "불정로 6"
@app.route('/userPost')
def userPost():
    url = f"{endpoint}?query={address}"
    res = requests.get(url, headers=headers)
    if res.json()['addresses']:
        return render_template('userPost.html', lat=res.json()['addresses'][0]['x'], lon=res.json()['addresses'][0]['y'])
    else:
        return render_template('userPost.html', lat=127.1052133, lon=37.3595316)

{
    "status": "OK",
    "meta": {
        "totalCount": 1,
        "page": 1,
        "count": 1
    },
    "addresses": [
        {
            "roadAddress": "경기도 성남시 분당구 불정로 6 그린팩토리",
            "jibunAddress": "경기도 성남시 분당구 정자동 178-1 그린팩토리",
            "englishAddress": "6, Buljeong-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Republic of Korea",
            "addressElements": [
                {
                    "types": [
                        "POSTAL_CODE"
                    ],
                    "longName": "13561",
                    "shortName": "",
                    "code": ""
                }
            ],
            "x": "127.10522081658463",
            "y": "37.35951219616309",
            "distance": 20.925857741585514
        }
    ],
    "errorMessage": ""
}

위의 플라스크 서버에서 lat, lon을 전달해주었으므로, HTML 파일에서는 jinaj2 템플릿 엔진을 통해 아래와 같이 정보를 이용할 수 있습니다. 먼저 div 태그를 통해 지도가 들어갈 크기를 정해주고, script 태그에서는 지도 div 태그의 아이디를 이용하여 지도를 그려줍니다. 아래의 예시에서는 지도를 확대, 축소하는 여러가지 기능들이 포함되어 있으므로 기호에 맞게 사용하면 됩니다.

<div id="map" style="width: 70%; height: 300px; margin:auto"></div>
<script id="code">
    var center = new naver.maps.LatLng("{{lon}}", "{{lat}}");
    var map = new naver.maps.Map('map', {
      center: center,
      zoom: 13,
      minZoom: 7, //지도의 최소 줌 레벨
      zoomControl: true, //줌 컨트롤의 표시 여부
      zoomControlOptions: { //줌 컨트롤의 옵션
        position: naver.maps.Position.TOP_RIGHT
      }
    });
    map.setOptions("mapTypeControl", true); //지도 유형 컨트롤의 표시 여부

    naver.maps.Event.addListener(map, 'zoom_changed', function (zoom) {
      console.log('zoom:' + zoom);
    });

    map.setOptions('minZoom', 10);
    console.log('잘못된 참조 시점', map.getOptions('minZoom'), map.getOptions('minZoom') === 10);

    // 지도의 옵션 참조는 init 이벤트 이후에 참조해야 합니다.
    naver.maps.Event.once(map, 'init', function () {
      console.log('올바른 참조 시점', map.getOptions('minZoom') === 10);
    });

    // 지도 인터랙션 옵션
    $("#interaction").on("click", function (e) {
      e.preventDefault();

      if (map.getOptions("draggable")) {
        map.setOptions({ //지도 인터랙션 끄기
          draggable: false,
          pinchZoom: false,
          scrollWheel: false,
          keyboardShortcuts: false,
          disableDoubleTapZoom: true,
          disableDoubleClickZoom: true,
          disableTwoFingerTapZoom: true
        });

        $(this).removeClass("control-on");
      } else {
        map.setOptions({ //지도 인터랙션 켜기
          draggable: true,
          pinchZoom: true,
          scrollWheel: true,
          keyboardShortcuts: true,
          disableDoubleTapZoom: false,
          disableDoubleClickZoom: false,
          disableTwoFingerTapZoom: false
        });

        $(this).addClass("control-on");
      }
    });

    // 관성 드래깅 옵션
    $("#kinetic").on("click", function (e) {
      e.preventDefault();

      if (map.getOptions("disableKineticPan")) {
        map.setOptions("disableKineticPan", false); //관성 드래깅 켜기
        $(this).addClass("control-on");
      } else {
        map.setOptions("disableKineticPan", true); //관성 드래깅 끄기
        $(this).removeClass("control-on");
      }
    });

    // 타일 fadeIn 효과
    $("#tile-transition").on("click", function (e) {
      e.preventDefault();

      if (map.getOptions("tileTransition")) {
        map.setOptions("tileTransition", false); //타일 fadeIn 효과 끄기

        $(this).removeClass("control-on");
      } else {
        map.setOptions("tileTransition", true); //타일 fadeIn 효과 켜기
        $(this).addClass("control-on");
      }
    });

    // min/max 줌 레벨
    $("#min-max-zoom").on("click", function (e) {
      e.preventDefault();

      if (map.getOptions("minZoom") === 10) {
        map.setOptions({
          minZoom: 7,
          maxZoom: 21
        });
        $(this).val(this.name + ': 7 ~ 21');
      } else {
        map.setOptions({
          minZoom: 10,
          maxZoom: 21
        });
        $(this).val(this.name + ': 10 ~ 21');
      }
    });

    //지도 컨트롤
    $("#controls").on("click", function (e) {
      e.preventDefault();

      if (map.getOptions("scaleControl")) {
        map.setOptions({ //모든 지도 컨트롤 숨기기
          scaleControl: false,
          logoControl: false,
          mapDataControl: false,
          zoomControl: false,
          mapTypeControl: false
        });
        $(this).removeClass('control-on');
      } else {
        map.setOptions({ //모든 지도 컨트롤 보이기
          scaleControl: true,
          logoControl: true,
          mapDataControl: true,
          zoomControl: true,
          mapTypeControl: true
        });
        $(this).addClass('control-on');
      }
    });

    $("#interaction, #tile-transition, #controls").addClass("control-on");
</script>