Usage

Field Group Admin

Return Format:

• Raw data will return an array holding the field configuration.

• Leaflet JS will return a fully functional leaflet map. Just include <?php the_field('my_field_name'); ?> in your Theme. You can choose from a long list of map styles and it supports multiple markers.

• iFrame (OpenStreetMap.org) Will return an iFrame HTML. Only four map styles are supported – the ones you find on OpenStreetMap – and not more than one marker.

Map Appearance: Pan and zoom on the map and select from the Map layers to set the initial map position and style in the editor.

Map Position: If you're more like a numbers person here you can enter numeric values for the map position.

Allow layer selection: Allow the editors to select which map layers to show up in the frontend.

Height: Map height in the frontend and editor.

Max. number of Markers

• No value: infinite markers
• 0: No markers
• Any other value: Maximum number of markers. If the return format is iFrame there can ony be one marker.

Raw Data

Raw Data provides you the possibility to use a map library of your choice in the frontend. You can use any lib out there like mapbox, OpenLayers or fall back to GoogleMaps.

The Plugin includes the Leaflet library with a modified version of Leaflet Providers and Leaflet Control Geocoder.

Getting started with Leaflet

• Leaflet Quick Start
• Leaflet Providers visible maps with code examples
• Leaflet Control Geocoder code examples.

Raw Data structure

{
    "lat": 53.5527509,
    "lng": 9.9768734,
    "zoom": 13,
    "markers": [
        {
            "label": "Marker label you entered",
            "default_label": "Marker label as returned by the geocoder",
            "lat": 53.5419803,
            "lng": 9.9487973
        },
        /* more markers ... */ 
    ],
    "address": "First marker label (Used for compatibility with ACF field)",
    "layers": [
        "OpenStreetMap.HOT",
        /* more layers ... */ 
    ],
    "version": "1.1.1",
    "center_lat": 53.5527509,
    "center_lng": 9.9768734
}

center_lat, center_lng and zoom represent the map pan and zoom state the user chose in the editor.

markers holds an array of marker objects added by the user. label is what the user entered in the editor. default_label is what has been returned by the geocoder.

layers holds the provider identifiers used by Leaflet Providers. You can pass these values directly to L.tileLayer.provider( providerKey, options ).

address, lat, lng are kept to maintain compatibility with the ACF Google Map Field, in case you ever want to switch back. address always holds the label of the first marker (if present).

Leaflet Map

If want to leave the Leaflet map intact and just add some – for example – additional navigation you might want to use the JS-Events described on the Reference Page.