https://github.com/gaetansenn/parcel-stores-locator
Expose and draw on the map the locations of parcel retrieval from most shippers such as UPS, DHL, La Poste ...
https://github.com/gaetansenn/parcel-stores-locator
Last synced: 7 months ago
JSON representation
Expose and draw on the map the locations of parcel retrieval from most shippers such as UPS, DHL, La Poste ...
- Host: GitHub
- URL: https://github.com/gaetansenn/parcel-stores-locator
- Owner: gaetansenn
- Created: 2020-11-06T16:17:44.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-23T11:10:43.000Z (over 3 years ago)
- Last Synced: 2025-03-14T18:04:45.923Z (8 months ago)
- Language: JavaScript
- Size: 79.1 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
## Table of Contents
- [Features](#features)
- [Usage](#usage)
> Module to Expose and draw on the map the locations of parcel retrieval from most shippers such as UPS, DHL, La Poste, Mondial Relay ...
## Requirements
Please use the version of node 13 if you want to support native i18n or include intl during node compilation
## Features
- Api plugin (SSR, Client side) to return locations according to provider (Ups and more soon)
- Maps components to display location (Gmap and more soon)
- List component to display location
## Usage
Set the `parcelStoresLocator` option in `nuxt.config`:
```js
export default {
parcelStoresLocator {
providers: {
ups: {
// Ups configuration
},
mondialrelay: {
// Mondial Relay configuration
}
}
}
}
```
**Note:** If using nuxt `2.10...2.13`, you will have to import components manually otherwise install and add `@nuxt/components` to `buildModules` inside `nuxt.config`.
`parcelStoresLocator` will automatically load provider according to configuration.
### Components
Parcel Stores locator inject vue components with `components:dirs` nuxt hook to display the stores inside a map.
#### Gmap
Please add `nuxt-gmaps` and set your configuration:
```js
export default {
parcelStoresLocator {
gmap: {
location: {
icon: 'data:image/png;base64,...' // Change default gps location icon
},
compass: {
icon: 'data:image/png;base64,...' // Change default compass icon
},
pins: {
selected: {
icon: 'data:image/png;base64,...' // Please provide selected pin
},
unselected: {
icon: 'data:image/png;base64,...' // Please provide unselected pin
}
},
// TODO: Add more config
}
}
}
```
Then inside your page
```html
```
##### Methods
You can access to component methods by using the ref argument.
For instance we would like to zoom map to locations after `display: none` removed
```html
```
Then in your component
```js
methods: {
openMap () {
openMap () {
this.opened = true
this.$nextTick(this.$refs.map.zoomOnLocations)
}
}
}
```