npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@codesyntax/volto-maplibre-block

v1.3.0

Published

volto-maplibre-block: Volto add-on to use maplibre mapping library in Volto

Downloads

91

Readme

volto-maplibre-block

Introduction

Volto block and component to render maps using the maplibre JS library, which is a fork of Mapbox GL 1.x.

To do so we use the react-map-gl library, which supports both maplibre and Mapblox GL

I have heavily based this block on volto-leaflet-block.

The 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.

Features

  • A generic Map component, that can be used in your Volto developments.

  • A Map block, that allows some basic configuration (used tiles, map center, zoom, and a list of markers (title, link and icon))

Installation

Add this package to your project's or addon's dependencies::

  "dependencies": {
    "@codesyntax/volto-maplibre-block": "*"
  },

Customization

You can add extra map layers, or remove existing ones, tweaking the tileLayers property of the block:

const applyConfig = (config) => {
  // Own blocks
  config.blocks.blocksConfig['mapLibreBlock']['tileLayers'] = [
      {
        id: 'osm',
        name: 'OpenStreetMap',
        type: 'raster',
        urls: [
          'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
          'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
          'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
        ],
        tileSize: 256,
        attribution:
          '© OpenStreetMap Contributors | Kartendarstellung © OpenTopoMap (CC-BY-SA)',
        maxzoom: 19,
      },
    ]


  return config;
};

Development

You can develop an add-on in isolation using the boilerplate already provided by the add-on generator. The project is configured to have the current add-on installed and ready to work with. This is useful to bootstrap an isolated environment that can be used to quickly develop the add-on or for demo purposes. It's also useful when testing an add-on in a CI environment.

It's quite similar when you develop a Plone backend add-on in the Python side, and embed a ready to use Plone build (using buildout or pip) in order to develop and test the package.

The dockerized approach performs all these actions in a custom built docker environment:

  1. Generates a vanilla project using the official Volto Yo Generator (@plone/generator-volto)
  2. Configures it to use the add-on with the name stated in the package.json
  3. Links the root of the add-on inside the created project

After that you can use the inner dockerized project, and run any standard Volto command for linting, acceptance test or unit tests using Makefile commands provided for your convenience.

Setup the environment

Run once

make dev

which will build and launch the backend and frontend containers. There's no need to build them again after doing it the first time unless something has changed from the container setup.

In order to make the local IDE play well with this setup, is it required to run once yarn to install locally the required packages (ESlint, Prettier, Stylelint).

Run

yarn

Build the containers manually

Run

make build-backend
make build-addon

Run the containers

Run

make start-dev

This will start both the frontend and backend containers.

Stop Backend (Docker)

After developing, in order to stop the running backend, don't forget to run:

Run

make stop-backend

Linting

Run

make lint

Formatting

Run

make format

i18n

Run

make i18n

Unit tests

Run

make test

Acceptance tests

Run once

make install-acceptance

For starting the servers

Run

make start-test-acceptance-server

The frontend is run in dev mode, so development while writing tests is possible.

Run

make test-acceptance

To run Cypress tests afterwards.

When finished, don't forget to shutdown the backend server.

make stop-test-acceptance-server

Release

Run

make release

For releasing a RC version

Run

make release-rc