OpenStreetMap Element

Last Update: October 22, 2024

OpenStreetMaps are an open source equivilant to Google Maps. The OpenStreetMaps Element allows you to place a map anywhere in your content. Check out the OpenStreetMap website for more details on this project. Read on for details of all the Element options, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The OpenStreetMap Element

The OpenStreetMap Element is a parent and child element, which allows you to place a single, or multiple, pins on a map.

The Children tab contains the individual items, while the other tabs are Parent Options, and affect the whole series of info items. You can start either by adding Child items or customizing the parent options. These cover the functionality and style of the element as a whole.

To edit the child items, go to the Children tab and click the pencil icon to edit the existing item. The Child Item Options Panel appears. The main options here are the longitude and latitude fields, which place the pin on the map. You can also search for a specific address, but the Longitude and latitude will always be the most accurate. When a pin is active, you can also drag its position around the map, and you can customize the pins and add labels and more details.

If you want multiple pins on a map, you can then duplicate existing, or create new, content boxes by clicking on the Clone Item icon, or the + Add Marker button respectively.

On the General tab, you set the size and zoom level of the map, and determine which controls will be available to the user. There is also a Design tab, for further customization, and an Extras tab for Element animation.

Read below for a detailed description of all element options.

Element Options

Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Parent Element Options

General

HeadingDescription
Map TypeSelect map type. Polyline will connect markers through a line. Polygon needs at least 3 markers to work, will connect them through lines, and add a semit-transparent background color to the enclosed area.
Center On MarkersSet the map's view to show all markers. If "Yes" will hide Zoom Level & Zoom Snap option.
Map DimensionsMap dimensions in percentage, pixels or ems. NOTE: Height does not accept percentage value.
Zoom LevelChoose the zoom level for the map. 0 corresponds to a map of the earth fully zoomed out, and larger zoom levels zoom in at a higher resolution.
Zoom SnapZoom snap controls the interval for the zoom level. If 0 is used for the zoom snap the zoom level will not snap after centering on markers.
Show Zoom Control on MapDisplay zoom control.
Map DraggingEnable dragging on map.
Touch ZoomEnable zooming using touch gesture.
Double-Click ZoomEnable zooming using double click event.
ScrollwheelEnable zooming using the mouse scroll wheel.
Popup Display TypeChoose popup display type.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Marker AnimationSelect an animation for the marker point.
Connecting Line ColorControls the connecting line color.
Connecting Line SizeControls the size of the connecting line. In pixels.
Popup Title TypographyControls the typography of the popup title. Leave empty for the global font family.
Popup Title AlignmentSelect the popup title alignment.
Popup Content TypographyControls the typography of the popup content. Leave empty for the global font family.
Popup Content AlignmentSelect the popup content alignment.
Popup Background ColorControls the background color of the popup.
Popup Close Button ColorControls the background color of the popup close button.
Popup PaddingIn pixels or percentage, ex: 10px or 10%.
MarginEnter values including any valid CSS unit, ex: 4%.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

Child Options

General

HeadingDescription
TitleEnter the text to be displayed on the tooltip title.
AddressEnter the address then click search button. The latitude and longitude for the closest match will be added.
LatitudeEnter the latitude of the address. You can use the address field above or use an online service to find coordinates. You can also adjust the location by dragging the marker.
LongitudeEnter the longitude of the address. You can use the address field above or use an online service to find coordinates. You can also adjust the location by dragging the marker.
ContentEnter the content.
Marker IconSelect an icon to be displayed inside the map.
Popup Display TypeChoose popup display type. Default will use parent option.

Design

HeadingDescription
Icon SizeControls the size of the icon. In pixels.
Icon ColorSelect the color of the text and the icon.
Background ColorSelect the background color of the marker icon.
Border RadiusEnter values including any valid CSS unit, ex: 10px or 10%.

In this article