Open Street Map

import Screenshots from '@site/src/components/Screenshots';

The Open Street Map (OSM) field lets you select and save a location using OpenStreetMap.

It's very similar to the Google Maps field, but it provides a free alternative since Google now requires billing details (such as a credit card) to use their maps.

This field includes all the features of the Google Maps field. It comes with an address text field that supports autocomplete, powered by the Nominatim geocoding service.

You can choose a location in two ways:

• Type in an address and select from the autocomplete suggestions.
• Click directly on the map or drag the marker - the field will automatically save the new coordinates.

The map itself is rendered using the Leaflet library.

Screenshots

<Screenshots name="osm" col1={[ ['https://imgur.elightup.com/jJXmxrw.png', 'The Open Street Map field interface'] ]} />

Settings

In addition to the common field settings, this field has the following options:

:::warning Address field required You must create a text field for the address input, and pass its ID to the map's Address field setting. :::

The address_field can also be a list of multiple field IDs, separated by commas (e.g. street,city,state). In this case:

• You can use both text and select fields.
• Autocomplete will not work. Instead, the plugin will combine the values of these fields, search for the full address, and update the map whenever any of those fields changes.

Example field setup in code:

// Address field
[
    'id'   => 'my_address',
    'name' => 'Address',
    'type' => 'text',
],
// Map field
[
    'id'            => 'map',
    'name'          => 'Location',
    'type'          => 'osm',
    'std'           => '-6.233406,-35.049906,15',
    'address_field' => 'my_address',
],

Data

The field saves the location as:

latitude,longitude,zoom

Example: 53.346881,-6.258860,14

Template usage

Displaying the map

To show the map on the frontend, use rwmb_the_value() with extra parameters:

<h2>Maps</h2>
<?php
$args = [
    'width'        => '640px',
    'height'       => '480px',
    'zoom'         => 14,
    'marker'       => true,
    'marker_icon'  => 'https://url_to_icon.png',
    'marker_title' => 'Click me',
    'info_window'  => '<h3>Title</h3><p>Content</p>.',
];
rwmb_the_value( 'my_field_id', $args );
?>

Available parameters:

The code below shows how to use js_options for advanced control how the map is displayed:

$args = [
    'width'      => '640px',
    'height'     => '480px',
    'js_options' => [
        'doubleClickZoom' => false,
    ],
];
rwmb_the_value( 'my_field_id', $args );

Getting the raw field value

If you don't need to render the map but just want the coordinates:

$location = rwmb_get_value( $field_id );
echo $location['latitude'];
echo $location['longitude'];
echo $location['zoom'];

See more about rwmb_get_value().

Displaying a map inside a group

If the map is part of a group field, the helper functions above won't work. Instead, use the built-in RWMB_OSM_Field::render_map() helper:

$args = [
    'width'  => '640px',
    'height' => '480px',
];
$group_values = rwmb_meta( 'group_id' );
// If the group is cloneable
foreach ( $group_values as $group_value ) {
    echo RWMB_OSM_Field::render_map( $group_value['map_id'], $args );
}

The helper function accepts: