마커를 생성하는 예제입니다.
마커는 지도 위에 특정 지점을 표시하기 위한 요소입니다.
기본적으로 마커를 생성하기 위해서는 sop.marker 를 이용하며, 파라미터로 생성될 위치정보를 지정합니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var marker = sop.marker([953427, 1950827]);
marker.addTo(map);
마커에 추가적인 정보를 표출하는 예제입니다.
인포윈도우(InfoWindow)는 지도 위의 특정 지점에 대한 상세정보를 제공하기 위한 용도로 사용합니다.
인포윈도우는 말풍선과 같은 형태를 가지며 정보를 기술하는 영역과 지도상의 특정 지점과 연결되는 말풍선 꼬리로 구성됩니다.
일반적으로 인포윈도우는 지도상의 특정지점 POI 상에 직접 출력되거나 마커 상단에 출력되는 형태를 가집니다.
인포윈도우의 생성은 생성된 마커 객체에 bindInfoWindow 함수로 바인딩을 하고, openInfoWindow 함수로 툴팁을 표출합니다.
bindInfoWindow 함수로 툴팁정보를 바인딩할 시 파라미터로 HTML 속성을 넣을 수 있으며, 자유롭게 커스터마이징 할 수 있습니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var marker = sop.marker([953427, 1950827]);
marker.addTo(map).bindInfoWindow("경복궁 ").openInfoWindow();
커스텀 인포윈도우를 설정하는 예제입니다.
기본적으로 제공하는 인포윈도우 외에 HTML 을 이용하여
직접 컨텐츠를 생성후 setContent 속성을 사용하여 인포윈도우를 추가 생성 가능합니다.
또한, 위의 예처럼 bindInfoWindow 함수에서 HTML 속성을 넣어 생성할 수 있습니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 1);
var infoWindow = sop.infoWindow();
var contents = "";
contents += "<div style='font-family: dotum, arial, sans-serif;font-size: 18px; font-weight: bold;margin-bottom: 5px;'>경복궁"</div>";
contents += "<table style='border-spacing:2px;border:0px;'>";
contents += "<tbody>";
contents += "<tr>";
contents += "<td style='width:40px;color:#767676;padding-right:12px'>사이트";
contents += "<td>홈페이지";
contents += "</tr>";
contents += "<tr>";
contents += "<td style='color:#767676;padding-right:12px'>주소";
contents += "<td>서울특별시 종로구 사직로9길 22 (필운동)";
contents += "</tr>";
contents += "<tr>";
contents += "<td style='color:#767676;padding-right:12px'>소개";
contents += "<td>경복궁은 1395년 태조 이성계에 의해서 새로운 조선왕조의 법궁으로 지어졌다. 경복궁은 동궐(창덕궁)이나 서궐(경희궁)에 비해 위치가 ...";
contents += "</tr>";
contents += "<tr>";
contents += "<td style='color:#767676;padding-right:12px'>출처";
contents += "<td>visitkorea.or.kr";
contents += "</tr>";
contents += "</tbody>";
contents += "</table>";
infoWindow.setUTMK([953820, 1953437]);
infoWindow.setContent(contents);
infoWindow.openOn(map);
특정 마커에 클릭 이벤트를 생성하는 예제입니다.
생성된 마커에 click 이벤트를 다음과 같이 on 속성을 사용하여 등록이 가능 합니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var marker = sop.marker([953427, 1950827]);
marker.on("click",function(e){
alert("마커 클릭");
});
marker.addTo(map);
다수의 마커를 클러스터로 묶어서 표현하는 예제입니다.
특정 범위 안에 생성된 POI 마커를 markerClusterGroup 속성으로 설정하여 클러스터를 표현할 수 있습니다.
먼저, markerClusterGroup 레이어를 생성하고, 해당 레이어에 addLayer 함수를 이용하여 마커를 추가합니다.
markerClusterGroup 레이어는 여러개 생성할 수 있으며, 해당 레이어에 속한 마커들끼리 클러스터가 적용됩니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var marker1 = sop.marker([953427, 1950827]);
var marker2 = sop.marker([953427, 1950727]);
var marker3 = sop.marker([953427, 1950627]);
var markerList = sop.markerClusterGroup({
animateAddingMarkers: true
});
map.addLayer(markerList);
markerList.addLayer(marker1);
markerList.addLayer(marker2);
markerList.addLayer(marker3);
자신만의 마커 아이콘을 설정하는 예제입니다.
SOP JavaScript에서 제공하는 기본 아이콘 대신 표시할 아이콘을 정의할 수 있습니다.
화면상에 나타나는 아이콘 모양을 바꾸기 위한 많은 속성들이 있습니다.
이미지 마커를 생성하기 위해서는 sop.icon 을 이용해 마커의 기본적인 속성을 정의해야 합니다.
마커 이미지 경로, 마커 그림자이미지 경로, 이미지 사이즈,
툴팁팝업 위치 등의 여러 옵션들을 이용하여 이미지 마커를 생성합니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var myIcon = sop.icon({
iconUrl: '/img/idm/bus.png',
shadowUrl: '/img/idm/bus-shadow.png',
iconSize: [32, 32],
shadowSize: [32, 32],
iconAnchor: [22, 0],
shadowAnchor: [5, 0],
popupAnchor: [-3, -76]
});
var marker = sop.marker([953427, 1950827], {icon: myIcon}); //마커 생성시 myIcon 옵션값이용 마커 생성
marker.addTo(map); //마커를 map 추가
기본 마커를 변경하는 기능의 예제입니다.
SOP JavaScript에서 제공하는 기본 아이콘 대신 sop.DivIcon을 이용하여 표시할 HTML로 마커를 표현 할 수 있습니다.
이 기능을 이용하여 간단한 이미지부터 차트같은 복잡한 기능까지 HTML로 만들 수 있는 어떤것이든 커스텀 마커로 생성할 수 있습니다.
var map = sop.map('map');
var html = "";
html += "
버스정류장";
html += "";
var icon = new sop.DivIcon({html:html, className: "div_icon", iconSize: new sop.Point(7, 7), iconAnchor: new sop.Point(6,6), infoWindowAnchor: new sop.Point(1,-5)});
map.setView(sop.utmk(953427, 1950827), 5);
var marker = sop.marker([953427, 1950827], {
icon : icon
});
marker.addTo(map);
원형 마커를 생성하는 기능의 예제입니다.
SOP JavaScript에서 제공하는 기본 아이콘 대신 서클 모양의 마커를 다음과 같이 옵션을 통해 생성 할 수 있습니다.
써클마커는 sop.circleMarker를 이용하며, 크기, 색상,
테두리 굵기 등을 옵션으로 설정할 수 있습니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var marker = sop.circleMarker([953427, 1950827], {
radius : 17,
fillColor : "#03f",
weight : 2,
});
marker.addTo(map);
겹쳐서 표시되는 마커의 위치 우선순위를 설정하는 예제입니다.
생성한 마커에 대한 index 값을 조정합니다.
zIndexOffset 속성을 이용하여 설정할 수 있으며, 숫자값이 높을수록 더 상위에 위치 하게 됩니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var marker1 = sop.marker([953427, 1950827],{zIndexOffset : 3});
var marker2 = sop.marker([953427, 1950827],{zIndexOffset : 2});
var marker3 = sop.marker([953427, 1950827],{zIndexOffset : 1});
marker1.addTo(map);
marker2.addTo(map);
marker3.addTo(map);
지도 위에 폴리라인을 생성하는 예제입니다.
폴리라인은 선으로 이루어진 도형을 지도위에 나타내기 위한 클래스입니다.
폴리라인은 빠른길 찾기 결과와 같이 특정 경로를 지도상에 보여주기 위해서 주로 사용됩니다.
다음 예제는 홍대입구역에서 마포역까지 이어지는 폴리라인을 생성하는 예제입니다.
폴리라인을 생성하기 위해서는 sop.polyline 을 이용하며, 파라미터에 좌표로 구성된 배열정보 와 라인을 시각화하기 위한 옵션정보 를 설정하여 폴리라인을 생성합니다.
폴리라인 옵션은 다음과 같은 속성들을 사용해서 폴리라인을 구성하는 선들을 색상, 두께 및 투명도를 지정할 수 있습니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var polylines = [
[949279, 1951131],
[950631, 1950331],
[951063, 1949091]
];
var polyline = sop.polyline(polylines, {
stroke: true,
color: 'blue',
weight : 3,
opacity: 1,
fill: false,
fillColor:'blue',
fillOpacity: 0.2,
});
polyline.bindInfoWindow("폴리라인 입니다.");
polyline.addTo(map);
map.fitBounds(polyline);
지도위에 특정한 직선으로 이루어진 도형을 표시하는 예제입니다.
폴리곤은 폴리라인과 마찬가지로 선으로 이루어진 도형을 표현합니다.
시작점과 끝점이 항상 연결되며 채우기를 지정할 수 있습니다.
폴리곤은 sop.polygon 을 이용하여 생성할 수 있습니다.
폴리곤을 구성하는 선들의 좌표는 다음과 같이 polygons 배열 좌표를 지정하여 정의됩니다.
다음 예제는 홍대입구역에서 마포역까지 이어지는 폴리곤을 생성합니다.
폴리곤 옵션은 다음과 같은 속성들을 사용해서 폴리곤을 구성하는 선들의 색상, 두께 및 투명도를 지정할 수 있습니다.
var map = sop.map("map"); //map 생성
map.setView(sop.utmk(953427, 1950827), 5); // 지도 중심좌표로 뷰 설정
//지도에 표시되는 폴리곤 데이터
var polygons = [
[
[949279, 1951131],
[950631, 1950331],
[951063, 1949091]
]
];
//폴리곤 생성
var polygon = sop.polygon(polygons,
{
stroke: true,
color: "red",
weight : 3,
opacity: 1,
fill: true,
fillColor:"red",
fillOpacity: 0.2
});
polygon.bindInfoWindow("폴리곤 입니다."); //인포 윈도우 바인드
polygon.addTo(map); //지도에 폴리곤 추가
map.fitBounds(polygon); ////fitBounds 최대 줌 레벨로 polygon데이터를 보여 줍니다
지도위에 특정한 원을 표시하는 예제입니다.
원은 sop.circle 을 이용해서 생성할 수 있습니다.
원의 중심점은 원 객체 생성시 지도상의 좌표를 지정하고, 원의 반지름은 setRadius 사용해서 미터 단위로 지정할 수 있습니다.
원 옵션은 다음과 같은 속성들을 사용해서 원을 구성하는 선들의 색상, 두께 및 투명도를 지정할 수 있습니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var circle = sop.circle([953335, 1950717]);
circle.setRadius(2000);
circle.bindInfoWindow("써클 입니다.");
circle.addTo(map);
지도위에 사각형을 표시하는 예제입니다.
사각형은 선으로 이루어진 사각형 도형을 표현합니다. 시작점과 끝점이 항상 연결되며 채우기를 지정할 수 있습니다.
사각형은 sop.rectangle 을 이용하여 좌표로 이루어진 배열정보 와 옵션정보를 설정하여 생성할 수 있습니다.
다음과 같은 속성들을 사용해서 사각형을 구성하는 선들의 색상, 두께 및 투명도를 지정할 수 있습니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var rectangles = [
[953335, 1950717],
[993935, 1958917]
];
var rectangle = sop.rectangle(rectangles, {
color: "#ff7800",
weight: 1
});
rectangle.bindInfoWindow("사각형 입니다.");
rectangle.addTo(map);
GeoJSON을 이용하는 예제입니다.
GeoJSON은 JavaScript Object Notation(JSON) 에 기반한 공간 데이터 교환 포맷(Geospatial Data Interchange Format)입니다.
GeoJSON은 다양한 지리데이터 구조를 인코딩하기 위한 포맷이며 Geometry, Feature,
Feature Collection을 지원합니다.
var map = sop.map('map');
map.setView(sop.utmk(953427, 1950827), 5);
var geoData = {"type": "FeatureCollection", "features": [
{"type": "Feature", "geometry": {"type": "Polygon", "coordinates": [
[
[957648, 1966942],[959082, 1965955],[960333, 1965738],[961709, 1965784],[962036, 1966176],
[963128, 1966394],[964064, 1965652],[964428, 1962455],[965312, 1960690],[965702, 1960388],
[966315, 1956506],[966029, 1954964],[964926, 1953671],[964773, 1951259],[966144, 1951253],
[966649, 1951724],[967634, 1952167],[970119, 1953213],[971362, 1953481],[971875, 1951424],
[971981, 1949739],[970247, 1949573],[968323, 1946314],[968281, 1945191],[968675, 1944965],
[969636, 1944792],[969737, 1944923],[970068, 1944607],[969921, 1943869],[968999, 1942191],
[966170, 1940397],[964345, 1940121],[962383, 1938222],[961997, 1936853],[960517, 1936761],
[958928, 1938129],[959077, 1938697],[958928, 1939913],[958779, 1940422],[958424, 1940575],
[955537, 1940643],[953478, 1938848],[952074, 1937952],[950607, 1937646],[949824, 1938556],
[947877, 1937655],[946815, 1937968],[945715, 1939863],[944616, 1942967],[944828, 1943270],
[944089, 1943965],[942163, 1942199],[942112, 1941820],[940060, 1942052],[939850, 1942301],
[939583, 1944502],[940035, 1944970],[940290, 1945653],[940542, 1947533],[940116, 1949254],
[938413, 1949533],[938101, 1949120],[937604, 1949135],[935619, 1950179],[935318, 1950789],
[935796, 1951149],[936659, 1952928],[937634, 1953813],[938095, 1954545],[937944, 1955684],
[938376, 1956365],[938697, 1956256],[940307, 1954643],[942686, 1953113],[943281, 1952998],
[944891, 1953539],[947014, 1954664],[948177, 1960790],[951230, 1962308],[952080, 1961600],
[953135, 1960044],[953393, 1959333],[953653, 1959260],[954495, 1959778],[955367, 1963192],
[955367, 1964647],[956974, 1966631],[957326, 1966942],[957648, 1966942]
]
]}, "properties": {"Name": "11", "Description": "서울특별시"}}
]};
sop.geoJson(geoData, {
style: function () {
return {
weight: 2,
opacity: 1,
color: '#565656',
dashArray: '3',
fillOpacity: 0.7
};
},
onEachFeature: function (feature, layer) {
layer.bindInfoWindow(feature.properties.Description);
}
}).addTo(map);
지도위의 도형에 캡션을 생성하는 예제입니다.
생성된 폴리곤의 가운데에 setCaption 속성을 사용하여 캡션을 삽입 할 수 있습니다.
var map = sop.map("map"); //map 생성
map.setView(sop.utmk(953427, 1950827), 5); // 지도 중심좌표로 뷰 설정
//지도에 표시되는 폴리곤 데이터
var polygons = [
[
[949279, 1951131],
[950631, 1950331],
[951063, 1949091]
]
];
//폴리곤 생성
var polygon = sop.polygon(polygons, {
stroke: true,
color: "red",
weight : 3,
opacity: 1,
fill: true,
fillColor:"red",
fillOpacity: 0.2
});
polygon.addTo(map); //지도에 폴리곤 추가
polygon.setCaption({title:"폴리곤 캡션 생성", color:"black"});
map.fitBounds(polygon); ////fitBounds 최대 줌 레벨로 polygon데이터를 보여 줍니다
지도 위에 생성된 임의의 도형 클릭시 이벤트를 발생시키는 예제입니다.
생성된 폴리곤에 대한 이벤트는 일반적인 이벤트 등록 방법처럼 on 을 사용하여 등록 할수 있습니다.
var map = sop.map("map"); //map 생성
map.setView(sop.utmk(953427, 1950827), 5); // 지도 중심좌표로 뷰 설정
//지도에 표시되는 폴리곤 데이터
var polygons = [
[
[949279, 1951131],
[950631, 1950331],
[951063, 1949091]
]
];
//폴리곤 생성
var polygon = sop.polygon(polygons, {
stroke: true,
color: "red",
weight : 3,
opacity: 1,
fill: true,
fillColor:"red",
fillOpacity: 0.2
});
polygon.on("click",function(e){alert("폴리곤 클릭");}); //polygon에 대한 이벤트 등록
polygon.addTo(map); //지도에 폴리곤 추가
map.fitBounds(polygon); ////fitBounds 최대 줌 레벨로 polygon데이터를 보여 줍니다
KML을 이용하는 예제입니다.
KML 은 Google 어스, Google 지도와 같은 어스 브라우저에서 지리 데이터를 표시하는 데 사용되는 파일 형식으로 XML표준을 기반으로 합니다.
지도 API에서는 KML을 활용하여 위치 표시, 다각형 및 경로를 표시 할 수 있습니다.
대표적인 지원 태그로는 Placemark, Point, LineString,
LinearRing, Polygon 등이 있습니다.
아래 예제는 KML파일을 이용하여 지도를 표시한 예제입니다.
var mapOptions = {
statisticTileLayer: true
};
var map = sop.map('map',mapOptions);
map.setView([953427, 1950827], 5);
var runLayer = sop.kml('/upload/myData/sample.kml')
.on('ready', function(e) {
map.fitBounds(runLayer.getBounds());
}).addTo(map);
열지도 기능을 이용하는 예제입니다.
히트맵(heatmap)은 열을 뜻하는 히트(heat)와 지도를 뜻하는 맵(map)을 결합시킨 단어로,
색상으로 표현할 수 있는 다양한 정보를 지도타일 위에 열분포 형태의 비쥬얼한 그래픽으로 데이터를 출력하는 것이 특징입니다.
히트맵은 sop.heatLayer 에 좌표로 구성된 배열정보와 투명도, 반지름,
흐림도 등과 같은 옵션정보를 설정하여 생성할 수 있습니다.
var map, totalCnt, heatDatas;
heatDatas = [
[ 953424, 1950945.5],
[ 953427, 1950919],
[ 953429.5, 1950884],
[ 953429, 1950842.5],
[ 953429.5, 1950812],
[ 953426.5, 1950765],
[ 953426.5, 1950717],
[ 953428, 1950678.5],
[ 953424.5, 1950898.5],
[ 953426, 1950868],
[ 953428.5, 1950835],
[ 953425.5, 1950795.5],
[ 953427.5, 1950738.5],
[ 953423.5, 1950716],
[ 953419, 1950692],
[ 953372, 1950766],
[ 953355, 1950710],
[ 953370, 1950673],
[ 953395, 1950650],
[ 953408, 1950630],
[ 953397, 1950703],
[ 953382, 1950707],
[ 953374, 1950673],
[ 953453, 1950659],
[ 953503, 1950672],
[ 953517, 1950740],
[ 953533, 1950762],
[ 953490, 1950778],
[ 953511, 1950798],
[ 953532, 1950779],
[ 953548, 1950778],
[ 953567, 1950771],
[ 953471, 1950644],
[ 953438, 1950621],
[ 953342, 1950644],
[ 953363, 1950689],
[ 953340, 1950690],
[ 953348, 1950744],
[ 953347, 1950784]
];
map = sop.map('map');
map.setView([ 953427, 1950827 ], 13);
var heat = sop.heatLayer(heatDatas).addTo(map);
heat.setOptions({
minOpacity : 0.01,
radius : 5,
blur : 5,
max : 1
});
