Display all WP CPT items on a single map

Hi @goldmichel

AVF can be used to simplify DB query mastering, and layout generation, but you’ll need to download the leaflet manually, as it’s described in the article.

Therefore;
1. You create a single Card to query all three CPTs (as you can define multiple in the Post Type setting of Card)
2. You create a View to display results (as per the chapter).
3. You then download the leaflet to your theme, as it described in this chapter: https://wplake.org/blog/embed-maps-in-wordpress/#1-add-the-leafletjs-library-to-your-theme_o6mr
4. After that you’ll get the single map with all the items on it.

Hi @goldmichel

Let’s break down the pieces.

1. You have 1 Card with 3 Views inside, that looks correct.
2. The View items have the default template, which displays the Leaflet maps, instead of containing the marker data in HTML attributes, so this is incorrect.

To fix this, Complete the step “5.7) Marker details in View” – https://wplake.org/blog/embed-maps-in-wordpress/#57-marker-details-in-view_v56f

Template note: The code there is made for a single-marker Google map, so when using the ACF OSM addon, it should be changed to the loop, like below:

{% for marker in os_map.value %}
<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="{{ marker.lat }}" data-lng="{{ marker.lng }}">
{% endfor %}

View setting note:
You should also enable the ‘Show address from the map’ setting in the Field Options (which is an AVF Pro feature), to load ‘lat’ and ‘lng’ keys.
(It’s necessary only for the OSM vendor, for Google the lat and lng are loaded by default.)