PHPackages                             acato/openkaarten-frontend-plugin - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. acato/openkaarten-frontend-plugin

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

acato/openkaarten-frontend-plugin
=================================

Adds OpenKaarten Blocks with an Openstreetmap block to the Gutenberg editor.

0.3.4(1mo ago)1383[2 issues](https://github.com/OpenWebconcept/plugin-openkaarten-frontend-plugin/issues)[2 PRs](https://github.com/OpenWebconcept/plugin-openkaarten-frontend-plugin/pulls)Vue

Since Sep 13Pushed 1mo ago3 watchersCompare

[ Source](https://github.com/OpenWebconcept/plugin-openkaarten-frontend-plugin)[ Packagist](https://packagist.org/packages/acato/openkaarten-frontend-plugin)[ RSS](/packages/acato-openkaarten-frontend-plugin/feed)WikiDiscussions main Synced 3w ago

READMEChangelog (6)Dependencies (12)Versions (31)Used By (0)

OpenKaarten Frontend Plugin
===========================

[](#openkaarten-frontend-plugin)

This plugin adds a Gutenberg block to WordPress which can be used to show a map with locations of datalayers, from the OpenKaarten Base plugin.

Requirements
------------

[](#requirements)

### OpenKaarten Frontend

[](#openkaarten-frontend)

In order to make the OpenKaarten Frontend Plugin work, you will need to have a WordPress installation with at least the following installed (and activated):

- [WordPress](https://wordpress.org/)

On this WordPress installation you will have to enable pretty permalinks (Settings > Permalinks > Select any of the options that is not plain).

There are two possible setups for the OpenKaarten Frontend, this can be:

1. On the WordPress installation of an existing website.
2. On a completely new WordPress installation.

In all scenarios the OpenKaarten Frontend plugin needs to have the following installed (and activated):

- [WordPress](https://wordpress.org/)
- [OpenKaarten Frontend](https://github.com/OpenWebconcept/plugin-openkaarten-frontend-plugin)

With this installed you can use the OpenKaarten Frontend plugin in your WordPress website.

If you chose for option 2 (new WordPress installation), you will probably need to install a WordPress theme. Since the OpenKaarten plugin is a REST API, it can be used in any WordPress theme.

Works best with
---------------

[](#works-best-with)

The OpenKaarten Frontend plugin works best with the following plugins, which can be installed on a different WordPress installation:

- [OpenKaarten Base](https://github.com/openwebconcept/plugin-openkaarten-base): This plugin adds Datalayers and Locations to WordPress which can be retrieved via the OpenKaarten REST API.
- [OpenKaarten GeoData](https://github.com/OpenWebconcept/plugin-openkaarten-geodata-for-posts): This plugin adds GeoData fields to the OpenPub Items post type and creates a REST endpoint to retrieve OpenPub Items with geodata.

Installation
------------

[](#installation)

### Manual installation

[](#manual-installation)

You can download the latest release from the [releases page](https://github.com/OpenWebconcept/plugin-openkaarten-frontend-plugin) and install it manually in your WordPress installation.

### Composer installation

[](#composer-installation)

1. `composer source git@github.com:OpenWebconcept/plugin-openkaarten-frontend-plugin.git`
2. `composer require acato/openkaarten-frontend-plugin`
3. `cd /wp-content/plugins/openkaarten-frontend-plugin`
4. `npm install && npm run build`
5. Activate the OpenKaarten Frontend Plugin through the 'Plugins' menu in WordPress.

Usage
-----

[](#usage)

### Add a Gutenberg blok to show a map with locations

[](#add-a-gutenberg-blok-to-show-a-map-with-locations)

In the WordPress admin panel, go to the page or post where you want to show the map with locations. Add a new block and search for the 'OWC Openmaps Openstreet Map' block. Add this block to the page or post, add a URL where the OpenKaarten Base plugin is installed and select the datalayer(s) you want to show on the map.

Development
-----------

[](#development)

### Coding Standards

[](#coding-standards)

Please remember, we use the WordPress PHP Coding Standards for this plugin! () To check if your changes are compatible with these standards:

- `cd /wp-content/plugins/openkaarten-frontend`
- `composer install` (this step is only needed once after installing the plugin)
- `./vendor/bin/phpcs --standard=phpcs.xml.dist .`
- See the output if you have made any errors.
    - Errors marked with `[x]` can be fixed automatically by phpcbf, to do so run: `./vendor/bin/phpcbf --standard=phpcs.xml.dist .`

N.B. the `composer install` command will also install a git hook, preventing you from committing code that isn't compatible with the coding standards.

### NPM

[](#npm)

The plugin uses NPM for managing the JavaScript dependencies and building the leaflet map for showing locations within a datalayer. To install the dependencies, run the following command:

```
npm install

```

To deploy the JavaScript files, run the following command:

```
npm run build

```

To watch the JavaScript files for changes, run the following command:

```
npm run watch

```

Extending
---------

[](#extending)

The Openkaarten block exposes a small global API for interacting with the Leaflet map from outside the Vue component. It assumes there is only one Openkaarten map instance on the page.

```
window.openkaarten.map
window.openkaarten.addMarker(options)
window.openkaarten.clearLayer(layerName?)
```

### Accessing the Leaflet Instance

[](#accessing-the-leaflet-instance)

```
const map = window.openkaarten.map;
```

### Adding a Marker

[](#adding-a-marker)

```
window.addEventListener('openkaarten:map-ready', () => {
    window.openkaarten.addMarker({
        lat: 52.0907, // Required
        lng: 5.1214, // Required
        popup: 'Hallo vanuit Utrecht!',
        markerOptions: {}, // Leaflet marker options
        layer: 'external', // Optional layer name
        flyTo: true,
        flyToOptions: { // Leaflet flyTo options
            zoom: 17,
            duration: 2,
        },
        onAdd: (marker, map) => {
            // Do something with the marker or map after it's added
        },
    });
});
```

### Removing Markers

[](#removing-markers)

Removes markers from a specific layer, or from the default layer if no name is provided:

```
window.openkaarten.clearLayer('external');
```

###  Health Score

38

—

LowBetter than 83% of packages

Maintenance73

Regular maintenance activity

Popularity19

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity40

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 69.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~44 days

Recently: every ~9 days

Total

13

Last Release

35d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/29a7a5e8edb1a0cd4de5b52557f5eff0d42c27187542cc7b2c331e84e56315c3?d=identicon)[acato](/maintainers/acato)

---

Top Contributors

[![merelacato](https://avatars.githubusercontent.com/u/107254793?v=4)](https://github.com/merelacato "merelacato (192 commits)")[![markacato](https://avatars.githubusercontent.com/u/128050096?v=4)](https://github.com/markacato "markacato (30 commits)")[![eyalacato](https://avatars.githubusercontent.com/u/156068891?v=4)](https://github.com/eyalacato "eyalacato (25 commits)")[![dtakken](https://avatars.githubusercontent.com/u/2066447?v=4)](https://github.com/dtakken "dtakken (9 commits)")[![rmpel](https://avatars.githubusercontent.com/u/1086776?v=4)](https://github.com/rmpel "rmpel (8 commits)")[![richardkorthuis](https://avatars.githubusercontent.com/u/73702842?v=4)](https://github.com/richardkorthuis "richardkorthuis (6 commits)")[![YvetteNikolov](https://avatars.githubusercontent.com/u/48315669?v=4)](https://github.com/YvetteNikolov "YvetteNikolov (5 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")

### Embed Badge

![Health badge](/badges/acato-openkaarten-frontend-plugin/health.svg)

```
[![Health](https://phpackages.com/badges/acato-openkaarten-frontend-plugin/health.svg)](https://phpackages.com/packages/acato-openkaarten-frontend-plugin)
```

###  Alternatives

[helsingborg-stad/municipio

A bootstrap theme for creating municipality sites.

4028.3k10](/packages/helsingborg-stad-municipio)[mautic/core

Mautic Open Source Distribution

9.8k2.6k9](/packages/mautic-core)[mediawiki/maps

Adds various mapping features to MediaWiki

78149.7k3](/packages/mediawiki-maps)[rainlab/blog-plugin

Blog plugin for October CMS

17158.6k](/packages/rainlab-blog-plugin)[civicrm/civicrm-drupal-8

Open source constituent relationship management for non-profits, NGOs and advocacy organizations.

19246.3k2](/packages/civicrm-civicrm-drupal-8)[starcitizentools/citizen-skin

A beautiful, usable, responsive MediaWiki skin with in-depth extension support. Originally developed for the Star Citizen Wiki.

3355.8k](/packages/starcitizentools-citizen-skin)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)