Vue Turkey Map

📚 Introduction

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

⚒️ Used Technologies

• Vue.js
• Sass
• Vite

Getting Started

For using the project follow the steps below

Prequisities

• npm
• vite

Installation

You can clone the project with the following URL.

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

npm install

Props

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.

Emits

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