svg

이번 포스트에서는 내가 원하는 아이콘을 지도 위에 출력 하는 방법에 대해 정리 해 보고자 한다. 최종 결과물은 아래와 같을 것이다. png파일을 이용한 marker와 단순한 동그라미 marker를 지도에 출력 해볼 것이다. 만약 그 이전 단계에 대해 모른다면, 지난 포스트들을 참고하자. 지난 포스트에서는 1) OSM 지도를 출력하는 방법, 2) 클릭 이벤트를 등록하는 방법에 대해 정리했었다. 목차는 아래와 같다. StepbyStep 1. Feature 생성.(Point, LineString, CustomFeature) 2. VectorSource를 생성하여 Feature를 주입. 3. VectorLayer를 만들고, VectorSource를 주입해준다. 4. VectorLayer를 Map 객체에 주입해 ..

여기에서는 d3에 대해 아주 기초부터 제대로된 data visualization까지 차근차근 다뤄볼 예정입니다. What is D3? 너무나 뻔하지만, 항상 어떠한 주제를 시작할 때 다루고자 하는 주제가 무엇인지 명확히 하는 것이 중요한 것 같습니다. D3는 Data-Driven Documents를 의미하며 Data를 Visualization해주는 매우 강력한 툴입니다. 특히, D3는 우리가 HTML, SVG, CSS를 사용함에 있어 많은 도움을 줍니다. 만약, SVG가 무엇인지 알고 있고, 바로 라인차트를 그리는 방법에 대해 알고 싶다면 다음 포스트로 바로 이동하셔도 무관합니다. What is SVG? D3에서는 SVG를 많이 다룹니다. 따라서, 본격적으로 들어가기 이전에 여기에서는 SVG에 대해 간단..