How to display all CPT items on a single map

In Advanced Views, Post Selections make it easy to query and display Custom Post Type (CPT) items. With full control over the output template, you can present the results in virtually any format—including an interactive map, where each CPT item is displayed as a marker.

This approach is especially useful when you want to display multiple locations automatically. For example, if you have a Company Offices custom post type, you can show all office locations on a single map without manually adding each office to a map field.

1. Create a marker Layout

Create a new Layout that defines how each marker and its popup will appear.

Include the following fields:

• Map field – stores the coordinates used to position the marker.

• Post Title – displayed as the popup title.

• Featured Image – provides visual context.

• Excerpt – displays a brief description.

This Layout will be rendered inside each marker popup when a user clicks a marker on the map.

2. Create a marker Selection

Next, create a Post Selection that queries your custom post type.

Configure it as follows:

• Select the Layout created in the previous step.

• Set Post Type to your custom post type (for example, Events).

• Set Limit to -1 to return all matching posts.

Save the Post Selection and copy its shortcode.

Verify the query

Insert the shortcode into the page where you want the map to appear.

Save the page and verify that your posts are displayed.

At this stage, the output will simply be a list of Layouts. That's expected—the purpose of this step is only to confirm that the Post Selection returns the correct posts.

If no items appear, review your Post Selection settings before continuing.

3. Build the Map

Download the latest Leaflet JavaScript and CSS files from the official website and place them somewhere inside your theme, for example:/wp-content/themes/YOUR_THEME/assets/leaflet/

3.1) Adjust Selection template

Open the Post Selection template and replace its contents with the following template:

Twig example:

<projects-map class="{{ _selection.classes }}projects-map">
    <div class="projects-map__items">
        {% for post_id in _selection.post_ids %}
            [avf-layout id="{{ _card.view_id }}" object-id="{{ post_id }}" class="projects-map__item"]
        {% endfor %}
    </div>

    <div class="projects-map__wrapper">
        <div class="projects-map__map"></div>
    </div>

</projects-map>

This template renders every queried post using the Layout you created earlier. The rendered HTML will later become the popup content for each map marker.

3.2) Add map styles

Import Leaflet's stylesheet and add the following CSS to the Post Selection stylesheet.

@import url('/wp-content/themes/YOUR_THEME/assets/leaflet/leaflet.css');

#post-selection {
    display: block;
}

#this__items {
    display: none;
}

#this__wrapper {
    position: relative;
    width: 100%;
    height: 60vh;
}

#this__map {
    position: absolute;
    inset: 0;
}

Replace YOUR_THEME with the path to your active theme.

The rendered Layouts are hidden because they're used only as the source for marker popups—the visible output is the interactive map.

3.3) Add map JavaScript

Next, add the JavaScript that initializes the map and creates a marker for each queried item.

The Advanced Views automatically scopes JavaScript to the Post Selection and loads it only on pages where the shortcode is present, so no additional enqueue logic is required.

Add the following script:

import '/wp-content/themes/YOUR_THEME/assets/leaflet/leaflet.min.js';

let _this = this;

function setupMap(element) {
    let currentZoom = window.innerWidth < 992 ?
        0.75 :
        2;
    let minZoom = window.innerWidth < 992 ?
        0.25 :
        2;

    let map = L.map(element, {
        // todo map settings
        minZoom: minZoom,
        maxZoom: 8,
        attributionControl: false,
        zoomControl: false,
        zoomSnap: 0.25, // allow fractional zoom levels
        worldCopyJump: true,
    }).setView([40, 10], currentZoom);

    if (window.innerWidth < 992) {
        map.fitWorld();
    }

    // todo you can choose any provider from the following list https://leaflet-extras.github.io/leaflet-providers/preview/

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        bounds: [[-75, -180], [81, 180]],
    }).addTo(map);

    return map;
}

function setupMarkers(map, items) {
    let icons = {};

    let popupMaxWidth = window.innerWidth < 992 ?
        300 :
        600;

    items.forEach(item => {
        let lat = item.dataset['lat'] || 0;
        let lng = item.dataset['lng'] || 0;

        if (false === icons.hasOwnProperty(icon)) {
            icons[icon] = L.icon({
                // iconUrl: '', // todo you can put use your own icon url here
                iconSize: [49, 49], // size of the icon
                iconAnchor: [20, 49], // point of the icon which will correspond to marker's location
                popupAnchor: [5, -49] // point from which the popup should open relative to the iconAnchor
            });
        }

        let markerPosition = L.latLng(lat, lng);

        let marker = L.marker(markerPosition, {
            icon: icons[icon]
        }).bindPopup(item.outerHTML, {
            maxWidth: popupMaxWidth,
        });

        marker.addTo(map);
    });
}

function init() {
    let map = setupMap(_this.querySelector('.projects-map__map'));

    setupMarkers(map, _this.querySelectorAll('.projects-map__item'));
}

init();

Replace YOUR_THEME with the correct path to your Leaflet assets.

The comments marked with todo highlight areas you can customize, such as:

• map options

• default zoom level

• tile provider

• marker icon

Script explanation

The script consists of three main functions.

setupMap()

This function initializes the Leaflet map.

It:

• creates the map instance;

• configures the default zoom level;

• adjusts the zoom for smaller screens;

• loads the OpenStreetMap tiles;

• returns the initialized map object.

You're free to replace OpenStreetMap with any other Leaflet-compatible tile provider.

setupMarkers()

This function creates one marker for each rendered Layout.

For every .projects-map__item, it:

• reads the data-lat and data-lng attributes;

• creates a Leaflet marker;

• optionally assigns a custom icon;

• uses the rendered Layout HTML as the popup content;

• adds the marker to the map.

Since the popup contains the complete Layout HTML, you can customize its appearance using the Layout template and stylesheet.

init()

The init() function ties everything together.

It initializes the map, locates all rendered Layouts, and creates a marker for each one.

Because the script runs inside the Advanced Views Web Component, multiple maps can coexist on the same page without interfering with one another.

4. Configure the marker Layout

The final step is to expose the marker coordinates in the Layout template.

Open your Layout template and add data-lat and data-lng attributes to the root element.

Twig example:

<project-map-item
    class="{{ _view.classes }} project-map-item project-map-item--id--{{ _view.id }} project-map-item--object-id--{{ _view.object_id }}"
    data-lat="{{ location.lat }}" data-lng="{{ location.lng }}">

Replace location with the variable corresponding to your own map field. (you can identify the correct variable by inspecting the automatically generated Layout template)

The data-lat and data-lng attributes are used by the JavaScript to position each marker on the map.

Everything rendered by the Layout becomes the popup content, so you can freely customize the markup, styles, and additional fields displayed when users click a marker.

5. Summary

Reload the page containing your Post Selection shortcode, and you should see an OpenStreetMap displaying your custom post type items as markers. Clicking a marker will open a popup containing the content rendered by your Layout.

This example provides a solid foundation that you can extend to suit your project's requirements. For example, you can store a custom marker icon in an Image field and expose its URL through a data attribute, allowing each item to display its own marker image.

If your map contains a large number of markers, consider using the Leaflet Marker Cluster plugin. It groups nearby markers into clusters and automatically expands them as users zoom in, improving both performance and usability.

Leaflet offers a rich ecosystem of plugins and customization options, making it easy to add features such as marker clustering, filtering, custom controls, route overlays, heatmaps, or alternative tile providers as your project evolves.