PHPackages                             jonnitto/maps - 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. jonnitto/maps

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

jonnitto/maps
=============

Maps integration for Neos CMS. Stadiamaps, Protomaps, Openstreetmaps or GoogleMaps. Live preview. Multiple addresses.

0.4.0(2w ago)24.1k↑520%1GPL-3.0-or-laterJavaScript

Since Nov 8Pushed 2w ago1 watchersCompare

[ Source](https://github.com/jonnitto/Jonnitto.Maps)[ Packagist](https://packagist.org/packages/jonnitto/maps)[ Fund](https://www.paypal.me/Jonnitto/20eur)[ GitHub Sponsors](https://github.com/jonnitto)[ RSS](/packages/jonnitto-maps/feed)WikiDiscussions main Synced today

READMEChangelog (10)Dependencies (7)Versions (18)Used By (1)

Integration of Protomaps, Stadiamaps, OpenstreetMaps anf GoogleMaps into Neos
=============================================================================

[](#integration-of-protomaps-stadiamaps-openstreetmaps-anf-googlemaps-into-neos)

One package to rule them all. With this plugin you integrate one of these services into you Neos installation. This package relies primarily on the settings in [`Settings.yaml`](Configuration/Settings.yaml). Because of this, only one type of card can be used per installation. Every map can hold multiple marker, with configurable popup.

Javascript Event to initalize maps
----------------------------------

[](#javascript-event-to-initalize-maps)

If you dispatch an event with the name `jonnitto-maps:init`, the maps will be initalized. This is useful in when you work with AJAX request. The event listener is attached to the `window` object.

If you want, for example, use it togheter with [turbo](https://turbo.hotwired.dev)

```
document.addEventListener('turbo:load', ({ detail }) => {
  // It is not the first load
  if (detail.timing?.visitStart) {
    window.dispatchEvent(new Event('jonnitto-maps:init'));
  }
});
```

or with [Alpine AJAX](https://alpine-ajax.js.org):

```
window.addEventListener('ajax:success', () => {
  window.dispatchEvent(new Event('jonnitto-maps:init'));
});
```

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

[](#installation)

You will have to make adjustments to this package in your own Settings.yaml. Because of that, it is important to add the corresponding package to the composer from your theme package.

```
composer require jonnitto/maps --no-update
```

The --no-update command prevent the automatic update of the dependencies. After the package was added to your theme composer.json, go back to the root of the Neos installation and run composer update. Et voilà! Your desired package is now installed correctly.

What can be configured on the map
---------------------------------

[](#what-can-be-configured-on-the-map)

On a map element you could change the aspect ratio with `aspectRatio`. [Please use the official CSS syntax for that](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)

If you want to make it configurable, you can add your own property and let the user decide.

What can be altered on the address element
------------------------------------------

[](#what-can-be-altered-on-the-address-element)

Beside the given properties in the inspector, you can also alter `enableRouteLink`. This enables a link to google maps for routing. With `renderContentAfterAddress` (default `true`) you can choose if the text is shown before or after the address.

The main configuration
----------------------

[](#the-main-configuration)

If you read the [`Settings.yaml`](Configuration/Settings.yaml) carefully, you should understand how to configure the plugin.

```
Jonnitto:
  Maps:
    # Import the Javascript with type="module" or not
    # Modules are only supported by modern browsers
    useJavaScriptModules: true

    # Can be MapLibre or Leaflet. No effect for GoogleMaps
    mapLibrary: 'Leaflet'

    # Can be Stadiamaps, GoogleMaps, OpenStreetMap or Protomaps
    mapService: 'OpenStreetMap'

    aspectRatio: '16 / 9' # Please use the official CSS syntax: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

    pinColor: '#009fe3'

    # Enable a link to Google Maps for Routes
    enableRouteLink: false

    # Can be default/null (no effect), grayscale, dark, black or invert
    effect: null
    # If you want enable dynamic dark/light mode based on the media or class
    # You have to set effect to an object
    # effect:
    #   light: default
    #   dark: dark
    #   # media or class (class uses the CSS class 'dark' on the HTML element)
    #   basedOn: media

    GoogleMaps:
      # If you want to use Google Maps, you have to set the api key
      apiKey: null
      # If the user point between marker, the route gets shown
      enableDirections: false
      mapOptions:
        # zoomControl: true
        # mapTypeControl: true
        # scaleControl: true
        # streetViewControl: true
        # rotateControl: true
        # fullscreenControl: true
        zoom: 14
        # https://developers.google.com/maps/documentation/get-map-id
        mapId: null
        # https://developers.google.com/maps/documentation/javascript/maptypes
        mapTypeId: null

    MapLibre:
      setRTLTextPlugin: false
      mapOptions:
        scrollZoom: false
        zoom: 14

    Leaflet:
      mapOptions:
        scrollWheelZoom: false
        zoom: 14

    Protomaps:
      # To enable Protomaps, you have to set the url or the API Key
      apiKey: null
      url:
        Leaflet: 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key={{API_KEY}}'
        MapLibre: 'https://api.protomaps.com/tiles/v4.json?key={{API_KEY}}'
      glyphs: '/_Resources/Static/Packages/Jonnitto.Maps/Protomaps/Fonts/{fontstack}/{range}.pbf'
      # {{STYLE}} get replaced with the style setting
      sprite: '/_Resources/Static/Packages/Jonnitto.Maps/Protomaps/Sprites/{{STYLE}}'
      attribution: 'Protomaps © OpenStreetMap'

      # Can be light, dark, grayscale, white or black
      style: 'light'

      # If you want enable dynamic dark/light mode based on the media or class
      # You have to set style to an object
      # style:
      #   light: light
      #   dark: dark
      #   # media or class (class uses the CSS class 'dark' on the HTML element)
      #   basedOn: media

    # If you want a dark mode for openstreetmap, you can use the effect setting
    OpenStreetMap:
      maxZoom: 20
      attribution: '© OpenMapTiles © OpenStreetMap'
      style: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'

    Stadiamaps:
      attribution: '© Stadia Maps © OpenMapTiles © OpenStreetMap'
      maxZoom: 20
      styleTemplate:
        # {{STYLE}} get replaced with the style setting
        Leaflet: 'https://tiles.stadiamaps.com/tiles/{{STYLE}}/{z}/{x}/{y}{r}.png'
        MapLibre: 'https://tiles.stadiamaps.com/styles/{{STYLE}}.json'

      # Can be alidade_smooth, alidade_smooth_dark, osm_bright or outdoors
      style: 'osm_bright'
      # If you want enable dynamic dark/light mode based on the media or class
      # You have to set style to an object
      # style:
      #   light: alidade_smooth
      #   dark: alidade_smooth_dark
      #   # media or class (class uses the CSS class 'dark' on the HTML element)
      #   basedOn: media
```

###  Health Score

45

↑

FairBetter than 91% of packages

Maintenance96

Actively maintained with recent releases

Popularity24

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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 ~59 days

Recently: every ~130 days

Total

17

Last Release

18d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/5fec51ac160a110a31a72a54ac29e276a447d8306205a052d35491ac9cf0589b?d=identicon)[jonnitto](/maintainers/jonnitto)

---

Top Contributors

[![jonnitto](https://avatars.githubusercontent.com/u/4510166?v=4)](https://github.com/jonnitto "jonnitto (33 commits)")

---

Tags

googlemapsmapsneoscmsopenstreetmappluginprotomapsstadiamapsmapgooglemapsflowNeosopenstreetmapsStadiamapsprotomaps

### Embed Badge

![Health badge](/badges/jonnitto-maps/health.svg)

```
[![Health](https://phpackages.com/badges/jonnitto-maps/health.svg)](https://phpackages.com/packages/jonnitto-maps)
```

###  Alternatives

[techdivision/ckstyles

Neos package which enables you adding your custom style classes for the CkEditor with a simple Yaml configuration

21179.5k](/packages/techdivision-ckstyles)[shel/neos-colorpicker

A plugin for Neos CMS which provides a colorpicker editor

14104.7k6](/packages/shel-neos-colorpicker)[shel/neos-hyphens

A plugin for Neos CMS which provides hyphens for the inline editor

21214.3k1](/packages/shel-neos-hyphens)[moc/notfound

Neos CMS package that loads a normal editable page for displaying a 404 error

17170.4k](/packages/moc-notfound)[carbon/includeassets

Include your assets (css, js) in an easy way into Neos

14235.7k15](/packages/carbon-includeassets)

PHPackages © 2026

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