Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add a configurable list of layers in the block configuration form #2

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 24 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ This package adds a new map block based on [Leaflet](https://github.com/Leaflet/
- Add some markers on the map

## Profiles
In your `package.json` file:
In your `package.json` file:
### Minimal
```JSON
"addons": [
Expand All @@ -30,21 +30,40 @@ This will install the minimum config for this addon.
```
This will install the minimum config + some preset markers.

## Custom tiles

The block provides several base tile layers and offers a dropdown to select one to be used in your map.

Moreover, the list of available base tile layers can be configured by the integrator, modifying the corresponding
configuration setting in your Volto project:

```JSON
config.blocksConfig.leafletMap.tileLayers = [
{
id: 'some-unique-id',
name: 'Name to be shown in the drop down',
url: 'https://url.of.the.tile.layer.service/{z}/{x}/{y}.png',
attribution: 'Attribution string'
}
]


```

## 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](https://github.com/PaulLeCam/react-leaflet)
Currently, react-leaflet v3.x doesn't support Webpack v4, so we depend on [@monsonjeremy/react-leaflet](https://www.npmjs.com/package/@monsonjeremy/react-leaflet)
which is compatible with Webpack v4.

Currently, react-leaflet v3.x doesn't support Webpack v4, so we depend on [@monsonjeremy/react-leaflet](https://www.npmjs.com/package/@monsonjeremy/react-leaflet)
which is compatible with Webpack v4.

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

Expand Down
14 changes: 11 additions & 3 deletions src/Blocks/LeafletMap/Map.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Map = (props) => {
const { data } = props;
const center = [parseFloat(data.latitude), parseFloat(data.longitude)];
const zoom = parseInt(data.zoom);
const blockConfig = config.blocks.blocksConfig.leafletMap
const blockConfig = config.blocks.blocksConfig.leafletMap;

const MapControl = React.memo(({ center, zoom }) => {
const map = useMap();
Expand All @@ -21,13 +21,21 @@ const Map = (props) => {
return null;
});

const selectedLayer = blockConfig.tileLayers.filter(
(item) => item.id === data.tilesLayer,
)[0];

return (
<div className="leaflet-wrapper" style={{ height: data.height }}>
<MapContainer center={center} zoom={zoom} style={{ height: '100%' }}>
<MapControl center={center} zoom={zoom} />
<TileLayer
url={blockConfig.tilesLayerUrl}
attribution={blockConfig.tilesLayerAttribution}
url={selectedLayer ? selectedLayer.url : blockConfig.tilesLayerUrl}
attribution={
selectedLayer
? selectedLayer.attribution
: blockConfig.tilesLayerAttribution
}
/>
{data.markers?.map((marker) => (
<Marker key={marker['@id']} marker={marker} />
Expand Down
13 changes: 12 additions & 1 deletion src/Blocks/LeafletMap/schema.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { defineMessages } from 'react-intl';
import config from '@plone/volto/registry';

export const ILeafletMarkerSchema = (intl) => ({
title: intl.formatMessage(messages.marker),
Expand Down Expand Up @@ -38,7 +39,7 @@ export const ILeafletMapSchema = (intl) => ({
{
id: 'default',
title: 'Default',
fields: ['latitude', 'longitude', 'zoom'],
fields: ['latitude', 'longitude', 'zoom', 'tilesLayer'],
},
{
id: 'content',
Expand Down Expand Up @@ -74,6 +75,12 @@ export const ILeafletMapSchema = (intl) => ({
maximum: 18,
minimum: 0,
},
tilesLayer: {
title: intl.formatMessage(messages.tilesLayer),
choices: config.blocks.blocksConfig.leafletMap.tileLayers.map((item) => {
return [item.id, item.name];
}),
},
height: {
title: intl.formatMessage(messages.height),
initialValue: '500px',
Expand Down Expand Up @@ -132,4 +139,8 @@ const messages = defineMessages({
id: 'Style',
defaultMessage: 'Style',
},
tilesLayer: {
id: 'Tiles Layer',
defaultMessage: 'Tiles layer',
},
});
37 changes: 34 additions & 3 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,39 @@ const leafletMapConfig = {
iconAnchor: [20, 40],
},
},
tilesLayerUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
tilesLayerAttribution: "&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors"
tilesLayerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
tilesLayerAttribution:
'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
tileLayers: [
{
id: 'osm',
name: 'OpenStreetMap',
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution:
'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
},
{
id: 'osmfr',
name: 'OpenStreetMap-Fr',
url: 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
attribution:
'map data \u00a9 <a href="http://osm.org/copyright">OpenStreetMap</a> contributors under ODbL ',
},
{
id: 'osmde',
name: 'OpenStreetMap-De',
url: 'https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
attribution:
'map data \u00a9 <a href="http://osm.org/copyright">OpenStreetMap</a> contributors under ODbL ',
},
{
id: 'opentopomap',
name: 'OSM OpenTopoMap',
url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
attribution:
'Kartendaten: \u00a9 <a href="http://osm.org/copyright">OpenStreetMap</a> Mitwirkende, <a href="http://viewfinderpanoramas.org/">SRTM</a> | map style: \u00a9 <a href=""https://opentopomap.org/">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
},
],
};

export function minimal(config) {
Expand All @@ -88,4 +119,4 @@ export default function baseInstall(config) {
};

return config;
}
}