EXT: OpenStreetMap

Extension Key:	ods_osm
Description:	Add an interactive OpenStreetMap map to your website. Can also show other OpenLayers compatible maps.
Author:	Robert Heel <[email protected]>
Copyright:	2010-2016

Introduction

What does it do?

• Show an interactive OpenStreetMap map.
• 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.

Screenshots

Frontend plugin

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 http://donate.openstreetmap.org/

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

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

Nominatim: http://donate.openstreetmap.org/

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

Users manual

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.

Plugin option (TS option)	Description
Marker to show (marker)	Show these records on the map.
Cluster markers (cluster)	Group nearby markers.
Width (width)	Width of the map in pixels.
Height (height)	Height of the map in pixels.
Longitude (lon)	Default longitude.
Latitude (lat)	Default latitude.
Use this coordinates only if no marker exists (use_coords_only_nomarker)	If unset, the map is always centered at the given coordinates. If set, the map is only centered there if no marker exists.
Zoom (zoom)	Zoom level.
Library (library)	Choose between openlayers, leaflet or static.
Base layer (layer)	Show this map. The user can switch between these base layers if the layerswitcher is is enabled.
Show popups (show_popups)	Show a popup window with record information if the user hover or click a marker.
Show this marker's popup initially (marker_popup_initial)	Open this marker's popup if the user visit the map.
Mouse navigation (mouse_navigation)	Allow navigation with the mouse.
Show pan/zoom (show_pan_zoom)	Show pan/zoom element.
Show layerswitcher (show_layerswitcher)	Show layerswitcher which allows the user to hide markers from the same group.
Show scalebar (show_scalebar)	Show pan/zoom element.
Show current position (position)	Center the map on the current position of the user (if available)

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.
Include static JavaScript	Optionally include this javascript file. ###STATIC_SCRIPT###: Value set by TS
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.

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.

Administration

In the extension configuration .. image:: Documentation/Images/ExtensionConfiguration.png

Option	Description
Autocomplete longitude and latitude	You can enable to search the coordinates on geonames.org when saving an fe_users or tt_address element.
Use service to find coordinates	Use this service to get the coordinates of an address. If you select “Only cache” you have to fill the cache table manually. If you select a provider here, be aware that the fields “zip”, “city” and “country” of every address record you save is sent to the provider.
Contact email address	Enter a contact email address for the service provider here. If not specified, email address of server admin is used.
Use local javascripts and images	Activate this if you don't like to use the javascript files from http://www.openlayers.org/ and http://www.openstreetmap.org/ to use the local versions in ods_osm/Resources/.

There is a function to mass gecode addresses in the functions menu.

Configuration

Reference

Property	Data type	Description	Default
cluster	boolean	Cluster marker at lower map zoom.	0
cluster_radius	integer	Cluster marker in given radius.	80
external_control	boolean	Allow control with GET or POST lon: Map center longitude lat: Map center latitudezoom: Map zoom level layers: Comma separated list of tx_odsosm_layer uid's records: Comma separated list of markers Don't forget to set no_cache=1	0
height	integer		400
icon	IMAGE or TEXT object	Default marker image	Library default
JSlibrary	string	JavaScript library: none / jquery	none
layer	integer list	Comma separated list of tx_odsosm_layer uid's. 1: Mapnik 3: CycleMap 4: Seamarks 5: OpenPisteMap 13: ÖPNV Deutschland 14: Hike & Bike Map 15: Hillshading (NASA SRTM3 v2) 16: By Night 17: Hiking routes 18: Mapnik BW 19: MapSurfer.Net Road 20: MapSurfer.Net Topographic 21: MapSurfer.Net Hybrid 25: TransportMap 26: MapQuest 27: MapQuest Open Aerial 28: Cycling routes 29: Stamen Toner 30: Stamen Watercolor 31: Public Transport Lines 32: Stamen Terrain Labels	1
layerswitcher. div	boolean	Use extra div for the layerswitcher.	0
layerswitcher. options	string	Additional options when creating layerswitcher.
library	string	Library: leaflet / openlayers / openlayers3 / static	openlayers
marker	array with table name and integer list	Tablenames and a comma separated list of record ids.	see m
marker_popup_initial	integer	Open popup of this marker
mouse_navigation	boolean		0
no_marker	boolean	If no marker is set: 0: Hide map 1: Show map	1
path_openlayers	string	Overwrites the path to OpenLayers.js
popup	TS object	There are two additional fields: “group_title” and “group_description” filled with group information.	see p
position	boolean	Get current user postion from browser to center the map.	0
show_layerswitcher	boolean		0
show_pan_zoom	integer	0:No 1:Bar 2:+/-	0
show_popups	boolean	0:No 1:Click 2:Hover	0
show_scalebar	boolean	Show a scale line on the map.	0
static_script	string	Marker ###STATIC_SCRIPT### in layer “Include static JavaScript”. Use it for google or bing maps api key.
use_coords_only_nomarker	boolean	Use the default coordinates only if no marker exists.	0
width	integer		640

m:

pages =
fe_users =
fe_groups =
tx_odsosm_track =

p:

fe_users = COA
fe_users {
        10 = TEXT
        10.field = name
        10.wrap = |
        20 = TEXT
        20.field = description
}

Example

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

Example of icon property

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

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

Tutorial

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 OSM logo to open a map.

   

4. Click on the correct position.

5. Save the record again.

6. Insert a content element plugin “Openstreetmap” on your page.

7. Add your address record in “Marker to show”.