Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/collective/volto-geocoding
Volto addon providing a widget to search addresses and save coordinates
https://github.com/collective/volto-geocoding
addon address cms geocoding plone volto
Last synced: 1 day ago
JSON representation
Volto addon providing a widget to search addresses and save coordinates
- Host: GitHub
- URL: https://github.com/collective/volto-geocoding
- Owner: collective
- Created: 2020-07-01T09:05:06.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-07-08T07:35:58.000Z (over 4 years ago)
- Last Synced: 2024-11-05T00:34:49.474Z (8 days ago)
- Topics: addon, address, cms, geocoding, plone, volto
- Language: JavaScript
- Homepage:
- Size: 11.7 KB
- Stars: 0
- Watchers: 11
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-volto - volto-geocoding - A widget for Volto to search addresses and save coordinates. (Addons)
README
# volto-geocoding
A widget for [Volto](https://github.com/plone/volto) to search addresses and save coordinates.
It requires on the backend a JSON field to save data.
To be used with mrs-developer, see [Volto docs](https://docs.voltocms.com/customizing/add-ons/) for further usage informations.
## Setup with voltocli
```bash
voltocli
```
and insert `volto-geocoding` as addon name and `[email protected]:collective/volto-geocoding.git` as addon URL.
## Manual setup
In your Volto project:
```bash
yarn add mrs-developer collective/volto-geocoding
```
and in `package.json`:
```json
"scripts": {
"develop:npx": "npx -p mrs-developer missdev --config=jsconfig.json --output=addons",
"develop": "missdev --config=jsconfig.json --output=addons",
"preinstall": "if [ -f $(pwd)/node_modules/.bin/missdev ]; then yarn develop; else yarn develop:npx; fi",
"postinstall": "yarn omelette",
...
}
```
Create a `mrs.developer.json` file:
```json
{
"volto-geocoding": {
"url": "[email protected]:collective/volto-geocoding.git"
}
}
```
In `jsconfig.json`:
```json
{
"compilerOptions": {
"paths": {
"volto-geocoding": ["addons/volto-geocoding"]
},
"baseUrl": "src"
}
}
```
Fix tests, in `package.json`:
```json
"jest": {
...
"moduleNameMapper": {
"@plone/volto/(.*)$": "/node_modules/@plone/volto/src/$1",
"@package/(.*)$": "/src/$1",
"volto-geocoding/(.*)$": "/src/addons/volto-geocoding/src/$1",
"~/(.*)$": "/src/$1"
},
"testMatch": [
"**/__tests__/**/*.[jt]s?(x)",
"**/?(*.)+(spec|test).[jt]s?(x)",
"!**/src/addons/volto/**/*"
],
...
```
Edit `.eslintrc`:
```json
{
"extends": "./node_modules/@plone/volto/.eslintrc",
"settings": {
"import/resolver": {
"alias": {
"map": [
["@plone/volto", "@plone/volto/src"],
["@package", "./src"],
["volto-geocoding", "./src/addons/volto-geocoding/src"]
],
"extensions": [".js", ".jsx", ".json"]
},
"babel-plugin-root-import": {
"rootPathSuffix": "src"
}
}
}
}
```
Add `src/addons` in `.gitignore`:
```
# .gitignore
src/addons
```
Then, run `yarn` and install dependencies:
```bash
yarn
```
## Usage
Once you've installed the addon, you have to configure it.
Due to `react-leaflet` dependency needs, you have to add in the `` its stylesheets, so:
```jsx
// in Html.jsx
...
```
Then, use the widget for the field you need:
```js
// config.js
import { GeoLocationWidget } from 'volto-geocoding';
export const widgets = {
...defaultWidgets,
id: {
...defaultWidgets.id,
geolocation: GeoLocationWidget,
},
};
```
### Map
This library exports not only `GeoLocationWidget` but also a component to render a map using OpenStreetMap: `OSMMap`.
You can find it in `src/components/OSMMap/OSMMap.jsx`.
It's a very simple map component accepting a point in coordinates (latitude, longitude) and an address (or description) to be shown within the popup.