README

Introduction

A small but modern OpenStreetMap extension for TYPO3 (11 and newer). You can simply show a map with or without markers. One or more addresses can be added as human-readable address or with geo coordinates.

A second plugin allows you to show addresses from tt_address records (when tt_address.latitude and .longitude is filled).

No jQuery, just vanilla JS. Modern asset collector used for includes of JS or CSS. PSR-14 eventdispatcher can be used to manipulate markers and labels.

⚠️ TYPO3 13 compatibility
See EAP page (DE) or EAP page (EN) for more information how to get access to a TYPO3 12 version

Plugin 1

Plugin 2

Note Ensure that fields tt_address.name, tt_address.description, tt_address.latitude and tt_address.longitude is filled correctly

Installation

Add this extension via composer (TYPO3 in classic mode could work but is not supported):

composer require in2code/osm

Don't forget to add typeNum 1597149189 for AJAX requests for the markers to your siteconfiguration like:

...
routeEnhancers:
  PageTypeSuffix:
    type: PageType
    default: /
    suffix: /
    index: ''
    map:
      /: 0
      .html: 0
      'feed.xml': 9818
      'markers.json': 1597149189
...

FAQ

How to overwrite paths?

As always via TypoScript setup - like

plugin.tx_osm {
    view {
        templateRootPaths {
            0 = EXT:osm/Resources/Private/Templates/
            1 = EXT:yoursitepackage/Resources/Private/Templates/Extensions/Osm/
        }
        layoutRootPaths {
            0 = EXT:osm/Resources/Private/Layouts/
            1 = EXT:yoursitepackage/Resources/Private/Layouts/Extensions/Osm/
        }
    }
}

How to define own css or js?

CSS and JS is included via Layout html template. You can simply adjust the paths to your needs.

Filter address in Pi2 to some pages

If you don't want to present all available tt_address records in your FlexForm selection for your editors, you can filter it via Page TSconfig to one or more pages like:

tx_osm {
  flexform {
    pi2 {
      addressPageIdentifiers = 2,3,4
    }
  }
}

Manipulate markers

You can manipulate markers via PSR-14 Eventdispatcher as described.

Configuration/Services.yaml in your sitepackage:

services:
  Vendor\YourSitepackage\EventListener\OsmManipulator:
    tags:
      - name: event.listener
        identifier: 'osm-marker-manipulation'
        event: In2code\Osm\Domain\Model\MarkerContainer

Example dispatcher:

<?php
declare(strict_types=1);
namespace Vendor\YourSitepackage\EventListener;

use In2code\Osm\Domain\Model\Marker;
use In2code\Osm\Domain\Model\MarkerContainer;

/**
 * Class OsmManipulator as an example
 */
class OsmManipulator
{
    /**
     * @param MarkerContainer $markerContainer
     * @return void
     */
    public function __invoke(MarkerContainer $markerContainer): void
    {
        /** @var Marker $marker */
        foreach ($markerContainer->getMarkers() as $marker) {
            $marker->setMarker(1);
            $marker->setTitle('new title');
            $marker->setDescription('new description');
            $marker->setLatitude(10.00000);
            $marker->setLongitude(10.00000);
            $marker->setIcon('/typo3conf/ext/yoursitepackage/Resources/Public/Icons/Marker.png');
            $marker->setIconHeight(28);
            $marker->setIconWidth(28);
            $marker->setIconOffsetX(1);
            $marker->setIconOffsetY(-10);
        }
    }
}

in2code / osm

Maintainers

Details