{"id":13568163,"url":"https://github.com/codesyntax/volto-maplibre-block","last_synced_at":"2026-01-29T13:49:36.544Z","repository":{"id":224784774,"uuid":"763691919","full_name":"codesyntax/volto-maplibre-block","owner":"codesyntax","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-05T19:36:35.000Z","size":6961,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-25T19:48:49.496Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codesyntax.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-26T18:47:50.000Z","updated_at":"2024-12-05T19:34:17.000Z","dependencies_parsed_at":"2024-11-25T10:17:08.645Z","dependency_job_id":"174bf7b8-c543-4abf-8710-bf022e452b57","html_url":"https://github.com/codesyntax/volto-maplibre-block","commit_stats":null,"previous_names":["codesyntax/volto-maplibre-block"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesyntax%2Fvolto-maplibre-block","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesyntax%2Fvolto-maplibre-block/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesyntax%2Fvolto-maplibre-block/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesyntax%2Fvolto-maplibre-block/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codesyntax","download_url":"https://codeload.github.com/codesyntax/volto-maplibre-block/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248497890,"owners_count":21113984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T14:00:20.984Z","updated_at":"2026-01-29T13:49:31.490Z","avatar_url":"https://github.com/codesyntax.png","language":"JavaScript","funding_links":[],"categories":["Add-ons"],"sub_categories":[],"readme":"# Volto Maplibre block (@codesyntax/volto-maplibre-block)\n\nA new add-on for Volto\n\n[![npm](https://img.shields.io/npm/v/@codesyntax/volto-maplibre-block)](https://www.npmjs.com/package/@codesyntax/volto-maplibre-block)\n[![](https://img.shields.io/badge/-Storybook-ff4785?logo=Storybook\u0026logoColor=white\u0026style=flat-square)](https://codesyntax.github.io/volto-maplibre-block/)\n[![Code analysis checks](https://github.com/codesyntax/volto-maplibre-block/actions/workflows/code.yml/badge.svg)](https://github.com/codesyntax/volto-maplibre-block/actions/workflows/code.yml)\n[![Unit tests](https://github.com/codesyntax/volto-maplibre-block/actions/workflows/unit.yml/badge.svg)](https://github.com/codesyntax/volto-maplibre-block/actions/workflows/unit.yml)\n\n## Introduction\n\nVolto block and component to render maps using the [maplibre](https://github.com/MapLibre/maplibre-gl-js) JS library, which is a fork of [Mapbox GL 1.x](https://github.com/mapbox/mapbox-gl-js).\n\nTo do so we use the [react-map-gl](https://visgl.github.io/react-map-gl/docs) library, which supports both maplibre and [Mapblox GL](https://github.com/mapbox/mapbox-gl-js)\n\nI have heavily based this block on [volto-leaflet-block](https://github.com/adeweb-be/volto-leaflet-block).\n\nThe point is that Leaflet has several issues with SSR and it is not ready to work on SSR and will not be ready to do so. So instead of doing ugly hacks, I have decided to create my own map block.\n\n## Features\n\n- A generic Map component, that can be used in your Volto developments.\n\n- A Map block, that allows some basic configuration (used tiles, map center, zoom, and a list of markers (title, link and icon))\n\n## Customization\n\nYou can add extra map layers, or remove existing ones, tweaking the `tileLayers` property of the block:\n\n```js\nconst applyConfig = (config) =\u003e {\n  // Own blocks\n  config.blocks.blocksConfig['mapLibreBlock']['tileLayers'] = [\n      {\n        id: 'osm',\n        name: 'OpenStreetMap',\n        type: 'raster',\n        urls: [\n          'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',\n          'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',\n          'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',\n        ],\n        tileSize: 256,\n        attribution:\n          '\u0026copy; OpenStreetMap Contributors | Kartendarstellung \u0026copy; OpenTopoMap (CC-BY-SA)',\n        maxzoom: 19,\n      },\n    ]\n\n\n  return config;\n};\n\n```\n\n## Installation\n\nTo install your project, you must choose the method appropriate to your version of Volto.\n\n\n### Volto 17 and earlier\n\nCreate a new Volto project (you can skip this step if you already have one):\n\n```\nnpm install -g yo @plone/generator-volto\nyo @plone/volto my-volto-project --addon @codesyntax/volto-maplibre-block\ncd my-volto-project\n```\n\nAdd `@codesyntax/volto-maplibre-block` to your package.json:\n\n```JSON\n\"addons\": [\n    \"@codesyntax/volto-maplibre-block\"\n],\n\n\"dependencies\": {\n    \"@codesyntax/volto-maplibre-block\": \"*\"\n}\n```\n\nDownload and install the new add-on by running:\n\n```\nyarn install\n```\n\nStart volto with:\n\n```\nyarn start\n```\n\n### Volto 18 and later\n\nAdd `@codesyntax/volto-maplibre-block` to your `package.json`:\n\n```json\n\"dependencies\": {\n    \"@codesyntax/volto-maplibre-block\": \"*\"\n}\n```\n\nAdd `@codesyntax/volto-maplibre-block` to your `volto.config.js`:\n\n```javascript\nconst addons = ['@codesyntax/volto-maplibre-block'];\n```\n\nIf this package provides a Volto theme, and you want to activate it, then add the following to your `volto.config.js`:\n\n```javascript\nconst theme = '@codesyntax/volto-maplibre-block';\n```\n\n## Test installation\n\nVisit http://localhost:3000/ in a browser, login, and check the awesome new features.\n\n\n## Development\n\nThe development of this add-on is done in isolation using a new approach using pnpm workspaces and latest `mrs-developer` and other Volto core improvements.\nFor this reason, it only works with pnpm and Volto 18 (currently in alpha).\n\n\n### Pre-requisites\n\n-   [Node.js](https://6.docs.plone.org/install/create-project.html#node-js)\n-   [Make](https://6.docs.plone.org/install/create-project.html#make)\n-   [Docker](https://6.docs.plone.org/install/create-project.html#docker)\n\n\n### Make convenience commands\n\nRun `make help` to list the available commands.\n\n```text\nhelp                             Show this help\ninstall                          Installs the add-on in a development environment\nstart                            Starts Volto, allowing reloading of the add-on during development\nbuild                            Build a production bundle for distribution of the project with the add-on\ni18n                             Sync i18n\nci-i18n                          Check if i18n is not synced\nformat                           Format codebase\nlint                             Lint, or catch and remove problems, in code base\nrelease                          Release the add-on on npmjs.org\nrelease-dry-run                  Dry-run the release of the add-on on npmjs.org\ntest                             Run unit tests\nci-test                          Run unit tests in CI\nbackend-docker-start             Starts a Docker-based backend for development\nstorybook-start                  Start Storybook server on port 6006\nstorybook-build                  Build Storybook\nacceptance-frontend-dev-start    Start acceptance frontend in development mode\nacceptance-frontend-prod-start   Start acceptance frontend in production mode\nacceptance-backend-start         Start backend acceptance server\nci-acceptance-backend-start      Start backend acceptance server in headless mode for CI\nacceptance-test                  Start Cypress in interactive mode\nci-acceptance-test               Run cypress tests in headless mode for CI\n```\n\n### Development environment set up\n\nInstall package requirements.\n\n```shell\nmake install\n```\n\n### Start developing\n\nStart the backend.\n\n```shell\nmake backend-docker-start\n```\n\nIn a separate terminal session, start the frontend.\n\n```shell\nmake start\n```\n\n### Lint code\n\nRun ESlint, Prettier, and Stylelint in analyze mode.\n\n```shell\nmake lint\n```\n\n### Format code\n\nRun ESlint, Prettier, and Stylelint in fix mode.\n\n```shell\nmake format\n```\n\n### i18n\n\nExtract the i18n messages to locales.\n\n```shell\nmake i18n\n```\n\n### Unit tests\n\nRun unit tests.\n\n```shell\nmake test\n```\n\n### Run Cypress tests\n\nRun each of these steps in separate terminal sessions.\n\nIn the first session, start the frontend in development mode.\n\n```shell\nmake acceptance-frontend-dev-start\n```\n\nIn the second session, start the backend acceptance server.\n\n```shell\nmake acceptance-backend-start\n```\n\nIn the third session, start the Cypress interactive test runner.\n\n```shell\nmake acceptance-test\n```\n\n## License\n\nThe project is licensed under the MIT license.\n\n## Credits and Acknowledgements 🙏\n\nCrafted with care by **Generated using [Cookieplone (0.7.1)](https://github.com/plone/cookieplone) and [cookiecutter-plone (92fee80)](https://github.com/plone/cookiecutter-plone/commit/92fee80e8c83fceacc79c729e5dddbe3ffaa502e) on 2024-11-13 19:09:33.938156**. A special thanks to all contributors and supporters!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodesyntax%2Fvolto-maplibre-block","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodesyntax%2Fvolto-maplibre-block","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodesyntax%2Fvolto-maplibre-block/lists"}