Display all WP CPT items on a single map

I pasted here..

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.

Hello,
I just can’t get it to work. I went through the instructions step by step several times…
But there are still 3 cards, one for each CPT.

leaflet is installed on my host. At least the test card “London” worked and also appears in the DevTools Sources. Leaflet show an error in DEVTools “Source map failed to load”
Could that be causing the problem?

The connection to the CPT works, otherwise it wouldn’t show the three markers, right?

I think that JS code is the problem. It has to be inserted into the AVF card under CSS&JS, right?

Do you have any other idea what could be wrong?

I use the Hello Theme and Elementor Pro.

Best regards
Michael

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.)

@goldmichel There’s been no reply for a while now, so we’re going to close this ticket.

Feel free to reply here if you still need assistance.