A Vue component that draws a series of interactive maps represented in a grid
This is a kinda strange proposal to display a map, my main idea is to represent small countries not with the their real size, but instead with a relative size that allows the user an ease identify. Plus, if you like pixel arts, you're gonna have more fun than the regular maps. Currently only counts with three maps; a world map, an USA map and a mexico map because...
If you like it, let me know to integrate more countries and add more options.
npm install --save vue-countries-grid-map
Install all the components:
import Vue from 'vue'
import VueCountriesGridMap from 'vue-countries-grid-map'
Vue.use(VueCountriesGridMap)
Install all the components:
import 'vue-countries-grid-map/dist/vue-countries-grid-map.css'
import VueCountriesGridMap from 'vue-countries-grid-map/dist/vue-countries-grid-map.common'
Vue.use(VueCountriesGridMap)
<link rel="stylesheet" href="vue-countries-grid-map/dist/vue-countries-grid-map.css"/>
<script src="vue.js"></script>
<script src="vue-countries-grid-map/dist/vue-countries-grid-map.browser.js"></script>
The plugin should be auto-installed. If not, you can install it manually with the instructions below.
Install all the components:
Vue.use(VueCountriesGridMap)
Install all the components:
import Vue from 'vue'
import VueCountriesGridMap from 'vue-countries-grid-map/src'
Vue.use(VueCountriesGridMap)
.vue
files. More info in the official documentation.
Property | Type | Default | Description |
---|---|---|---|
mapSelected | string | map_world | Allows users to choose between a collection of maps. The current available maps are 'map_world', 'map_mexico' and 'map_usa' |
primaryColor | string | green | Allow users to choose between a collections of colors. The current available colors are 'green', 'red', 'pink', 'purple', 'deepPurple', 'indigo', 'blue', 'lightBlue', 'cyan', 'teal', 'lightGreen', 'lime', 'yellow', 'amber', 'orange', 'deepOrange', 'brown', 'blueGrey', 'grey' |
colorType | string | random | Allow users to choose between a few types of colors. The current available options are 'random' and 'density' |
detailType | string | invisible | Allow users to choose between a few configurations for the detail display. The current available configurations are 'invisible' and 'side' |
<template>
<div id="app">
<select v-model="selected_option">
<option v-for="option in mapOptions" v-bind:value="option.value" v-bind:key="option.value">{{option.text}}</option>
</select>
<select v-model="selected_color">
<option v-for="option in colorOptions" v-bind:value="option.value" v-bind:key="option.value">{{option.text}}</option>
</select>
<select v-model="selected_type">
<option v-for="option in typeOptions" v-bind:value="option.value" v-bind:key="option.value">{{option.text}}</option>
</select>
<select v-model="selected_detail">
<option v-for="option in detailOptions" v-bind:value="option.value" v-bind:key="option.value">{{option.text}}</option>
</select>
<countries-grid-map
:mapSelected="selected_option"
:primaryColor="selected_color"
:colorType="selected_type"
:detailType="selected_detail"
@change-click-node="changeClickNode">
<template slot="detail">
<span v-if="actualNode!=null">A description of: {{ actualNode.name }}</span>
</template>
</countries-grid-map>
</div>
</template>
<script>
import {CountriesGridMap} from 'vue-countries-grid-map';
export default {
name: 'app',
components: {
CountriesGridMap
},
methods: {
changeClickNode (actualNode) {
this.actualNode = actualNode
}
},
data: function() {
return {
actualNode: null,
selected_option: 'map_world',
selected_color: 'purple',
selected_type: 'random',
selected_detail: 'invisible',
mapOptions: [
{ value: 'map_world', text: 'World' },
{ value: 'map_mexico', text: 'México' },
{ value: 'map_usa', text: 'United States of America' }
],
typeOptions: [
{ value: 'random', text: 'Random' },
{ value: 'density', text: 'Density' }
],
detailOptions: [
{ value: 'invisible', text: 'Without Detail' },
{ value: 'side', text: 'Side Detail' }
],
colorOptions: [
{ value: 'red', text: 'Red' },
{ value: 'pink', text: 'Pink' },
{ value: 'purple', text: 'Purple' },
{ value: 'deepPurple', text: 'Deep Purple' },
{ value: 'indigo', text: 'Indigo' },
{ value: 'blue', text: 'Blue' },
{ value: 'lightBlue', text: 'Light Blue' },
{ value: 'cyan', text: 'Cyan' },
{ value: 'teal', text: 'Teal' },
{ value: 'green', text: 'Green' },
{ value: 'lightGreen', text: 'Light Green' },
{ value: 'lime', text: 'Lime' },
{ value: 'yellow', text: 'Yellow' },
{ value: 'amber', text: 'Amber' },
{ value: 'orange', text: 'Orange' },
{ value: 'deepOrange', text: 'Deep Orange' },
{ value: 'brown', text: 'Brown' },
{ value: 'blueGrey', text: 'Blue Grey' },
{ value: 'grey', text: 'Grey' },
]
}
}
}
</script>