A widget for 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 for further usage informations.
voltocliand insert volto-geocoding as addon name and git@github.com:collective/volto-geocoding.git as addon URL.
In your Volto project:
yarn add mrs-developer collective/volto-geocodingand in package.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:
{
"volto-geocoding": {
"url": "git@github.com:collective/volto-geocoding.git"
}
}In jsconfig.json:
{
"compilerOptions": {
"paths": {
"volto-geocoding": ["addons/volto-geocoding"]
},
"baseUrl": "src"
}
}Fix tests, in package.json:
"jest": {
...
"moduleNameMapper": {
"@plone/volto/(.*)$": "<rootDir>/node_modules/@plone/volto/src/$1",
"@package/(.*)$": "<rootDir>/src/$1",
"volto-geocoding/(.*)$": "<rootDir>/src/addons/volto-geocoding/src/$1",
"~/(.*)$": "<rootDir>/src/$1"
},
"testMatch": [
"**/__tests__/**/*.[jt]s?(x)",
"**/?(*.)+(spec|test).[jt]s?(x)",
"!**/src/addons/volto/**/*"
],
...Edit .eslintrc:
{
"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:
yarnOnce you've installed the addon, you have to configure it.
Due to react-leaflet dependency needs, you have to add in the <head> its stylesheets, so:
// in Html.jsx
<head>
...
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossOrigin=""
/>
</head>Then, use the widget for the field you need:
// config.js
import { GeoLocationWidget } from 'volto-geocoding';
export const widgets = {
...defaultWidgets,
id: {
...defaultWidgets.id,
geolocation: GeoLocationWidget,
},
};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.