In this documentation, we will show you how to customize the Open Street Map widget presented by Element Pack Pro.

Inserting The Open Street Map Widget

Inserting the widget by following this,

1. Search by the Open Street Map widget name.
2. Then select the appear widget ( with Element Pack Pro logo T.R corner).
3. After Drag and Drop it on the Elmentor Editor page.

Content Tab

The Content tab controller displayed here offers the flexibility to adjust the layout of the widget according to your preferences.

Open Street Map Section

Go to Content > Open Street Map

Customize the open street map by following the controls,

1. Zoom Control: Enable the switcher to show the zoom controls.
2. Zoom: Set the size for the zoom.
3. Map Height: Set the height for the Map.

Normal State for the Open Street Map

4. CSS Filters: Set the CSS Filters the open street map.
5. Border Type: Set the border type.
6. Border Width: Set the width for the border.

7. Border Color: Set the color for the border.
8. Border Radius: Make the border radius.

Hover State for the Open Street Map

The changes appear on mouse hover.

9. CSS Filters: Set css filters for the street map.

Marker Section

Go to Content > Marker

Make the marker by following it,

1. Click on the item and it will appear a toggle info.
2. Title: Set the title for the item.
3. Latitude: Set the latitude for the location.
4. Longitude: Set the longitide for the location.

5. Content: Set the content for the location.
6. Custom Marker: Set the custom marker icon.

7. ” + Add Item ” to add new item. You can add as many item you want.

After adding new item it will appear on the street map.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects that are visually appealing and cohesive with the overall design of the interface.

Tooltip Section

Go to Style > Tooltip

Make the tooltip section stylish by following,

1. Text Color: Set the text color.
2. Close Button Color: Set the color for the close button.
3. Close Button Hover Color: Set hover color for the close button.
4. Background Type: Set the background type.

5. Padding: Set the padding for the space.
6. Border Type: Set the border type.
7. Border Width: Set width for border.

8. Border Color: Set the color for the border.
9. Radius: Make the border radius.
10. Box Shadow: Set the box shadow.
11. Typography: Set the typography for tooltip.

Zoom Control Section

Go to Style > Zoom Control

Make the zoom control interactive by following,

1. Icon Color: Set the icon color.
2. Background Type: Set the background type.
3. Border Type: Set the border type.

4. Border Width: Set the width for the border.
5. Border Color: Se the border color.
6. Radius: make the border radius.

7. Bar Color: Set the bar color.
8. Bar Width: Set width for the bar.

Video Assist

You can watch the video above to learn about the Open Street Map widget.
Please visit the demo page for examples.

Thanks for staying with us.