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.

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);
        }
    }
}

Contribution with ddev

This repository provides a DDEV-backed development environment. If DDEV is installed, simply run the following commands to quickly set up a local environment with example usages:

• ddev start
• ddev initialize

Requirements

1. Install ddev, see: https://ddev.readthedocs.io/en/stable/#installation
2. Install git-lfs, see: https://git-lfs.github.com/

Installation

1. Clone this repository
2. Run ddev start
3. Run ddev initialize to setup configurations and test database

Branchinfo

• Main Branch - Next Major Version
• typo3-v13: Version V13 for TYPO3 13
• typo3-v12: Version V4 for TYPO3 12

Early Access Programm for TYPO3 14 support

ℹ️ TYPO3 14 compatibility

See EAP page (DE) or EAP page (EN) for more information how to get access to a TYPO3 14 version

Changelog