ol3에서 지도 상의 특정한 좌표 지점에 팝업창을 표시하여 해당 지점과 관련된 정보를 표시하는 기능에 대한 API를 살펴 보겠습니다. 먼저 아래의 웹 페이지에 표시된 지도를 클릭하면 클릭된 지점에 대한 경위도 좌표계를 도분초로 표시하는데요. 한번 확인해 보시기 바랍니다.
위의 지도 상의 팝업에 대한 기능을 구현하는 코드를 하나 하나 살펴 보겠습니다. 먼저 필요한 외부 CSS와 스크립트를 아래처럼 추가합니다.
다음은 필요한 UI에 대한 태그인데요. ol3에서는 팝업창에 대한 구체적인 UI에 대해 ol3 엔진단에서 제공하는 것이 아니고 개발자가 직접 제공해야 합니다. 팝업창을 구성하는 닫기 버튼이라든지, 실제 내용이 표시되는 div 영역이라든지 말입니다. 아래는 UI에 대한 태그입니다.
id가 map인 div에 지도가 표시됩니다. 그리고 id가 popup인 div가 실제 팝업창인데요. 이 div 내부에는 다시 id가 popup-closer이라는 a 태그가 있고, id가 popup-content인 div가 있습니다. popup-closer인 a 태그는 팝업을 닫는 버튼으로 사용되고, popup-content인 div는 팝업의 내용을 채울 컨테이너로 사용됩니다. 이제 각 UI에 대한 지정된 스타일에 대한 코드를 살펴 봅시다.