GIS Developer

핑거아이즈에 대한 마지막 API 사용 실습 튜토리얼로써 공간상에 의미있게 분포되어 있는 수치데이터를 차트로 표현하는 기능에 대해 살펴보겠습니다. 이 글에 대한 최종 결과에 대한 실행은 아래와 같습니다. 각 집계구에 나이대별 인구수를 파이차트로 표현하는 예입니다.

실행 결과 보기 및 소스코드 다운로드

위의 실행 결과를 살펴보면 어플리케이션에 대한 UI는 총 3개입니다. 차트표시라는 버튼, 범례표시라는 버튼 그리고 맵 컴포넌트입니다. 이 UI를 구성하기 위해 먼저 MXML Application을 추가하고 UI 구성을 위한 MXML에 다음과 같은 코드를 추가합니다.

맵 컴포넌트에 대한 네임스페이스를 xr로 잡고 있는데 이 네임스페이스가 유효하기 위해서는 Application 태그쪽에 다음과 같은 네임스페이스 속성이 필요합니다.

다시 UI 구성을 위한 코드를 살펴보면.. 맵 컴포넌트의 id를 map으로 주어 다른 코드부에서 참조할 수 있게 했으며 차트표시 버튼의 이벤트는 onChartClick 핸들러 함수에 할당했고 범례표시는 onLegendClick 핸들러 함수에 할당했습니다. 이 두개의 핸들러 함수에 집중하기 전에 먼저 배경이 되는 지도 레이어를 구성하는 코드를 살펴보겠습니다. 지도 레이어 준비는 어플리케이션의 initialize 이벤트가 적당하며 여기서는 onInit 핸들러 함수에 이 이벤트를 할당했습니다.

protected function onInit(event:FlexEvent):void
{
    var lyr:XrTileMapLayer = new XrTileMapLayer("basemap", 
        "http://www.geoservice.co.kr/tilemap1");
    map.layers.addLayer(lyr);
    
    map.viewControls.scaleLevels = 
    [
        3000000, 1800000, 800000, 460000, 250000, 
        110000, 50000, 25000, 14000, 7500, 3500, 2000
    ];
    map.moveMap(new XrCoordinate(317782, 544590));
    map.viewControls.scaleLevel = 11;
    
    var lyr2:XrShapeMapLayer = new XrShapeMapLayer("population", 
        "http://www.geoservice.co.kr:8080/Xr?layerName=population_polygon");
    lyr2.theme.properties = 
    {
        fillColor:0xff000000, fillAlpha:0.01, 
        lineThickness:2.0, lineAlpha:1.0, lineColor:0xff5522
    };
    lyr2.requestAttributeAlways = true;
    lyr2.visibleByLevel = true;
    lyr2.fromVisibleLevel = 10;
    lyr2.toVisibleLevel = 11;
    map.layers.addLayer(lyr2);
    
    addChartLayer();
}

3~5번 코드는 배경도로써 타일맵 레이어를 추가하는 코드이고 7~13번 코드는 어플리케이션이 시작할때 초기 지도뷰를 설정하는 코드이며 15~26번 코드는 차트 데이터를 위한 Shape 지도 레이어를 추가하는 코드입니다. 17~21번 코드는 Shape 지도 레이어의 그리기 심벌을 지정하는 코드이고 22번 코드는 통계 데이터에 대한 속성값을 할당 서버로부터 가져오라는 의미입니다. 그리고 23~25번 코드는 해당 Shape 맵 레이어가 사용자에게 보여지는 레벨을 10~11단계 사이에서만 보여지도록 하겠다는 의미입니다. 끝으로 28번 코드는 사용자 정의함수로 여기에 차트 표시를 위한 차트 레이어 추가를 위한 함수입니다. addChartLayer 함수를 살펴보겠습니다.

private function addChartLayer():void
{
    var chartLyr:XrChartLayer = new XrChartLayer("chart", null);
    chartLyr.defines.stroke.color = 0xffffff;
    chartLyr.defines.stroke.thickness = 2;
    
    var fillSym1:XrFillSymbol = new XrFillSymbol({fillColor:0xff1111});
    var fillSym2:XrFillSymbol = new XrFillSymbol({fillColor:0xff4444});
    var fillSym3:XrFillSymbol = new XrFillSymbol({fillColor:0xff8888});
    var fillSym4:XrFillSymbol = new XrFillSymbol({fillColor:0xffbbbb});
    var fillSym5:XrFillSymbol = new XrFillSymbol({fillColor:0xffdddd});
    var fillSym6:XrFillSymbol = new XrFillSymbol({fillColor:0x11ff11});
    var fillSym7:XrFillSymbol = new XrFillSymbol({fillColor:0x44ff44});
    var fillSym8:XrFillSymbol = new XrFillSymbol({fillColor:0x88ff88});
    var fillSym9:XrFillSymbol = new XrFillSymbol({fillColor:0xccffcc});
    var fillSym10:XrFillSymbol = new XrFillSymbol({fillColor:0x1111ff});
    var fillSym11:XrFillSymbol = new XrFillSymbol({fillColor:0x4444ff});
    var fillSym12:XrFillSymbol = new XrFillSymbol({fillColor:0x8888ff});
    var fillSym13:XrFillSymbol = new XrFillSymbol({fillColor:0xbbbbff});
    var fillSym14:XrFillSymbol = new XrFillSymbol({fillColor:0xddddff});
    
    chartLyr.defines.add("4세 이하", fillSym1);
    chartLyr.defines.add("5~9세", fillSym2);
    chartLyr.defines.add("10~14세 이하", fillSym3);
    chartLyr.defines.add("15~19세 이하", fillSym4);
    chartLyr.defines.add("20~24세 이하", fillSym5);
    chartLyr.defines.add("25~29세 이하", fillSym6);
    chartLyr.defines.add("30~34세 이하", fillSym7);
    chartLyr.defines.add("35~39세 이하", fillSym8);
    chartLyr.defines.add("40~44세 이하", fillSym9);
    chartLyr.defines.add("44~49세 이하", fillSym10);
    chartLyr.defines.add("50~54세 이하", fillSym11);
    chartLyr.defines.add("55~59세 이하", fillSym12);    
    chartLyr.defines.add("60~64세 이하", fillSym13);
    chartLyr.defines.add("65세 이상", fillSym14);
    
    map.layers.addLayer(chartLyr);    
}

3번코드가 차트 레이어를 생성하는 코드입니다. 그리고 4~5번 코드는 차트 레이어를 그릴때 외곽선에 대한 심벌입니다. 그리고 7~20번은 차트를 그릴때 사용하는 채움심벌을 위한 것으로 총 14개를 생성하고 있습니다. 왜 14개인가 하면… 22~35번 코드를 살펴보면 쉽게 이해할 수 있습니다. 우리는 파이차트를 그릴 것인데.. 이 차트를 구성하는 각 항목이 총 14개이고.. 나이대별(4세 이하, 5~9세 등등) 항목으로 구성하게 됩니다. 각 항목에 대해 앞서 생성해 놓은 채움심벌을 각각 지정해 놓고 있습니다. 이러한 설정이 적동된 차트레이어를 37번 코드를 통해 레이어로써 추가해 놓습니다. 이제 차트 레이어까지 추가되어 차트를 구성하기 위한 준비가 끝났군요! 다음으로 차트표시 버튼에 대한 이벤트 코드를 살펴봄으로써 차트를 어떻게 표현하는지 알아보겠습니다!

protected function onChartClick(event:MouseEvent):void
{
    var chartLyr:XrChartLayer = map.layers.getLayer("chart") as XrChartLayer;
    if(chartLyr == null) return;
    chartLyr.items.clear();
    
    var shpLyr:XrShapeMapLayer = 
        map.layers.getLayer("population") as XrShapeMapLayer;
    if(shpLyr != null)
    {
        var shpRows:Object = shpLyr.shapeSet.rows;
        for(var key:String in shpRows)   
        {    
            var shp:XrShape = shpRows[key] as XrShape; 
            var centroid:XrCoordinate = shp.centroid;
            if(shp != null)
            {
                var fid:int = shp.fid;
                var row:XrAttribute = shpLyr.attributeSet.rows[fid] as XrAttribute;
                if(row != null)
                {
                    var fs:XrFieldSet = shpLyr.attributeSet.fieldSet;
                    var A00_01:int = fs.getFieldIndex("A00_01");
                    var A00_02:int = fs.getFieldIndex("A00_02");
                    var A00_03:int = fs.getFieldIndex("A00_03");
                    var A00_04:int = fs.getFieldIndex("A00_04");
                    var A00_05:int = fs.getFieldIndex("A00_05");
                    var A00_06:int = fs.getFieldIndex("A00_06");
                    var A00_07:int = fs.getFieldIndex("A00_07");
                    var A00_08:int = fs.getFieldIndex("A00_08");
                    var A00_09:int = fs.getFieldIndex("A00_09");
                    var A00_10:int = fs.getFieldIndex("A00_10");
                    var A00_11:int = fs.getFieldIndex("A00_11");
                    var A00_12:int = fs.getFieldIndex("A00_12");
                    var A00_13:int = fs.getFieldIndex("A00_13");
                    var A00_14:int = fs.getFieldIndex("A00_14");  

                    var A00_01_value:Number = row.getValueAsDouble(A00_01);
                    var A00_02_value:Number = row.getValueAsDouble(A00_02);
                    var A00_03_value:Number = row.getValueAsDouble(A00_03);
                    var A00_04_value:Number = row.getValueAsDouble(A00_04);
                    var A00_05_value:Number = row.getValueAsDouble(A00_05);
                    var A00_06_value:Number = row.getValueAsDouble(A00_06);
                    var A00_07_value:Number = row.getValueAsDouble(A00_07);
                    var A00_08_value:Number = row.getValueAsDouble(A00_08);
                    var A00_09_value:Number = row.getValueAsDouble(A00_09);
                    var A00_10_value:Number = row.getValueAsDouble(A00_10);
                    var A00_11_value:Number = row.getValueAsDouble(A00_11);
                    var A00_12_value:Number = row.getValueAsDouble(A00_12);
                    var A00_13_value:Number = row.getValueAsDouble(A00_13);
                    var A00_14_value:Number = row.getValueAsDouble(A00_14);
        
                    chartLyr.items.add(new XrChartItem(null, 
                    [
                        A00_01_value, A00_02_value, A00_03_value, A00_04_value, 
                        A00_05_value, A00_06_value, A00_07_value, A00_08_value, 
                        A00_09_value, A00_10_value, A00_11_value, A00_12_value,
                        A00_13_value, A00_14_value
                    ], centroid));
                } 
            }
        }
     
        if(!chartLyr.items.build())
        {
             trace("Chart Building Error!");
        }
     
        map.update(false);
    }
}

코드가 상당히 긴편인데요. 실제로 참조하는 속성값이 14개나 되기때문에 길어보일뿐입니다. 하나 하나 살펴보면 단순합니다. 먼저 3번코드는 앞서 추가한 차트 레이어를 구합니다. 그리고 5번 코드를 통해 기존의 차트 데이터를 깨끗하게 지움니다. 이렇게 지우니 매번 버튼을 누를때마다 새롭게 차트를 구성할 수 있게 됩니다. 7번 코드는 차트를 구성하기 위한 수치 데이터를 참조할 Shape 맵 레이어를 구합니다. 12번 코드에 대한 반복문을 통해 Shape 맵 레이어를 구성하는 모든 도형에 대한 중심점(15번 코드)와 이 도형의 fid를 통해 얻은 속성값(19번 코드)를 통해 차트를 구성하게 됩니다. 참고로 앞서 모든 도형이라고 언급했으나 실제로는 화면상에 표시되는 도형입니다. 화면 밖의 표시되지 않은 도형은 해당사항이 없습니다. 23~36번 코드가 앞서 언급한 총 14개의 통계값을 읽기 위한 필드 인덱스를 구하는 코드들이고 실제 통계 데이터를 가져오는 코드는 38~51번 코드들입니다. 이렇게 구한 통계 값들을 53번 코드를 통해 지정하여 차트의 아이템으로써 도형의 중심점 좌표와 함께 추가해 줍니다. 최종적으로 차트 아이템들이 추가 완료되면 64번 코드를 통해 새롭게 재구성해 줘야 합니다. 이 재구성이 완료되면 차트가 화면상에 짠~ 하고 표시됩니다. 이제 이 차트 레이어에 대한 범례 구성을 위한 범례표시 버튼에 대해 이벤트 코드에 대해 살펴보겠습니다.

protected function onLegendClick(event:MouseEvent):void
{
    var legend:XrLegend = new XrLegend("legend");
    
    var vbox:XrVAlignLegendItemGroup = new XrVAlignLegendItemGroup();
    legend.content = vbox;
    
    var fontSym_title:XrFontSymbol = 
        new XrFontSymbol({fontName:"HY견고딕", fontSize:15});
    var text_title:XrTextLegendItem = 
        new XrTextLegendItem("차트 범례", fontSym_title);
    text_title.centerAlign = true;
    text_title.fillParentWidth = true;
    vbox.addItem(text_title);
    
    var lineSym_bar:XrLineSymbol = 
        new XrLineSymbol({lineColor:0x000000, lineThickness:1});
    var bar:XrBarLegendItem = new XrBarLegendItem(true, lineSym_bar);
    vbox.addItem(bar);
    
    var fontSym_Content:XrFontSymbol = 
        new XrFontSymbol(
            {fontName:"맑은 고딕", bold:true, fontSize:9, fontColor:0x000000}
        );
    var chartLyr:XrChartLayer = map.layers.getLayer("chart") as XrChartLayer;
    var chartLgd:XrPieChartLegendItem = 
        new XrPieChartLegendItem(chartLyr, 100, 100, fontSym_Content);
    chartLgd.marginLeft = 75;
    chartLgd.marginRight = 75;
    chartLgd.marginTop = 20;
    chartLgd.marginBottom = 20;
    vbox.addItem(chartLgd);
    
    legend.position.horizontalAlignment=XrRelativePosition.HORIZONTAL_ALIGN_LEFT;
    legend.position.verticalAlignment=XrRelativePosition.VERTICAL_ALIGN_BOTTOM;

    map.legends.addLegend(legend);
}  

차트 레이어에 대한 범례 구성은 듀라맵의 레이아웃 구성 기법에 유사합니다. 이에 대한 자세한 내용은

DuraMap-Xr, 통계 데이터를 이용한 주제도 작성을 참고하시기 바랍니다. 다른 점은 차트 레이어에 대해 특별하게 제공되는 범례 구성 항목으로써 XrPieChartLegendItem이 있으며 이 항목을 차트레이어와 연계하여 쉽게 차트 범례를 구성할 수 있습니다.

이상으로 Xr 솔루션 중 RIA 기반의  GIS 솔루션을 담당하는 핑거아이즈에 대한 기본적인 API 사용법에 대한 포스팅을 마무리 하도록 하겠습니다.

지도 위에 어떤 도형을 클릭하여 클릭된 도형이 가지고 있는 속성을 확인하는 방법에 대한 설명입니다. 여기서 도형이라함은 예를 들어 집계구처럼 나이별 인구수 등과 같은 집계값들을 가지고 있는 영역을 의미합니다. 물론 영역처럼 폴리곤 형태뿐만 아니라 포인트, 폴리라인도 모두 해당합니다.

실행결과 보기 및 소스 코드 다운로드

위의 데모는 나이대별 인구수와 인구밀도, 노령화지수, 노년부양비 등과 같은 통계 데이터에 대한 예를 제공합니다. 마우스로 파악하고 자하는 영역을 클릭하면 해당 자료가 제공됩니다. 이제 위의 데모를 핑거아이즈를 통해 제작하는 API 사용에 대해 설명드리겠습니다.

먼저 플래시 빌더에서 MXML Application을 추가합니다. UI 구성은 맵 컴포넌트 하나가 전부인데.. 다음처럼 되어 있습니다.

지도 위에 마우스 클릭이 될때 어떤 일을 해야 하므로 마우스 클릭 이벤트로써 onMapClick이라는 사용자 정의 함수를 등록해 놓았습니다. 이 클릭 이벤트에 대해서 살펴보기에 앞서 기본이 되는 지도 레이어를 추가해 놓아야 하는데.. 이는 Application의 initialize 이벤트가 적당하며 여기서는 onInit 매서드르 이벤트 핸들러로 등록해 놓았습니다.

protected function onInit(event:FlexEvent):void
{
    var lyr:XrTileMapLayer = new XrTileMapLayer("basemap", 
        "http://www.geoservice.co.kr/tilemap1");
    map.layers.addLayer(lyr);
    
    map.viewControls.scaleLevels = 
        [
            3000000, 1800000, 800000, 460000, 250000, 
            110000, 50000, 25000, 14000, 7500, 3500, 2000
        ];
    map.moveMap(new XrCoordinate(317782, 544590));
    map.viewControls.scaleLevel = 9;
    
    var lyr2:XrShapeMapLayer = new XrShapeMapLayer("population", 
        "http://www.geoservice.co.kr:8080/Xr?layerName=population_polygon");
    lyr2.theme.properties = {
        fillColor:0x000000, fillAlpha:0.01, 
        lineThickness:2.0, lineAlpha:1.0, lineColor:0x33aa22
    };
    lyr2.requestAttributeAlways = true;
    lyr2.visibleByLevel = true;
    lyr2.fromVisibleLevel = 8;
    lyr2.toVisibleLevel = 11;
    map.layers.addLayer(lyr2);
}

먼저 3~5번 코드를 통해 배경도로써 타일맵을 추가해 놓았습니다. 그리고 7~13번 코드를 통해 초기 지도의 뷰 상태를 지정해 놓고 있습니다. 그리고 15번 코드를 통해 마우스 클릭을 통해 속성을 확인하고자 할 Shape 지도 레이어를 생성해 놓습니다. 17~20번 코드는 이 지도 레이어의 그리기 심벌을 지정하는 코드입니다. 그리고 21번 코드는 이 레이어에 대해서 속성도 항상 서비스 받겠다는 의미입니다. 그리고 22~24번 코드는 축척 레벨에 따라 레이어를 가시화(Visibility) 여부를 지정하는 것으로써 8단계에서 11단계에서만 보이게 됩니다. 이렇게 설정된 레이어를 25번 코드를 통해 맵 컨트롤에 추가됩니다. 참고로 이 데모와 위의 코드들이 필요로 하는 import 구문은 다음과 같습니다.

 import geoservice.base.XrCoordinate;
   import geoservice.base.XrExtent;
   import geoservice.base.XrRelativePosition;
   import geoservice.controls.*;
   import geoservice.controls.IXrViewControl;
   import geoservice.data.XrAttribute;
   import geoservice.data.XrFieldSet;
   import geoservice.events.XrMapMouseEvent;
   import geoservice.view.layers.*;
   import geoservice.view.legend.*;
   import geoservice.view.symbols.*;
   
   import mx.events.FlexEvent;

이제 앞서 설명했던 지도에 대한 마우스 클릭 이벤트로 할당했던 onMapClick 함수를 살펴보겠습니다. 함수에 대한 코드는 다음과 같습니다.

protected function onMapClick(event:XrMapMouseEvent):void
{
    var lyr:XrShapeMapLayer=map.layers.getLayer("population") as XrShapeMapLayer;
    if(lyr != null)
    {
        var fid:int = lyr.getFIDByMousePoint(mouseX, mouseY);
        lyr.highlightRow = fid;  
     
        var row:XrAttribute = lyr.attributeSet.rows[fid] as XrAttribute;
        if(row != null)
        {
            var fs:XrFieldSet = lyr.attributeSet.fieldSet;
            var A00_01:int = fs.getFieldIndex("A00_01");
            var A00_02:int = fs.getFieldIndex("A00_02");
            var A00_03:int = fs.getFieldIndex("A00_03");
            var A00_04:int = fs.getFieldIndex("A00_04");
            var A00_05:int = fs.getFieldIndex("A00_05");
            var A00_06:int = fs.getFieldIndex("A00_06");
            var A00_07:int = fs.getFieldIndex("A00_07");
            var A00_08:int = fs.getFieldIndex("A00_08");
            var A00_09:int = fs.getFieldIndex("A00_09");
            var A00_10:int = fs.getFieldIndex("A00_10");
            var A00_11:int = fs.getFieldIndex("A00_11");
            var A00_12:int = fs.getFieldIndex("A00_12");
            var A00_13:int = fs.getFieldIndex("A00_13");
            var A00_14:int = fs.getFieldIndex("A00_14");  
      
            var I00_01:int = fs.getFieldIndex("I00_01");
            var I00_02:int = fs.getFieldIndex("I00_02");
            var I00_03:int = fs.getFieldIndex("I00_03");
            var I00_04:int = fs.getFieldIndex("I00_04");
            var I00_05:int = fs.getFieldIndex("I00_05");
            var I00_06:int = fs.getFieldIndex("I00_06");
            var I00_07:int = fs.getFieldIndex("I00_07");
      
            var A00_01_value:String = row.getValueAsString(A00_01);
            var A00_02_value:String = row.getValueAsString(A00_02);
            var A00_03_value:String = row.getValueAsString(A00_03);
            var A00_04_value:String = row.getValueAsString(A00_04);
            var A00_05_value:String = row.getValueAsString(A00_05);
            var A00_06_value:String = row.getValueAsString(A00_06);
            var A00_07_value:String = row.getValueAsString(A00_07);
            var A00_08_value:String = row.getValueAsString(A00_08);
            var A00_09_value:String = row.getValueAsString(A00_09);
            var A00_10_value:String = row.getValueAsString(A00_10);
            var A00_11_value:String = row.getValueAsString(A00_11);
            var A00_12_value:String = row.getValueAsString(A00_12);
            var A00_13_value:String = row.getValueAsString(A00_13);
            var A00_14_value:String = row.getValueAsString(A00_14);
      
            var I00_01_value:String = row.getValueAsString(I00_01);
            var I00_02_value:String = row.getValueAsString(I00_02);
            var I00_03_value:String = row.getValueAsString(I00_03);
            var I00_04_value:String = row.getValueAsString(I00_04);
            var I00_05_value:String = row.getValueAsString(I00_05);
            var I00_06_value:String = row.getValueAsString(I00_06);
            var I00_07_value:String = row.getValueAsString(I00_07);      
      
            var html:String = "";
            html += "";
            html += "4세 이하  " + A00_01_value + "명";
            html += "5~9세  " + A00_02_value + "명";
            html += "10~14세 이하  " + A00_03_value + "명";
            html += "15~19세 이하  " + A00_04_value + "명";
            html += "20~24세 이하  " + A00_05_value + "명";
            html += "25~29세 이하  " + A00_06_value + "명";
            html += "30~34세 이하  " + A00_07_value + "명";
            html += "35~39세 이하  " + A00_08_value + "명";
            html += "40~44세 이하  " + A00_09_value + "명";
            html += "44~49세 이하  " + A00_10_value + "명";
            html += "50~54세 이하  " + A00_11_value + "명";
            html += "55~59세 이하  " + A00_12_value + "명";
            html += "60~64세 이하  " + A00_13_value + "명";
            html += "65세 이상  " + A00_14_value + "명";
            html += "총인구  " + I00_01_value + "명";
            html += "평균나이  " + I00_02_value + "세";
            html += "인구밀도  " + I00_03_value + "";
            html += "노령화지수  " + I00_04_value + "";
            html += "노년부양비  " + I00_05_value + "";
            html += "유년부양비  " + I00_06_value + "";
            html += "총부양비  " + I00_07_value + "";      
            html += "";
      
            var hotSpot:XrCoordinate = new XrCoordinate(event.mapX, event.mapY);
            map.showInfoWindow(hotSpot, html);
            map.moveMap(hotSpot, true);
        }
    }
}

코드가 상당히 길게 보이지만 기본적인 구성이 단순합니다. 단지 참고해야할 DB 필드 개수가 많아 코드가 길어졌습니다. 하나 하나 자세히 설명해 드리면….. 먼저 3번 코드는 앞서 onInit 함수에서 추가해 놓은 Shape 레이어를 다시 참조해 변수에 담아 놓는 코드입니다. 그리고 6번 코드는 현재 클릭된 위치(mouseX, mouseY)에 해당되는 도형의 ID값을 얻는 함수입니다. 그리고 이렇게 얻은 ID를 통해 선택된 도형을 하이라이팅 시켜 주는 코드가 7번 코드입니다. 그리고 9번은 Shape 레이어가 가지고 있는 속성 Row 중 해당 ID에 해당하는 Row를 구하는 함수입니다. 이렇게 구한 Row를 통해 원하는 데이터를 가져올 수 있습니다. 먼저 12번 코드는 가져오고자 하는 데이터에 대한 필드 인덱스를 얻기 위해 필드셋을 얻어오는 함수이고 13~34번 코드는 필드셋으로부터 필드명에 해당하는 인덱스 번호를 얻어오는 코드입니다. 그리고 36~57번 코드는 필드 인덱스 번호를 통해 실제 데이터값을 가져오는 코드입니다. 이렇게 가져온 실제 데이터를 통해 html 문자열로 구성하는 코드가 59~82번 코드입니다. 이제 이 html을 화면상에 표시해야 하는데 여기에 해당하는 코드가 84~86번 코드입니다. 84번 코드는 클릭한 지점에 대한 지도 좌표를 hotSpot이라는 변수에 저장하며 95번 코드는 이 지도 좌표 위에 정보창을 앞서 구성한 html과 함께 표시하라는 것입니다. 그리고 86번 코드는 이 클릭한 지도 좌표로 지도를 이동시키라는 것입니다.