korea map - styles

3Overview

HORIZON CHART 의 전반적인 스타일에 대한 값을 정의

stylesMidnighttruejs
var defaultStyles = {
	layout : {
		area : {
			color : '#f8f8f8'
		},
		line : {
			color : '#eaeaea',
			width : 1
		}
	},
	korea : {                    
		position : {
			x : 0,
			y : 0
		},
		scale : 1,
		line : {
			color : '#fff',
			width : 2
		},
		area : {
			color : [
				'#fceb96', '#ffde59', '#ffc259', '#ff9632', '#fe753d', '#f45346', '#e63b3b'
			]
		},
		hover : {
			use : true,
			area : {
				color : '#9d9c9c'
			}
		}
	},
	marker : {
		use : false,
		image : {
			src: '../img/marker.png'
		},
		width : 30,
		height : 30
	},
	sea : {
		west : {
			position : {
				x : 75,
				y : 300
			},
			text : {
				value : 'West sea',
				family: 'Nanum Gothic',
				size: 15, 
				color: '#666666', 
				align: 'center',    /* left | center | right */
				style: 'normal',    /* normal | italic */
				weight: 'bold', /* normal | bold */
				opacity: 1
			}
		},
		east : {
			position : {
				x : 510,
				y : 300
			},
            text : {
				value : 'West sea',
				family: 'Nanum Gothic',
				size: 15, 
				color: '#666666', 
				align: 'center',    /* left | center | right */
				style: 'normal',    /* normal | italic */
				weight: 'bold', /* normal | bold */
				opacity: 1
			}
		},
		south : {
			position : {
				x : 280,
				y : 530
			},
            text : {
				value : 'West sea',
				family: 'Nanum Gothic',
				size: 15, 
				color: '#666666', 
				align: 'center',    /* left | center | right */
				style: 'normal',    /* normal | italic */
				weight: 'bold', /* normal | bold */
				opacity: 1
			}
		}
	}
};

Configuration Styles

layout

SVG 전체 영역 스타일

Parameters

   defalulttype설명
layoutareacolor'#f8f8f8'stringSVG 전체 영역의 배경 색상
line color'#eaeaea'stringSVG 전체 영역의 테두리 색상
width1numberSVG 전체 영역의 테두리 두께

Usage 

layoutMidnighttruejs
var styles = {
	layout: {
		area : {
			color : '#f8f8f8'
		},
		line : {
			color : '#eaeaea',
			width : 1
		}
	}
}

Demo 

Publisher Go 

korea 

korea.position

korea map 의 위치 설정

Parameters

   defalulttype설명
korea


positionx0number

SVG 영역 안에서 korea map 의 X 축 위치

 

y0number

SVG 영역 안에서 korea map 의 Y 축 위치

Usage

korea.positionMidnighttruejs
var styles = {
	korea: {
		position : {
			x : 20,
			y : 20
		}
	}
}

Demo

Publisher Go  

korea.scale 

korea map 의 크기 설정 

Parameters 

  defalulttype설명
koreascale1number

korea map 의 크기 설정 ( 0 ~ )

 Usage 

korea.scaleMidnighttruejs
var styles = {
	korea: {
		scale: 1.5
	}
}

Demo 

Publisher Go 

korea.line  

지도 상의 각 지역 별 테두리 선 스타일 

Parameters  

   defalulttype설명
korealinecolor'#fff'string

지도 상의 각 지역 별 테두리 선 색상 (영문컬러명이나 RGB값 입력)

  width2number지도 상의 각 지역 별 테두리 선 두께  (0 ~ )

 Usage  

korea.lineMidnighttruejs
var styles = {
	korea: {
		line: {
			color : '#fff',
			width : 1
		}
	}
}

Demo 

Publisher Go 

korea.area

지도 상의 각 지역 별 테두리 선 스타일

Parameters 

   defaulttype설명
koreaareacolor

['#fceb96', '#ffde59', '#ffc259', '#ff9632', 

'#fe753d', '#f45346', '#e63b3b']

array지도 상의 각 지역 별 면 색상 (영문컬러명이나 RGB값 입력)

Usage 

korea.areaMidnighttruejs
var styles = {
	korea: {
		area: {
			color : [
				'#fceb96', '#ffde59', '#ffc259', '#ff9632', '#fe753d', '#f45346', '#e63b3b'
			]
		}
	}
}

Demo

Publisher Go 

korea.hover

korea map 마우스 오버 시 스타일 변경

Parameters 

   defaulttype설명

korea

use falsebooleankorea map 마우스 오버 시 hover 이벤트 사용 여부 ( 'true' or 'false' )
areacolor

'#fff'

stringkorea map 마우스 오버 시 해당 지역의 변경되는 면 색상 (영문컬러명이나 RGB값 입력)

Usage 

korea.hoverMidnighttruejs
var styles = {
	korea: {
		area: {
			color : '#fff'
		}
	}
} 

Demo

Publisher Go  

marker

marker 스타일 설정

Parameters 

   valuetype설명
marker


use 'true'booleanmarker 사용 여부 ( 'true' or 'false' )
imagesrc
'marker.png'
stringmarker 이미지 url
width 30numbermarker 의 넓이 ( 0 ~ )
height 30numbermarker 의 높이 ( 0 ~ )

Usage 

markerMidnighttruejs
var styles = {
	marker: {
		use: true,
		image : {
			src : 'marker.png'
		},
		width : 30,
		height : 30
	}
}

Demo

Publisher Go 

sea

지도 상에서 동해, 서해, 남해를 TEXT 로 표현

Parameters 

    valuetype설명
seawestpositionx75numbertext 의 X 축 위치
 y300numbertext 의 Y 축 위치
textvalue'West sea'stringtext 의 value 값 정의
 family'Nanum Gothic'string글꼴 종류 이름 ( 영문명 )
 size15number글꼴 크기 ( px 단위 )
 color'#666666'string글꼴 색상 ( 영문 색상명 혹은 RGB값 )
 align'center'string텍스트 align ( 'left' or 'right' or 'center' )
 style'normal'string글꼴 모양 ( 'normal' or 'italic')
 weight'normal'string글꼴 두께 ( 'normal' or 'bold' )
 opacity1number글꼴 투명도 ( 0 ~ 1 )
eastsea.west 와 스타일 정의 동일
southsea.west 와 스타일 정의 동일

Usage 

seaMidnighttruejs
var styles = {
	sea : {        
		west : {
            position : {
                x : 75,
                y : 300
            },
            text : {
                value : 'West sea',
                family: 'Nanum Gothic',
                size: 15,
                color: '#666666',
                align: 'center',    /* left | center | right */
                style: 'normal',    /* normal | italic */
                weight: 'bold',		/* normal | bold */
                opacity: 1
            }
        },
        east : {
            position : {
                x : 510,
                y : 300
            },
            text : {
                value : 'West sea',
                family: 'Nanum Gothic',
                size: 15,
                color: '#666666',
                align: 'center',    /* left | center | right */
                style: 'normal',    /* normal | italic */
                weight: 'bold', 	/* normal | bold */
                opacity: 1
            }
        },
        south : {
            position : {
                x : 280,
                y : 530
            },
            text : {
                value : 'West sea',
                family: 'Nanum Gothic',
                size: 15,
                color: '#666666',
                align: 'center',    /* left | center | right */
                style: 'normal',    /* normal | italic */
                weight: 'bold', 	/* normal | bold */
                opacity: 1
            }
        }
    }
}

Demo

Publisher Go