1. Home
  2. Docs
  3. Dynamic Contents
  4. Open Street Map

Open Street Map EA Element

Open Street Map is a Simple EA widget to manage Maps and Places with the Open Source Open Street Map. You can add Layers by yourself and the geocoding address is supporting via Google Maps. Here in this tutorial, you’re going to learn how to use the Open Street Map element into Elementor Page Builder. So let’s get straight into it:


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Open Street Map Element

 

»Content

 

Open Street Map

⇒Zoom Control: Enable/disable the zoom control on the Open Street Map.

⇒Zoom: Set the default zoom level of the Open Street Map.

⇒Map Height: Customize the map height for the open street map in different dimensions.

Marker

Adding Marker Items:

⇒Title: Type the title of the marker location on the map.

⇒Latitude: Add the

: Add the

⇒Content: Type Open Street Map content.

⇒Custom Marker: Add the marker icon image. Use max 32×32 px size icon for better result.

⇒Add Item: Use the ‘+Add Item’ button to add more marker data on the map.

 

Unable To Use or Found Bugs?

⇒Need Support: Are you in need of a feature that’s not available in our plugin or got some bugs? Feel free to do a Support request.

 


»Style

 

Tooltip

⇒Text Color: Add a custom color to the tooltip text.

⇒Close Button Color: Add a custom color to the close button of the tooltip.

⇒Close Button Hover Color: Add a custom color to the close button of the tooltip on hover.

⇒Background Type: Set the background type either Classic or Gradient for the tooltip. And then customize the style according to your preference.

⇒Padding: Set the padding value for the top, right, bottom and left around the tooltip for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the tooltip text for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the tooltip for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Typography: Set the typography options for the tooltip text.

 

Zoom Control

⇒Icon Color: Add a custom color to the zoom control icon.

⇒Background Type: Set the background type either Classic or Gradient for the zoom control icon. And then customize the style according to your preference.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the zoom control icon for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the zoom icon for different dimensions.

⇒Bar Color: Add a custom color to the zoom control bar.

⇒Bar Width: Customize the zoom control bar width manually.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Open Street Map Element.


Was this article helpful to you? Yes No

How can we help?