Display OpenStreetMap Map On A Card – vue-map-card

Install & Download:

# Yarn
$ yarn add vue-map-card
# NPM
$ npm install vue-map-card

Description:

An opinionated map component that allows developers to display a zoomable OpenStreetMap map on a card.

How to use it:

1. Import the vue-map-card component.

import { VueMapCard } from ‘vue-map-card’

2. In your app.vue:

<template>
  <map-card 
    street="Street" 
    post="Postcode"
    city="City"
    country="Country" />
</template>

<!-- OR -->
<template>
  <map-card 
    :lng="57.69947"
    :lat="11.95112" />
</template>

3. Set the zoom level of the map.

<template>
  <map-card 
    street="Street" 
    post="Postcode"
    city="City"
    country="Country"
    zoom="50" />
</template>

Preview: