SVG Iran Map

Overview

Iran Map Vue

NPM version NPM downloads NPM downloads MIT License

Iran Map Vue

Iran svg map... :)

Installation

npm i iran-map-vue

Usage

<template>
    <iran-map-vue
      :click="_clickMap"
      :hover="_hoverMap"
      :data="provinces"
      border-color="#999"
      lake-color="#8dccc9"
      sea-color="#8dccc9"
      width="100%"
    />
</template>

<script>
import IranMapVue from 'iran-map-vue'
export default {
  name: 'DemoIranMap',
  components: { IranMapVue },
  data() {
    return {
      provinces: { Isfahan:{ color: '#3e3ec9'} },
    }
  },
  methods: {
    _hoverMap(item) {
      console.log(item)
    },
    _clickMap(item) {
      console.log(item)
    },
  },
}
</script>

Props

{
      data: {
        type: Object,
        default() {
          return {
                Tehran:{
                    color: '#000',
                    stroke: '#333',
                    strokeWidth: '4px',
                    opacity: 0.5,
                    bgColor: '#f00',
                    bubbleColor: '#00f',
                    content : `<span>Tehran</span>`,
                    tooltip : `Tehran`,
                    count: 1000,
                }
            };
        },
      },
      width: {
        type: String,
        default: '400px',
      },
      fontSize: {
        type: String,
        default: '12px',
      },
      borderColor: {
        type: String,
        default: '#333',
      },
      seaColor: {
        type: String,
        default: '#007de5',
      },
      lakeColor: {
        type: String,
        default: '#007de5',
      },
      islandColor: {
        type: String,
        default: '#cfcfcf',
      },
      provinceColor: {
        type: String,
        default: '#e1e1e1',
      },
      bubbleColor: {
        type: String,
        default: '#996666',
      },
      color: {
        type: String,
        default: '#333',
      },
      click: {
        type: Function,
        default: undefined,
      },
      hover: {
        type: Function,
        default: undefined,
      },
      showBgColor: {
        type: Boolean,
        default: true
      },
      showBubble: {
        type: Boolean,
        default: false,
      },
      showCount: {
        type: Boolean,
        default: false,
      },
      showContent: {
        type: Boolean,
        default: false,
      },
      showTooltip: {
        type: Boolean,
        default: false,
      },
      maxCount:{
        type: Number,
        default: 0
      },
      minCount:{
        type: Number,
        default: null
      },
    }

MapData

   // island
  AbuMusa: { ... },
  FarorBig: { ... },
  FarorSmall: { ... },
  Hendorabi: { ... },
  Hengam: { ... },
  Hormoz: { ... },
  Khark: { ... },
  Kish: { ... },
  Lark: { ... },
  Lavan: { ... },
  Qeshm: { ... },
  Siri: { ... },
  TunbBig: { ... },
  TunbSmall: { ... }

  // lake
  Jazmourian: { ...},
  Lake_Qom: { ... },
  Urmia: { ... }

  // province
  Alborz: { ... },
  Ardabil: { ... },
  AzerbaijanEast: { ... },
  AzerbaijanWest: { ... },
  Bushehr: { ... },
  ChaharMahaalBakhtiari: { ... },
  Fars: { ... },
  Gilan: { ... },
  Golestan: { ... },
  Hamadan: { ... },
  Hormozgan: { ... },
  Ilam: { ... },
  Isfahan: { ... },
  Kerman: { ... },
  Kermanshah: { ... },
  KhorasanNorth: { ... },
  KhorasanRazavi: { ... },
  KhorasanSouth: { ... },
  Khuzestan: { ... },
  KohgiluyehBoyerAhmad: { ... },
  Kurdistan: { ... },
  Lorestan: { ... },
  Markazi: { ... },
  Mazandaran: { ... },
  Qazvin: { ... },
  Qom: { ... },
  Semnan: { ... },
  SistanBaluchestan: { ... },
  Tehran: { ... },
  Yazd: { ... },
  Zanjan: { ... },

  // sea
  Caspian: {...},
  PersianGulf: { ... }

License

MIT

author

Javad Shariati jsh1400


[Lifeweb Company] [email protected]

Issues
Releases(v1.3.0)
  • v1.3.0(Feb 22, 2021)

  • v1.2.2(Dec 2, 2020)

  • v1.0.4(Nov 28, 2020)

    • [x] show bubble chart
    • [x] show content
    • [x] show count
    • [x] bg color
    • [x] bubble color
    • [x] font color
    • [x] font size
    • [x] set width
    • [x] handle click
    • [x] handle hover
    • [x] set opacity
    {
              Tehran: {
                bgColor: 'red',
                bubbleColor: '#0000ff',
                count: 70,
                content: '😡',
                color: '#000',
                opacity: 0.6
              },
    }
    
    Source code(tar.gz)
    Source code(zip)
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

马金花儿 2.2k Jan 16, 2022
Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Guillermo Peralta Scura 110 Jan 2, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

Vladimir Vershinin 610 Jan 12, 2022
a simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

Eduardo P. Rivero 22 Sep 18, 2021
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

eric regnier 124 Jan 14, 2022
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]

SayoDownloader This software only provide in Chinese! 一个全新设计的小夜地图下载器

null 5 Nov 19, 2021
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

Melih Altıntaş 223 Jan 24, 2022
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Sylvain Julé 79 Dec 12, 2021
A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

Gerard Burns 39 Jan 16, 2022
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

MapTiler 4 Dec 31, 2021
A set of Vue.js components to display an interactive SVG map

vue-svg-map A set of Vue.js components to display an interactive SVG map. Demo Take a look at the live demo! Installation npm npm install --save vue-s

Victor Cazanave 65 Jan 18, 2022
Dynamically loads an SVG source and inline svg element so you can manipulate the style of it

Vue Inline SVG Vue component loads an SVG source dynamically and inline <svg> so you can manipulate the style of it with CSS or JS. It looks like basi

null 110 Jan 12, 2022
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

马金花儿 2.2k Jan 16, 2022
Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Guillermo Peralta Scura 110 Jan 2, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

Vladimir Vershinin 610 Jan 12, 2022
a simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

Eduardo P. Rivero 22 Sep 18, 2021
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

eric regnier 124 Jan 14, 2022
A simple Vue.js directive to map BEM CSS class names.

Vue Simple BEM A simple Vue.js directive to map BEM CSS class names. Installation Install using your package manager of choice. yarn add vue-simple-be

Matt Turner 13 Aug 23, 2021
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]

SayoDownloader This software only provide in Chinese! 一个全新设计的小夜地图下载器

null 5 Nov 19, 2021
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

Melih Altıntaş 223 Jan 24, 2022
🤞🏻 Map Boolean As Floating Number, Simple And Functional

???? Map Boolean As Floating Number, Simple And Functional

刘鲲鹏 5 Nov 25, 2021
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Sylvain Julé 79 Dec 12, 2021
A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

Gerard Burns 39 Jan 16, 2022
Vue.js component to select a CSV file, map the columns to fields, and post it somewhere.

Vue.js component to handle CSV uploads with field mapping. This version is for Vue 3. Click here for Vue 2. VueCsvImport is completely un-styled and c

John Gile 118 Dec 14, 2021
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

MapTiler 4 Dec 31, 2021
animated discord logo in svg

Animated Discord Logo This project was inspired by Discord's loading logo. Since the loading logo is a video you have less control over its behavior.

null 53 Dec 13, 2021
Awesome SVG icon component for Vue.js, built-in with Font Awesome icons.

Vue-Awesome Awesome SVG icon component for Vue.js, with built-in Font Awesome icons. ???? 中文版 Vue-Awesome an SVG icon component for Vue.js, with built

GU Yiling 2.3k Jan 12, 2022
😸 Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop.

?? SVG - Simple Line Icons This is a Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop. By default componen

Nikos Koikas 16 May 8, 2021
Material design icons by Google for Vue.js & Nuxt.js (server side support & inline svg with path)

Material Design Icons by Google for Vue.js & Nuxt.js (inline SVG with path) This library should grant an easy-to-use interface to icons from Material

Alexander Belov 14 Oct 9, 2020