README

将 Protomaps、Stadiamaps、OpenstreetMaps 和 GoogleMaps 集成到 Neos

一个包统治一切。使用此插件，您可以将这些服务之一集成到您的 Neos 安装中。此包主要依赖于 Settings.yaml 中的设置。因此，每个安装只能使用一种类型的卡片。每个地图可以包含多个标记，带有可配置的弹出窗口。

初始化地图的 JavaScript 事件

如果您发送一个名为 jonnitto-maps:init 的事件，地图将被初始化。这在处理 AJAX 请求时非常有用。事件监听器附加到 window 对象。

例如，如果您想与 turbo 一起使用

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

或与 Alpine AJAX 一起使用

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

安装

您需要在自己的 Settings.yaml 中对此包进行调整。因此，将相应的包添加到主题包的 composer 是很重要的。

composer require jonnitto/maps --no-update

使用 --no-update 命令可以防止依赖项自动更新。将包添加到您的主题 composer.json 后，返回 Neos 安装根目录并运行 composer update。搞定！现在包已正确安装。

地图上可以配置的内容

您可以使用 aspectRatio 改变地图元素的宽高比。请使用官方 CSS 语法进行操作。

如果您想使其可配置，可以添加自己的属性并让用户决定。

地址元素上可以更改的内容

除了检查器中给出的属性外，您还可以更改 enableRouteLink。这启用了到 Google Maps 的路由链接。通过 renderContentAfterAddress（默认为 true）您可以选择文本是在地址之前还是之后显示。

主要配置

如果您仔细阅读了 Settings.yaml，您应该能够理解如何配置插件。

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://mdn.org.cn/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
      url:
        Leaflet: null # example: 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=YOUR_API_KEY'
        MapLibre: null # example 'https://api.protomaps.com/tiles/v3.json?key=YOUR_API_KEY'
      glyphs: 'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf'
      attribution: '<a href="https://github.com/protomaps/basemaps" target="_blank" rel="noopener noreferrer nofollow">Protomaps</a> © <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer nofollow">OpenStreetMap</a>'

      # 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: '© <a href="https://openmaptiles.org/" target="_blank" rel="noopener noreferrer nofollow">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer nofollow">OpenStreetMap</a>'
      style: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'

    Stadiamaps:
      attribution: '© <a href="https://stadiamaps.com/" target="_blank" rel="noopener noreferrer nofollow">Stadia Maps</a> © <a href="https://openmaptiles.org/" target="_blank" rel="noopener noreferrer nofollow">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer nofollow">OpenStreetMap</a>'
      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

jonnitto / maps

维护者

详细信息