Volto Leaflet Block

Overview

This package adds a new map block based on Leaflet and React Leaflet.

Features

• Display a Leaflet map as a block
• Set the map default center (based on latitude and longitude) and zoom
• Add some markers on the map

Profiles

In your package.json file:

Minimal

"addons": [
"@adeweb-be/volto-leaflet-block:minimal"
],

This will install the minimum config for this addon.

Base

"addons": [
"@adeweb-be/volto-leaflet-block"
],

This will install the minimum config + some preset markers.

Roadmap

• Add Cypress tests
• Better coordinates widget (it's a bit clunky for now)
• Change map tiles source on the edit view
• More preset icons
• Better icon select widget (it's fine for a few icons but if you have hundred of them it's a mess)
• Draw path on the map (maybe, it seems difficult)

Known issues

Improper dependency for React Leaflet

Currently, react-leaflet v3.x doesn't support Webpack v4, so we depend on @monsonjeremy/react-leaflet which is compatible with Webpack v4.

See here : https://github.com/PaulLeCam/react-leaflet/pull/885

When this gets merged (hopefully) we'll use the correct package.

Translations

This addon has been translated into

• English
• French

Install

If you already have a Volto project, just update package.json:

"addons": [
    "@adeweb-be/volto-leaflet-block"
],

"dependencies": {
    "@adeweb-be/volto-leaflet-block": "*"
}

Install new add-on and restart Volto:

yarn install
yarn start

Go to http://localhost:3000

Demo

https://user-images.githubusercontent.com/9050997/131229005-6a6fab3f-5ce9-4e0a-8ebd-a1a6b054aa19.mp4