Open Street Map | SP Page Builder (Pro) 4.x - Documentation | JoomShaper

SP Page Builder (Pro) 4.x

Updated Last: 03 August 2022

Open Street Map

What is Open Street Map?

Open Street Map is an editable map of the whole world that is open source, user-contributed, and free to use. OpenStreetMap includes data about roads, buildings, addresses, shops and businesses, points of interest, railways, trails, transit, land use and natural features, and much more.

How to Add Open Street Map?

You can add the Open Street Map addon to your page from the SP Page Builder sidebar. Simply drag the addon from the Addons panel and drop it on the section of the page where you want to add the Open Street Map.

Open Street Map Settings

When you click on the addon, the addon inline editor will open up. You can access the Map settings from there and customize it to fit your needs. 

Map

SP Page Builder 4.0

Height: You can define the map height (default 400px) here by using the slider, width is always responsive and takes 100%.

Style: The addon offers several Map Styles that you can choose from the drop-down menu. The most popular (and similar to Google Maps) is Voyager style.

Locations: You can add multiple locations on the Open Street Map. Click on the +Add button to add a new location. 

Edit Location

Click on the edit button beside each location to access the location item settings. 

SP Page Builder 4.0

Title: Use this field to give a title to your location item.

Latitude, Longitude: Set location latitude & longitude divided by a comma. Get your address latitude & longitude from here: https://www.openstreetmap.org/.

Marker Popup Text: Marker Popup Text displays in a popup window above the map, at a given location (marker).

Custom Marker: A marker is a visual representation of a specific coordinate on a map. You can upload images here to use as a custom marker. 

Options

SP Page Builder 4.0

Map Zoom: Set how large or small the contents of a map appear in the map view.

Enable Mouse Wheel Zoom: Enable to lets the users use the wheel on the mouse to zoom in and out.

Enable Drag: Enable to drag the map view to view the location you want.

Show Zoom Controller: Show/hide the Zoom controls to zoom in and out of the map 

Show Attribution: Show/hide the copyright note (Attribution) of the map.