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.3.6(7mo ago)23.3k↓50%1GPL-3.0-or-laterJavaScript

Since Nov 8Pushed 7mo 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 1mo ago

READMEChangelog (10)Dependencies (3)Versions (17)Used By (1)

[![Latest stable version](https://camo.githubusercontent.com/2b5c39a25ba6d0d06e97cbc52ce0b06b937d583ad386256b2147394c91af27b8/68747470733a2f2f706f7365722e707567782e6f72672f6a6f6e6e6974746f2f6d6170732f762f737461626c65)](https://packagist.org/packages/jonnitto/maps) [![Total downloads](https://camo.githubusercontent.com/9f2c127e66623e05246b314e895d2ff355b88027e943f04872bbeb2ae7f5714e/68747470733a2f2f706f7365722e707567782e6f72672f6a6f6e6e6974746f2f6d6170732f646f776e6c6f616473)](https://packagist.org/packages/jonnitto/maps) [![License](https://camo.githubusercontent.com/2a50405d4992583973b4e0a18f8e290518f9244412c1fc44053fe3cdde56e152/68747470733a2f2f706f7365722e707567782e6f72672f6a6f6e6e6974746f2f6d6170732f6c6963656e7365)](https://packagist.org/packages/jonnitto/maps) [![GitHub forks](https://camo.githubusercontent.com/214317ee7a5331a442ab8ad713afbe5c0b721831fbba2a38ac47dbf518aaf7f5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f4a6f6e6e6974746f2f4a6f6e6e6974746f2e4d6170732e7376673f7374796c653d736f6369616c266c6162656c3d466f726b)](https://github.com/Jonnitto/Jonnitto.Maps/fork) [![GitHub stars](https://camo.githubusercontent.com/5f6996295007d9f6e6a9585bade924b3d6905c08e0b69ec248cfcd72a375e3ab/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f4a6f6e6e6974746f2f4a6f6e6e6974746f2e4d6170732e7376673f7374796c653d736f6369616c266c6162656c3d5374617273)](https://github.com/Jonnitto/Jonnitto.Maps/stargazers) [![GitHub watchers](https://camo.githubusercontent.com/8ba35a5a39781d7e8a1e58df9170a5c67e45a9e3bbda6f658cd7923ea301109e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f77617463686572732f4a6f6e6e6974746f2f4a6f6e6e6974746f2e4d6170732e7376673f7374796c653d736f6369616c266c6162656c3d5761746368)](https://github.com/Jonnitto/Jonnitto.Maps/subscription)

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

37

—

LowBetter than 83% of packages

Maintenance64

Regular maintenance activity

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 ~46 days

Recently: every ~83 days

Total

16

Last Release

221d 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 (30 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

[shel/neos-hyphens

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

20200.7k1](/packages/shel-neos-hyphens)[techdivision/ckstyles

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

21166.3k](/packages/techdivision-ckstyles)[moc/notfound

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

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

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

14228.6k10](/packages/carbon-includeassets)[shel/neos-colorpicker

A plugin for Neos CMS which provides a colorpicker editor

1494.4k6](/packages/shel-neos-colorpicker)[moc/synchronizeurl

Neos CMS package that keep page titles and URLs in sync by updating the URL every time the title changes

106.3k](/packages/moc-synchronizeurl)

PHPackages © 2026

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