The WEC Map extension can be configured using standard TypoScript and FlexForms. Example TypoScript is provided below for both plugins. Note that for the WEC Simple Map, which is referred to as “tx_wecmap_pi1” in the TypoScript, you can either specify the address in parts or as one string. By using TypoScript to configure this plugin you can also set more than one marker to appear on the map. The WEC Frontend User Map extension is referred to as “tx_wecmap_pi2.”
plugin.tx_wecmap_pi1 {
apiKey =
height = 500
width = 500
showDirections = 1
prefillAddress = 0
initialMapType = G_SATELLITE_MAP
controls.mapControlSize = small
controls.showOverviewMap = 1
controls.showMapType = 1
controls.showScale = 1
markers.1 {
title = TS title
description = TS desc
street = 1234 Happy Place
city = Happy City
zip = 12345
state = HS
country = Happy Country
}
markers.2 {
title = Another title
description = Another description
address = 1234 Another Happy Ave, Happy City, HS 12347, Happy Country
}
markers.3 {
#add another marker here
}
}
plugin.tx_wecmap_pi2 {
apiKey =
height = 500
width = 500
showDirections = 1
prefillAddress = 0
initialMapType = G_HYBRID_MAP
controls.mapControlSize = large
controls.showOverviewMap = 1
controls.showMapType = 1
controls.showScale = 1
userGroups = 2,3,5
pid = 2,3,5
}
Property | Data Type | Description | Default |
height | integer | The height of the map in pixels. Avoid values of less than 400. | 500 |
width | integer | The width of the map in pixels | 500 |
showDirections | boolean | Toggle whether a directions tab should be shown for map markers. If set to 1, the user can get directions from and to the current marker via maps.google.com directions. | 0 |
prefillAddress | boolean | If enabled and a FE user is currently logged in, his or her address will automatically be filled into the directions form. | 0 |
initialMapType | String | Specifies whether to show the street map, satellite images, or hybrid view initially. Possible values are the constants defined by Google: G_NORMAL_MAP for the normal street map, G_SATELLITE_MAP for Google Earth satellite images, and G_HYBRID_MAP for the hybrid view. | |
controls.mapControlSize | String | Defines the map controls in the top left corner of the map. Possible values are “small”, “large”, or “zoomonly.” “Small” will only show the pan controls with a + and – zoom, “large” will show the pan controls with a zoom scale, and “zoomonly” will only show + and – zoom buttons. | |
controls.showOverviewMap | boolean | Toggles the little mini map in the bottom right corner | 0 |
controls.showMapType | boolean | Toggles the map type selectors (Map, Satellite and Hybrid) in the top right corner. | 0 |
controls.showScale | boolean | Toggles the scale shown in the bottom left. | 0 |
markers.*.title | String | Sets the title for a marker. * is a number starting at 1, which makes it possible to define as many markers as desired. | |
markers.*.description | String | Sets the description for the marker. | |
markers.*.street | String | The street name for the marker, i.e. 1234 Happy Lane | |
markers.*.zip | String | The ZIP code for the marker, i.e. 43234 | |
markers.*.city | String | The city for the marker, i.e. Some City | |
markers.*.state | String | The state for the marker, i.e. Montana | |
markers.*.country | String | The country for the markers, i.e. USA | |
markers.*.address | String | A whole address string. This can be used instead of the above 5 properties to define the address in one single string, i.e. 1234 Happy Lane, Some City, Montana 43234, USA | |
markers.*.iconID | string | Use the icon with the given id on this marker. This must be the same iconID that was specified for the icon. | |
zoomLevel | int | Sets the initial zoom level for the map. Values range from 0 (zoomed out all the way) to 17 (zoomed in all the way) | |
icons.*.iconID | String | Unique id of the icon. Can be any unique, arbitrary string | |
icons.*.imagepath | String | path to the marker image, relative to the TYPO3 root | |
icons.*.shadowpath | String | path to the shadow image, relative to the TYPO3 root | |
icons.*.width | int | icon width in pixels | |
icons.*.height | int | icon height in pixels | |
icons.*.shadowwidth | int | shadow width in pixels | |
icons.*.shadowheight | int | shadow height in pixels | |
icons.*.anchorX | int | The pixel coordinate relative to the top left corner of the icon image at which this icon is anchored to the map. | |
icons.*.anchorY | int | The pixel coordinate relative to the top left corner of the icon image at which this icon is anchored to the map. | |
icons.*.infoAnchorX | int | The pixel coordinate relative to the top left corner of the icon image at which the info window is anchored to this icon. | |
icons.*.infoAnchorY | int | The pixel coordinate relative to the top left corner of the icon image at which the info window is anchored to this icon. | |
centerLat | float | Set the latitude for the initial center of the map | |
centerLong | float | Set the longitude for the initial center of the map | |
mapName | String | Identifies the map uniquely on a page by setting it as the id of the div containing the map. It's also appended to all the javascript variables and functions so as not to conflict with more than one map on a page. Only necessary in special cases, usually the defaults work well enough. | mapXXX, where XXX is the content element's uid or, if not available, a random number. |
marker.title | cObj | cObj for the title of the marker bubble | COA |
marker.description | cObj | cObj for the description of the marker | COA |
marker.address | cObj | cObj for the address formatting in the marker bubble | COA |
showSidebar | boolean | Turns the marker sidebar on or off | 0 |
[tsref:plugin.tx_wecmap_pi1]
Property | Data Type | Description | Default |
height | integer | The height of the map in pixels | 500 |
width | integer | The width of the map in pixels | 500 |
showDirections | boolean | Toggle whether a directions tab should be shown for map markers. If set to 1, the user can get directions from and to the current marker via maps.google.com directions. | 0 |
prefillAddress | boolean | If enabled and a FE user is currently logged in, his or her address will automatically be filled into the directions form. | 0 |
controls.mapControlSize | String | Defines the map controls in the top left corner of the map. Possible values are “small”, “large”, or “zoomonly.” “Small” will only show the pan controls with a + and – zoom, “large” will show the pan controls with a zoom scale, and “zoomonly” will only show + and – zoom buttons. | |
controls.showOverviewMap | boolean | Toggles the little mini map in the bottom right corner | 0 |
controls.showMapType | boolean | Toggles the map type selectors (Map, Satellite and Hybrid) in the top right corner. | 0 |
controls.showScale | boolean | Toggles the scale shown in the bottom left. | 0 |
userGroups | integer list | A comma separated list of FE user group ids. If you would like to restrict the markers shown to users from certain FE user groups, add their ids here. I.e., to only show users from FE user groups with ids 3 and 4, enter “3,4.” | |
pid | integer list | A comma separated list of storage folder ids. If you would like to restrict the markers shown to users from only certain storage folders, add their ids here. I.e., to only show users from storage folders with pids 5 and 8, enter “5,8.” | |
zoomLevel | int | Sets the initial zoom level for the map. Values range from 0 (zoomed out all the way) to 17 (zoomed in all the way) | |
centerLat | float | Set the latitude for the initial center of the map | |
centerLong | float | Set the longitude for the initial center of the map | |
mapName | String | Identifies the map uniquely on a page by setting it as the id of the div containing the map. It's also appended to all the javascript variables and functions so as not to conflict with more than one map on a page. Only necessary in special cases, usually the defaults work well enough. | mapXXX, where XXX is the content element's uid or, if not available, a random number. |
showRadiusSearch | boolean | Toggles the display of the radius search form | 0 |
groups.* | string | possible groups are “country”, “city”, and “single” | |
groups.*.zoom.min | int | minimum zoom level for this group. | |
groups.*.zoom.max | int | maximum zoom level for this group | |
groups.*.icon.iconID | String | Unique id of the icon. Can be any unique, arbitrary string | |
groups.*.icon.imagepath | String | path to the marker image, relative to the TYPO3 root | |
groups.*.icon.shadowpath | String | path to the shadow image, relative to the TYPO3 root | |
groups.*.icon.width | int | icon width in pixels | |
groups.*.icon.height | int | icon height in pixels | |
groups.*.icon.shadowwidth | int | shadow width in pixels | |
groups.*.icon.shadowheight | int | shadow height in pixels | |
groups.*.icon.anchorX | int | The pixel coordinate relative to the top left corner of the icon image at which this icon is anchored to the map. | |
groups.*.icon.anchorY | int | The pixel coordinate relative to the top left corner of the icon image at which this icon is anchored to the map. | |
marker.title | cObj | cObj for the title of the marker bubble | TEXT |
marker.description | cObj | cObj for the description of the marker | COA |
kml | int | comma separated list of WEC Map External records, used to overlay any KML data onto the map |
[tsref:plugin.tx_wecmap_pi2]
Property | Data Type | Description | Default |
height | integer | The height of the map in pixels | 500 |
width | integer | The width of the map in pixels | 500 |
showDirections | boolean | Toggle whether a directions tab should be shown for map markers. If set to 1, the user can get directions from and to the current marker via maps.google.com directions. | 0 |
prefillAddress | boolean | If enabled and a FE user is currently logged in, his or her address will automatically be filled into the directions form. | 0 |
controls.mapControlSize | String | Defines the map controls in the top left corner of the map. Possible values are “small”, “large”, or “zoomonly.” “Small” will only show the pan controls with a + and – zoom, “large” will show the pan controls with a zoom scale, and “zoomonly” will only show + and – zoom buttons. | |
controls.showOverviewMap | boolean | Toggles the little mini map in the bottom right corner | 0 |
controls.showMapType | boolean | Toggles the map type selectors (Map, Satellite and Hybrid) in the top right corner. | 0 |
controls.showScale | boolean | Toggles the scale shown in the bottom left. | 0 |
pid | integer list | A comma separated list of storage folder ids. If you would like to restrict the markers shown to users from only certain storage folders, add their ids here. I.e., to only show users from storage folders with pids 5 and 8, enter “5,8.” | |
zoomLevel | int | Sets the initial zoom level for the map. Values range from 0 (zoomed out all the way) to 17 (zoomed in all the way) | |
centerLat | float | Set the latitude for the initial center of the map | |
centerLong | float | Set the longitude for the initial center of the map | |
mapName | String | Identifies the map uniquely on a page by setting it as the id of the div containing the map. It's also appended to all the javascript variables and functions so as not to conflict with more than one map on a page. Only necessary in special cases, usually the defaults work well enough. | mapXXX, where XXX is the content element's uid or, if not available, a random number. |
showRadiusSearch | boolean | Toggles the display of the radius search form | 0 |
tables.* | int | configuration of the tables whose records will be mapped. The * is a placeholder for any integer, similar to a COA, i.e. tables.10, tables.20, etc. | |
tables.*.table | String | The table name that records are taken from | |
tables.*.where | String | A SQL WHERE clause. Can be used to further define which records of the table are mapped. | |
tables.*.join | String | A optional JOIN clause that will be appended to the query, for mm relations. Needs to be complete, i.e. “INNER JOIN some_table” | |
tables.*.icon.iconID | String | Unique id of the icon. Can be any unique, arbitrary string | |
tables.*.icon.imagepath | String | path to the marker image, relative to the TYPO3 root | |
tables.*.icon.shadowpath | String | path to the shadow image, relative to the TYPO3 root | |
tables.*.icon.width | int | icon width in pixels | |
tables.*.icon.height | int | icon height in pixels | |
tables.*.icon.shadowwidth | int | shadow width in pixels | |
tables.*.icon.shadowheight | int | shadow height in pixels | |
tables.*.icon.anchorX | int | The pixel coordinate relative to the top left corner of the icon image at which this icon is anchored to the map. | |
tables.*.icon.anchorY | int | The pixel coordinate relative to the top left corner of the icon image at which this icon is anchored to the map. | |
tables.*.title | cObj | cObj for the title of the marker bubble. If it isn't defined, the title will be blank by default | -blank- |
tables.*.description | cObj | cObj for the description of the marker. If it isn't defined, the description will by default be the record name as displayed in the backend, followed by the table it was taken from. Example: John Doe (fe_users), Jane Doe (tt_address) | -blank- |
kml | int | comma separated list of WEC Map External records, used to overlay any KML data onto the map |
[tsref:plugin.tx_wecmap_pi3]
See the Installation section for more detailed information about configuring the two plugins via FlexForms.