vue-map-card

An opinionated map component for Vue.

Preview

vue-map-card.webm

Introduction

vue-map-card is an opinionated map component for Vue that offers a simple way to display a map on a card. The component is built with Vue 3, TypeScript and OpenStreetMap.

Features

• Display a map on a card
• Set map location by address
• Set map location by coordinates
• Set zoom level
• Display a map on a card with a marker

Installation

To start using the library, install it in your project:

pnpm install vue-map-card
or
yarn add vue-map-card

Usage

For Vue 3

<!-- App.vue -->
<template>
  <map-card 
    street="Andra Långgatan 5" 
    post="413 03"
    city="Gothenburg"
    country="Sweden" />
</template>

<script lang="ts" setup>
import { MapCard } from 'vue-map-card'
</script>

For Nuxt 3

Define a nuxt plugin

// plugins/sonner.client.ts
import { VueMapCard } from 'vue-map-card'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('MapCard', MapCard)
})

Use MapCard component anywhere in the Vue SFC

<!-- App.vue -->
<template>
  <map-card 
    street="Andra Långgatan 5" 
    post="413 03"
    city="Gothenburg"
    country="Sweden" />
</template>

<script lang="ts" setup>
</script>

Add the build transpile for vue-map-card

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  ...
  build: {
    transpile: ['vue-map-card']
  }
})

CDN Link

EMS version

https://cdn.jsdelivr.net/npm/vue-map-card/+esm

UMD version

Make sure to use the latest version number in the link below.

https://www.unpkg.com/[email protected]/lib/vue-map-card.umd.cjs

Configuration

Zoom

it is possible to exceed the maximum zoom level of 50 but it is not recommended.

It is possible to set the zoom level of the map by passing the zoom prop. The default value is 15 but you can set it to any value between 1 and 50.

<!-- App.vue -->
<template>
  <map-card 
    street="Andra Långgatan 5" 
    post="413 03"
    city="Gothenburg"
    country="Sweden"
    zoom="10"/>
</template>

<script lang="ts" setup>
import { MapCard } from 'vue-map-card'
</script>

License

MIT @this-oliver