This repo contains SVG Turkey Map created with Vue.js. You can customize the map, you can interact with it.
- Vue.js
- Sass
- Vite
For using the project follow the steps below
- npm
- vite
You can clone the project with the following URL.
git clone https://github.com/trombonist76/vue-turkey-mapnpm 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. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent