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.
Two sections are given:
- Map
- Options
Map
Height: You can define the map height (default 400px) here by using the slider, width is always responsive and takes 100% of the available width of the box its added to.
Style: The addon offers several Map Styles that you can choose from the drop-down menu.
Locations: You can add multiple locations on the Open Street Map. Click on the +Add button to add a new location.
A default location is added automatically to show how you can set a map up. This default item is labelled "Location Item Title".
Edit Location
Click on the edit button beside each location to access the location item settings.
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/.
Notice! No space between numbers, only one comma between, and only dots in numbers.
Here are example location numbers that you can use (in case of a problem):
- 39.8992,116.3933
- 48.8523,2.3504
Marker Popup Text: Marker Popup Text displays in a popup window above the map, at a given location (marker). This will normally be the full address and maybe phone number of the location in question.
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. This is hardly ever used so you can ignore it.
Once you are happy with your location settings, click the blue apply button.
Options
Map Zoom: Set how large or small the contents of a map appear in the map view. We might suggest a default value of 15 or 16 for this.
Enable Mouse Wheel Zoom: Enable to let the users use the wheel on the mouse to zoom in and out. We normally set this to on.
Enable Drag: Enable to drag the map view to view the location you want. We normally set this to on.
Show Zoom Controller: Show/hide the Zoom controls to zoom in and out of the map. We also normally set this to on.
Show Attribution: Show/hide the copyright note (Attribution) of the map. Generally, we set this to OFF.
Saving your map item
Once you have completed the steps above, you can save your item. If you need to add additional locations to your map, you can duplicate the existing item and edit it to suit. To duplicate an existing item, simply click on the copy icon next to its pen icon.
This will create an identical version of the existing item which you can then edit as appropriate. Now, when your map is displayed, it will show all of the defined locations as drop pin icons
How to Add map co-ordinates
Set location latitude & longitude divides by a comma. Get your address latitude & longitude from here https://www.openstreetmap.org/ and enter the address of the location to find.
When you enter the address of the location and then click on the magnifying glass, the map will display the location you are looking for. You can drag the map around to find the more specific location if needed.
Next, click your cursor on the precise location that you're interested in and a red circle will briefly appear. Then, Then, on the right hand Icon set, click on the share icon and a panel will slide out showing you the GEO URI.
Use your mouse right click option to copy this link. When copied it will look something like this:
geo:51.503315,-0.127642?z=19
The latitude and longitude values that you need would be the following:
51.503315,-0.127642
Note how we remove the content before and after the coordinates, and these can be then pasted into the latitude and longitude fields.