How To Use The Open Street Map Widget By Atomic Addons

The Open Street Map widget by Atomic Addons shows a map built on OpenStreetMap. You place one or more markers by latitude and longitude, each with a title and a pop-up that opens on click. It needs no API key. This guide covers adding the widget, placing markers and setting up the map.

Enable the Open Street Map Widget

Open Street Map is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Open Street Map. You can also open the Content category.

4. 4

   Turn the Open Street Map widget on.

5. 5

   Click Save Settings.

Add the Open Street Map Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Open Street Map. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Map Settings

Open the widget and go to Content → Open Street Map:

1. 1

   Zoom Control: Shows the + and − buttons in the top-left corner of the map. Off by default.

2. 2

   Zoom: How close the map starts, 15 by default. 1 shows the whole world; the map goes no closer than 18, so higher values look the same as 18.

3. 3

   Map Height: The height of the map, up to 1000px. 400px when left empty. Use the device icon to set it per screen size.

4. 4

   Normal / Hover: CSS Filters change the map's look, such as blur, brightness, contrast, saturation and hue; set a second set on the Hover tab for when the pointer is over the map. The Normal tab also has a Border and Border Radius for the map's frame.

The map centers on the first marker in the list. Turning the mouse wheel over the map scrolls the page and does not zoom; visitors zoom with the buttons, a double-click or a pinch.

Markers

Content → Marker holds the list of markers. Click Add Item for each place and open it to fill in:

1. 1

   Title: Appears when a visitor points at the marker, and names the marker for screen readers. “Marker #1” by default.

2. 2

   Latitude: The place's latitude, such as 24.82391.

3. 3

   Longitude: The place's longitude, such as 89.38414.

4. 4

   Content: The pop-up that opens when a visitor clicks the marker, for example an address. Basic formatting such as <strong> and <br> is allowed. Leave it empty for no pop-up.

5. 5

   Custom marker: An image to use in place of the standard blue pin. Use a 25 × 41px PNG so its tip lands on the exact point.

To find a place's coordinates, open openstreetmap.org, right-click the spot and choose Show address; the latitude and longitude appear in the side panel. A marker with an empty or invalid latitude or longitude is skipped.

Map Tiles and MapBox

By default the map uses the free OpenStreetMap tiles. To use MapBox's street map instead, add a MapBox access token:

1. 1

   Create a token in your MapBox account.

2. 2

   Go to WordPress Dashboard → Atomic Addons → Settings.

3. 3

   In API Settings, paste it into MapBox Access Token.

4. 4

   Click Save Settings.

Every Open Street Map widget on the site then loads its tiles from MapBox. Clear the field to go back to the OpenStreetMap tiles.

Style the Open Street Map

Everything below is on the Style tab:

• Tooltip — the pop-up box that opens on a marker: text color, close button color and hover color, background, padding, border, radius, shadow and typography.
• Zoom Control — shown while Zoom Control is on: the buttons' icon color, background, border and radius, their hover colors, and the color, width, radius and shadow of the bar around them.