0.0.11 • Published 1 year ago
vue-turkey-map v0.0.11
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. |