What does it do?

• Show an interactive OpenStreetMap map with OpenLayers or Leaflet.
• Store coordinates in fe_users and tt_address tables and show as markers in the map.
• Show record information in popup window.
• Display gps tracks (GPX, KML).
• Display of GeoJSON vector files.

Screenshots

Frontend plugin

The example shows the output of the frontend plugin with the following settings:

• Leaflet JavaScript
• address of "Max Mustermann" as tt_address record with default marker, clickt on the marker
• GPX track with start and stop marker

Demo Instance

At https://osm.bigga.de a demo instance of EXT:ods_osm is available which presents multiple use cases of this extension.

Donation

This extension was only possible with the help of many other free projects.

You're likely using one of the main map “Mapnik”, “Osmarender” or “Cyclemap” - feel free to donate to the OpenStreetMap project https://supporting.openstreetmap.org/donate/

If you are using the address search (autocomplete longitude and latitude in address records), please donate the service you use:

Geonames: https://www.geonames.org/donations.html or buy some credits there.

Nominatim: https://supporting.openstreetmap.org/donate/

And don't forget the main components: https://typo3.org/ and https://openlayers.org/ or https://leaflet.org/

Frontend Plugin

Insert the OpenStreetMap as frontend plugin and define at least one marker to show. The map will center to the average coordinates of the markers.

New elements

Layer

You can define your own layers on root level.

Element option	Description
Title	Title of this layer. Shown in layerswitcher.
Is overlay	Base layer or overlay layer?
JavaScript	JavaScript part to create this layer. ###TITLE###: Title of layer. ###VISIBLE###: Contains “'visible':true” if is overlay and no layerswitcher activated.
Static map URL	Download static map from this URL. ###lat###: Latitude of map center. ###lon###: Longitude of map center. ###zoom###: Zoom level. ###width###: Image width. ###height###: Image height.
Tile URL	URL to fetch tiles. Used by OpenLayers if no JavaScript defined. Used by leaflet.
Maximum zoom	Maximum zoom level of this layer.
Subdomains	Tile URL subdomains (Variable {s})
Attribution	Attribution text of this layer.
Homepage	Homepage URL of this layer.

Marker

Element option	Description
Title	Title for this track. Only shown in backend.
Icon	Icon file.
Size	The size of the icon. Would determined automatically on save.
Offset	The offset of the icon. It describes the arrowhead. Would automatically choose the middle bottom of the image.

Track

Element option	Description
Title	Title for this track. Shown in layerswitcher.
Color	Color of the track line in the map.
Width	Width of the track line.
File	Select only one gpx file here.

Vector

You can add GeoJSON data and/or a GeoJSON file to display on a new layer. The GeoJSON may contain FeatureCollections. Polygone, Lines and Points are tested and are supported by the vector draw wizard.

Element option	Description
Title	Title for this vector. Shown in layerswitcher.
GeoJSON	Fill GeoJSON data and/or select a GeoJSON file below. You can use the vector draw wizard to create and edit the GeoJSON data in this field.
Color	Color of the vector line in the map (optional).
Width	Width of the vector polyline. (optional)
File	Select only one geojson file here.

Extended elements

Website user

Element option	Description
Longitude and Latitude	Enter the coordinates of an address here. It would determined automatically if zip or city is set and autocompletion is enabled in the extension manager. Use the OpenStreetMap icon to search the coordinates on the map.

Website usergroup

Element option	Description
Marker	Optionally specify a marker here.

Extension Configuration

Some global settings of the extension may be configured in Settings -> Extension Configuration -> ods_osm.

Screenshot

TypoScript Configuration

It is mandatory to include the ods_osm TypoScript template "Template OpenStreetMap". This template sets some default values for the ods_osm plugin. The defaults may be configured with the TypoScript Constant Editor.

With these TypoScript defaults, the editor does not need to make a detailed configuration of the ods_osm plugin. Selecting the wanted marker is suffician.

The dimenions of the map, the right JavaScript library and zoom level are set by the defaults. But editors may set and overwrite the defaults in the plugin settings.

plugin.tx_odsosm_pi1 {
	width = 800
	height = 600
	mouse_position = 1
}

plugin.tx_odsosm_pi1 {
	marker {
		pages =
		fe_users =
		fe_groups =
		tx_odsosm_track =
	}
}

plugin.tx_odsosm_pi1 {
	popup {
		fe_users = COA
		fe_users {
			9 = FILES
			9 {
				references {
					table = fe_users
					fieldName = image
				}
				renderObj = IMAGE
				renderObj {
					file {
						import.data = file:current:uid
						treatIdAsReference = 1
						width = 150c
						height = 150c
					}
					altText.data = file:current:alternative
					titleText.data = file:current:title
					stdWrap.typolink.parameter.data = file:current:link
				}
			}
			10 = TEXT
			10 {
				field = name
				wrap = <h2>|</h2>
				override = {field:first_name} {field:middle_name} {field:last_name}
				override.insertData = 1
				override.if.isFalse.field = name
			}
			20 = TEXT
			20.field = description
			20.htmlSpecialChars = 1
		}
		tt_address = COA
		tt_address {
			9 = FILES
			9 {
				references {
					table = tt_address
					fieldName = image
				}
				renderObj = IMAGE
				renderObj {
					file {
						import.data = file:current:uid
						treatIdAsReference = 1
						width = 150c
						height = 150c
					}
					altText.data = file:current:alternative
					titleText.data = file:current:title
					stdWrap.typolink.parameter.data = file:current:link
				}
			}
			10 = TEXT
			10.field = name
			10.wrap = <h2>|</h2>
			20 = TEXT
			20.field = description
			20.stdWrap.parseFunc < lib.parseFunc_RTE
			20.htmlSpecialChars = 0
		}
	}
}

plugin.tx_odsosm_pi1 {
	icon {
		# IMAGE example
		fe_users = IMAGE
		fe_users {
			file = fileadmin/icon.png
			file.width = 60px
		}

		# HTML example
		fe_users = TEXT
		fe_users {
			value = <span>X</span>
			size_x=20
			size_y=30
			offset_x=10
			offset_y=15
		}
	}
}

Install Extensions via Composer

The following steps are tested with TYPO3 11.5 LTS.

1. Install ods_osm

   composer require bobosch/ods-osm:^4.2

2. Install tt_address (optional)

   composer req friendsoftypo3/tt-address

Configure Extensions

1. Include static template "OpenStreetMap" into your root-template
2. (optional) Check settings with the TypoScript constant editor. See TypoScript Configuration.
3. (optional) Check the extension configuration. See Extension Configuration.

Create Record

1. Open or create an fe_users or tt_address record.
2. Enter zipcode or city and save the record (without closing it).

3. Scroll to the “Longitude” section and use the marker icon to open the map wizard.

4. Click on the correct position or move the marker and select "Import marker-coordinates".
5. Save the record again.

Place OSM Plugin

1. Insert a content element plugin "OpenStreetMap" on your page.
2. Add your address record in "Records to show”.