world-map-component v1.1.5

World Map Component

A World Map popup overlay with sorted by continents and countries.

Table of Contents

• Installation
• Usage
  • Import component and register the component
  • Component Props
  • Required Props
  • Optional Props
• Run your unit tests

Installation

npm install world-map-component

Usage

Import component and register the component

import Vue from 'vue';
import WorldMapComponent from 'world-map-component';

export default Vue.extend({
	name: 'ServeDev',
	components: {
		WorldMapComponent,
	},
});
</script>

<template>
	<div id="app">
		<world-map-component />
	</div>
</template>

Component props

Required Props

• legendItems: This is the legend that you will see on the bottom left corner of this component. LegendItems has to be an Array with objects which only contains the properties color and title

  //example
  [
  	{
  		color: 'orange',
  		title: 'test',
  	},
  	{
  		color: 'blue',
  		title: 'test2',
  	},
  ];

  

• countryItems: The countryItems also has to be an Array with objects that only contains the properties color, name, and shortCode. This property will have affect on the component in 2 areas. First is that this list will be populated on the right side of the component and second it will render the pins on the approriate location on the map. The pins will use the shortCodes to place the pins in the middle of the correct country. To see a list (in json format) of all the shortcodes click here

  //example
  [
  	{
  		color: 'orange',
  		name: 'Netherland',
  		shortCode: 'NL',
  	},
  	{
  		color: 'blue',
  		name: 'Russia EU',
  		shortCode: 'RU-EU',
  	},
  	{
  		color: 'blue',
  		name: 'Russia AS',
  		shortCode: 'RU-AS',
  	},
  ];

  • Countries List:

    

  • Pins:

    

Optional Props

• width: You can set the width of the container (default is 1200px)
• height: You can set the height of the container (default is according the svg)

Run your unit tests

In order to run tests, you need to clone this repo first.

git clone https://github.com/smitnet/world-map-component.git

cd world-map-component

npm run test:unit