The OpenStreetMap custom field lets you easily add a map to your site by selecting any place on the map by either typing an address, entering coordinates or dragging over a marker.
- How to add a OpenStreetMap Custom Field to Joomla! Articles
- Field Usage
- Frontend Display
- Frequently Asked Questions
How to add a OpenStreetMap Custom Field to Joomla! Articles
To add a OpenStreetMap Field on Joomla Articles, go to Content > Articles > Your Article > General Tab > Select ACF - OpenStreetMap Type.
As you can see from the screenshot above, after selecting the "ACF - OpenStreetMap" type, the settings for this field will appear.
Let's see what each option does.
| Name | Description |
|---|---|
| Name | The name will be used to identify the field. Leave this blank and Joomla will fill in a default value from the title. |
| Label | The label of the field to display. |
| Description | A description of the field that will be displayed in the label tooltip. |
| Required | Is this a mandatory field? |
| Default Value | Set the default value of the field |
| Front-end | |
| Map Width | Set the width of the map. |
| Map Height | Set the height of the map. |
| Zoom | Set the zoom of the map. |
| Marker Image | Replace the default marker image by uploading an image of your choice. |
| Marker Tooltip | Enable to set and display a tooltip upon clicking the marker. If left blank, the tooltip will not appear. |
| Map Scale | Select the scale unit that appears at the bottom left side of the map. |
| Back-end | |
| Show Address Input | Set whether to display the Address text input to enter your own addresses. |
| Default Map Coordinates | Enter the default latitude and longitude coordinates separated by comma. |
Usage
Once you are in your Article's Edit screen, choose the "Fields" Tab to see the OpenStreetMap field as you can see in the screenshot below.
You can now select a place from the map, enter your Address or coordinates in the search field to find a location.
Adding a tooltipAfter you have set the marker location, you can set the marker tooltip on the Marker Tooltip to display information about the location you have selected to your users that click on the marker.
Typing an address in the search boxWhile you type in the search box, a list of addresses will be presented to you that have the most relevance based on your search. After you find your desired address, you can click on it to re-center the map.
Frontend Display
Take a look at the screenshot below to see how it could be displayed in your frontend.
Once you have set a tooltip on the marker, you can view it by clicking the marker. Here is how it looks:
