Osm

Improve this page

Overview

The osm field creates a OpenStreetMap where you can select a location. This field is very similar to map field, and provides an alternative solution for displaying maps, since Google requires developers to enter credit card details.

This field supports all features that the Google Maps field has. It comes along with a text field for address input, which has the autocomplete feature. The data for address autocomplete is get from Nominatum geocoding service.

You also can pick a location simply by clicking on the map or drag and drop the marker.

This field uses Leaflet library to render the map.

Screenshot

map

Settings

Besides the common settings, this field has the following specific settings:

Name Description
language Language for more accurate auto-complete results. Accepts standard rfc2616 accept-language string or a simple comma separated list of language codes. Optional.
region Limit search results to a specific country (or a list of countries). Accepts ISO 3166-1alpha2 code. Optional.
address_field The ID of address field. For multiple address fields, enter field IDs separated by comma. Required.

Note that in order to make the map works, you need to create a text field for address and pass its ID to the map’s address_field. Without the address field, the map still displays, but you have to specify the location by drag and drop the marker on the map.

The address_field can be also a list of text input fields’ IDs, separating by commas. For example: street,city,state. But in that case, there’s no autocomplete for address. Instead of that, when you click the Find Address button (below the map), the field will search for the address combined from values of those fields and set the location for the map.

Sample code

// Address field.
array(
    'id'   => 'address',
    'name' => 'Address',
    'type' => 'text',
),
// Map field.
array(
    'id'            => 'map',
    'name'          => 'Location',
    'type'          => 'osm',

    // Default location: 'latitude,longitude[,zoom]' (zoom is optional)
    'std'           => '-6.233406,-35.049906,15',

    // Address field ID
    'address_field' => 'address',
),

Data

This field saves the location in the following format latitude,longitude,zoom.

Template usage

Displaying the map

To display the map field in the frontend, we use the rwmb_meta() helper function, but we need to add more parameters:

$args = array(
    '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>.',
);
echo rwmb_meta( 'field_id', $args );
Parameter Description
width Map width, default is 640px. Can be ‘%’ or ‘px’.
height Map height, default is 480px. Can be ‘%’ or ‘px’.
zoom Map zoom, default is the value set in admin, and if it’s omitted - 14.
marker Display marker? true (default) or false.
marker_icon URL to the marker icon. Optional.
marker_title Marker title when hover.
info_window Content for the info window displayed when click the marker. HTML allowed. This content will be passed to JavaScript, so it’s better to avoid quotes.
js_options Additional map options. Map options are passed into the Leaflet library. See here.

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

$args = array(
    'width'      => '640px',
    'height'     => '480px',
    'js_options' => array(
        'doubleClickZoom' => false,
    )
);
echo rwmb_meta( 'field_id', $args );

Read more about rwmb_meta().

Getting field value

In case you don’t want to display the map, but get the location’s latitude and longitude, use the code below:

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

Read more about rwmb_get_value().

Outputting a map in a group

If you have a map inside a cloneable/non-cloneable group, then the helper functions above doesn’t work. In that case, you can use a helper function in the plugin to show the map.

$group_values = rwmb_meta( 'group_id' );
// If group is cloneable
foreach ( $group_values as $group_value ) {
    echo RWMB_Map_Field::render_map( $group_value['map_id'] );
}

The helper function RWMB_Map_Field::render_map accepts 2 parameters:

Name Description
$location The location of the map center / marker, in format latitude,longitude[,zoom] (zoom is optional). It’s the same format of the map field value.
$args Additional parameters for the map. The same as for helper function rwmb_meta above.