in2code / osm
OSM - OpenStreetMap extension for TYPO3
Installs: 3 527
Dependents: 0
Suggesters: 0
Security: 0
Stars: 6
Watchers: 5
Forks: 2
Open Issues: 5
Type:typo3-cms-extension
Requires
- php: ^7.4 || ^8.0
- ext-json: *
- typo3/cms-core: ^11.5 || ^12.3
Suggests
- friendsoftypo3/tt-address: Show address markers from tt_address records in a map
Replaces
- typo3-ter/osm: 4.0.3
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);
}
}
}