Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Baroshem/map

🗺 Map Module for Nuxt 3
https://github.com/Baroshem/map

google leaflet map module nuxt openstreetmap

Last synced: 17 days ago
JSON representation

🗺 Map Module for Nuxt 3

Awesome Lists containing this project

README

        

[![@nuxtjs/map](https://map.nuxtjs.org/preview.png)](https://map.nuxtjs.org)

# @nuxtjs/map

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![License][license-src]][license-href]

> Map module for [Nuxt](https://v3.nuxtjs.org)

- [✨  Release Notes](https://github.com/nuxt-community/map-module/releases)
- [📖  Read the documentation](https://map.nuxtjs.org)

## Features

- Nuxt 3 ready
- Easy integration with Google Maps & Leaflet
- Use only two components `nuxt-map` and `nuxt-marker` no matter what map provider you choose
- [Coming soon] More map providers and components
- TypeScript support

[📖  Read the documentation](https://map.nuxtjs.org)

## Setup

```sh
yarn add @nuxtjs/map # yarn
npm i @nuxtjs/map # npm
```

## Basic usage

Firstly, you need to add `@nuxtjs/map` to your Nuxt config.

```javascript
// nuxt.config.js

{
buildModules: [
"@nuxtjs/map",
],
map: {
provider: '' // google | leaflet
}
}
```

Then you can start using `@nuxtjs/map` in your app!

```vue





const markerPositions = [
{ lat: 40.689247, lng: -74.044502 },
{ lat: 40.689947, lng: -74.044502 },
{ lat: 40.684947, lng: -74.044502 }
]
const center = markerPositions[0]
const zoom = 15

```

## Development

1. Clone this repository
2. Install dependencies using `yarn install` or `npm install`
3. Start development server using `yarn dev` or `npm run dev`

## License

[MIT License](./LICENSE)

[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/map/latest.svg
[npm-version-href]: https://npmjs.com/package/@nuxtjs/map
[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/map.svg
[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/map
[github-actions-ci-src]: https://github.com/nuxt-modules/map-module/actions/workflows/ci.yml/badge.svg
[github-actions-ci-href]: https://github.com/nuxt-community/map-module/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/map-module.svg
[codecov-href]: https://codecov.io/gh/nuxt-community/map-module
[license-src]: https://img.shields.io/npm/l/@nuxtjs/map.svg
[license-href]: https://npmjs.com/package/@nuxtjs/map