PHPackages                             in2code/osm - 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. in2code/osm

ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility)

in2code/osm
===========

OSM - OpenStreetMap extension for TYPO3

13.0.0(9mo ago)66.1k↓22.2%2[2 issues](https://github.com/in2code-de/osm/issues)GPL-2.0-or-laterPHPPHP ^8.2

Since Aug 12Pushed 9mo ago3 watchersCompare

[ Source](https://github.com/in2code-de/osm)[ Packagist](https://packagist.org/packages/in2code/osm)[ Docs](https://github.com/in2code-de/osm)[ RSS](/packages/in2code-osm/feed)WikiDiscussions typo3-v13 Synced 1mo ago

READMEChangelogDependencies (12)Versions (20)Used By (0)

OSM - Open Street Map
=====================

[](#osm---open-street-map)

Introduction
------------

[](#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-1)

[![screenshot_pi1_frontend.png](Documentation/Images/screenshot_pi1_frontend.png "Map in frontend")](Documentation/Images/screenshot_pi1_frontend.png)

[![screenshot_pi1_backend.png](Documentation/Images/screenshot_pi1_backend.png "Plugin in backend")](Documentation/Images/screenshot_pi1_backend.png)

Plugin 2
--------

[](#plugin-2)

[![screenshot_pi1_frontend.png](Documentation/Images/screenshot_pi2_frontend.png "Map in frontend")](Documentation/Images/screenshot_pi2_frontend.png)

[![screenshot_pi2_backend.png](Documentation/Images/screenshot_pi2_backend.png "Plugin in backend")](Documentation/Images/screenshot_pi2_backend.png)

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

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

[](#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
---

[](#faq)

### How to overwrite paths?

[](#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?

[](#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

[](#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

[](#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:

```