Vue Turkey Map

📚 Introduction

This repo contains SVG Turkey Map created with Vue.js. You can customize the map, you can interact with it.

For using the project follow the steps below

You can clone the project with the following URL.

git clone https://github.com/trombonist76/vue-turkey-map

npm install

Prop	Type	Default	Description
viewbox	Object	`{top: 0, left: 80, width: 1050, height: 585 }`	Map viewbox.
hoverable	Boolean	true	City hover state.
opacity	Number	1	Hover state '0' to '1'.
tooltipContent	Function	`city => city.name`	Tooltip content when city hovered.
tooltipOffset	Object	`{top: -26, left: 16}`	Tooltip location by given pixels.
clickToSelect	Boolean	true	Select city when it clicked.
toggleUnselect	Boolean	true	Unselect city when it clicked after select.
isSelectedCity	Function	`city => false`	Select cities by given function, return 'true' if it's selected.
defaultColor	String	`#fff`	Default city color, not hovered or not selected.
hoverHexColor	String	`#aaa`	City color when it hovered.
selectedColor	String	`#7a7a7a`	City color when it selected.
selectCities	Function	-	When you want to use custom select condition or define different selected city color each city, you can use the prop. If you want to select city/cities you can change the 'isSelected' or 'color' property of city in given array. After that return the changed array.

Emit	Description
Hover	Hovered city object.
Select	First argument; selected city, second argument; all selected cities.