Custom Simple Map Icons for wec_map

by Michael Cannon in Featured, TYPO3 · 1 comment

In June 2009, Andrea of Stonebriar Church, wrote into the Acqal help desk with a little question, “How do I change the Google map icons for our wec_map pages?” This particular request was a little new to me as I hadn’t even considered the possibility before. However, it seems you can.

What follows is how the answer to wec_map custom icons was found.

What’s wec_map?

Per the wec_map TYPO3 extension manual, the Web Empowered Church Map Extension provides an interface for placing maps from Google on a TYPO3-based website. First, a Simple Map Plugin allows you to show a single address, such as your church address, on a Google map. Second, the Frontend Users Map Plugin allows you to show multiple locations on a map. These locations are drawn from a list of Frontend Users and can be limited to a particular Frontend Users Group.

Stonebriar: A little history

Stonebriar Church has been with Cannonbose, Acqal and TYPO3 Vagabond via Aihrus for about five years now. I consider myself very fortunate to support Andrea and her wonderful web management team with TYPO3 support. Stonebriar has been running TYPO3 systems for many years and has a positive history of supporting TYPO3 development financially, participating in Dallas TYPO3 User Group and with good deeds and words.

wec_map Research

Figuring that changing of the Google based simple map icons was configuration issue, I looked into the wec_map manual, but to no direct success. With nothing firm there and knowing I was working with the simple map plugin of wec_map, AKA pi1, I took a look into the TypoScript file wec_map/pi1/static/setup.txt and found a little section of commented code referencing “icons” with an “iconID” property.

This looked promising. By going back to the wec_map manual, we find some guidance on what the icons property attributes are, but still no “how do I enable them…” in the Advanced Configuration with TypoScript section.

Onto Google, by querying “wec_map iconID” for that last bit of enabling code on how do the custom icons get activated. It seems that the wec_map/static/setup.txt file contains our final clue via homeicon. Now this helps make sense to what the wec_map TypoScript reference stated in regards to iconID.

Apparently, within your template TypoScript setup code, you can set the `markers.*.iconID` to the same string name as given in `icons.*.iconID`. The reason this was missed in the first place is because iconID for the markers is assumed to be default and therefore, iconID wasn’t specificially set except as a sample for homeicon. Therefore, I didn’t connect icons and markers together in the pi1/static/setup.txt TypoScript file.

TypoScript for Custom Simple Map Icons in wec_map

With all of the clues brought together, let’s create your custom icon in a template via TypoScript setup.

plugin.tx_wecmap_pi1 {
	icons.1 {
		iconID       = church
		imagepath    = fileadmin/templates_3.0/ext/wec_map/ChurchIcon.gif
		shadowpath   = typo3conf/ext/wec_map/images/mm_20_shadow.png
		width        = 32
		height       = 32
		shadowWidth  = 22
		shadowHeight = 20
		anchorX      = 6
		anchorY      = 20
		infoAnchorX  = 5
		infoAnchorY  = 1

The following TypoScript setup code will then tell simple map, pi1, pins to use the custom icon created above.

plugin.tx_wecmap_pi1.markers.1.iconID = church

View the icon change at Stonebriar Church.

Since the church icon is bigger than than the shadow icon, there’s no shadow. To create the shadow, you should create foreground and background icons that compliment each other.

For best visual results, use transparent background icons.

If you’ve got questions or comments, please leave them in the comments area.


Thank you Web Empowered Church crew for producing great extensions such as wec_map.

Revised since original July 7, 2009 posting at

Be Sociable, Share!

Related Entries

About Michael Cannon

Hello, I'm Michael Cannon, Peichi's smiling man, an adventurous water-ratchief technology officer, cyclist, poet, WWOOF'er and world traveler.

Previous post:

Next post: