vue-countries-grid-map

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.

Installation

npm install --save vue-countries-grid-map

Default import

Install all the components:

import Vue from 'vue'
import VueCountriesGridMap from 'vue-countries-grid-map'

Vue.use(VueCountriesGridMap)

Distribution import

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)

⚠️ You may have to setup your bundler to embed the css file in your page.

Browser

<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)

Source import

Install all the components:

import Vue from 'vue'
import VueCountriesGridMap from 'vue-countries-grid-map/src'

Vue.use(VueCountriesGridMap)

⚠️ You need to configure your bundler to compile .vue files. More info in the official documentation.

Options

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'

Example

<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>

License

MIT