From 158ebd2a58239ff033f59003a08d51fbf0c019c2 Mon Sep 17 00:00:00 2001 From: Mikel Larreategi Date: Sun, 2 Apr 2023 12:48:20 +0200 Subject: [PATCH] add a configurable list of layers in the block configuration form --- README.md | 29 +++++++++++++++++++++----- src/Blocks/LeafletMap/Map.jsx | 14 ++++++++++--- src/Blocks/LeafletMap/schema.js | 13 +++++++++++- src/index.js | 37 ++++++++++++++++++++++++++++++--- 4 files changed, 81 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index bf66d54..b33e213 100644 --- a/README.md +++ b/README.md @@ -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": [ @@ -30,11 +30,30 @@ 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) @@ -42,9 +61,9 @@ This will install the minimum config + some preset markers. ## 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 diff --git a/src/Blocks/LeafletMap/Map.jsx b/src/Blocks/LeafletMap/Map.jsx index 50a49ea..08d9a95 100644 --- a/src/Blocks/LeafletMap/Map.jsx +++ b/src/Blocks/LeafletMap/Map.jsx @@ -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(); @@ -21,13 +21,21 @@ const Map = (props) => { return null; }); + const selectedLayer = blockConfig.tileLayers.filter( + (item) => item.id === data.tilesLayer, + )[0]; + return (
{data.markers?.map((marker) => ( diff --git a/src/Blocks/LeafletMap/schema.js b/src/Blocks/LeafletMap/schema.js index 485dcd7..c0e2ad3 100644 --- a/src/Blocks/LeafletMap/schema.js +++ b/src/Blocks/LeafletMap/schema.js @@ -1,4 +1,5 @@ import { defineMessages } from 'react-intl'; +import config from '@plone/volto/registry'; export const ILeafletMarkerSchema = (intl) => ({ title: intl.formatMessage(messages.marker), @@ -38,7 +39,7 @@ export const ILeafletMapSchema = (intl) => ({ { id: 'default', title: 'Default', - fields: ['latitude', 'longitude', 'zoom'], + fields: ['latitude', 'longitude', 'zoom', 'tilesLayer'], }, { id: 'content', @@ -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', @@ -132,4 +139,8 @@ const messages = defineMessages({ id: 'Style', defaultMessage: 'Style', }, + tilesLayer: { + id: 'Tiles Layer', + defaultMessage: 'Tiles layer', + }, }); diff --git a/src/index.js b/src/index.js index acb86b8..7c7273f 100644 --- a/src/index.js +++ b/src/index.js @@ -65,8 +65,39 @@ const leafletMapConfig = { iconAnchor: [20, 40], }, }, - tilesLayerUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", - tilesLayerAttribution: "© OpenStreetMap contributors" + tilesLayerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + tilesLayerAttribution: + '© OpenStreetMap contributors', + tileLayers: [ + { + id: 'osm', + name: 'OpenStreetMap', + url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + attribution: + '© OpenStreetMap contributors', + }, + { + id: 'osmfr', + name: 'OpenStreetMap-Fr', + url: 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', + attribution: + 'map data \u00a9 OpenStreetMap contributors under ODbL ', + }, + { + id: 'osmde', + name: 'OpenStreetMap-De', + url: 'https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', + attribution: + 'map data \u00a9 OpenStreetMap contributors under ODbL ', + }, + { + id: 'opentopomap', + name: 'OSM OpenTopoMap', + url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', + attribution: + 'Kartendaten: \u00a9 OpenStreetMap Mitwirkende, SRTM | map style: \u00a9 OpenTopoMap (CC-BY-SA)', + }, + ], }; export function minimal(config) { @@ -88,4 +119,4 @@ export default function baseInstall(config) { }; return config; -} \ No newline at end of file +}