Troubleshooting maps not displaying with MaxiBlocks and content security policy

If you're using the MaxiBlocks plugin and theme to build your WordPress site, you might encounter an issue where the Map Maxi block is visible in the Editing Experience (EE) but fails to display on the frontend Visitor Experience (VE) of your published site.

In many cases, this problem arises due to the server's content security policy blocking the required external scripts and resources needed for the map to function properly.

Diagnosing the issue

To determine if a content security policy is causing the map to not display:

1. Check if the Map Maxi block appears and works correctly in the WordPress block editor (EE).
2. View the published page on the frontend (VE) and verify that the map is not visible.
3. Open your browser's developer console and look for any error messages related to content security policy.

For the MaxiBlocks Map Maxi block, the content security policy errors will likely mention the following blocked domains:

• https://unpkg.com - This domain hosts the Leaflet JavaScript library required for the map functionality.
• https://*.openstreetmap.org - The map tiles (images) are loaded from this domain.

If you see errors related to these domains being blocked, you'll need to add exceptions for them in your server's content security policy.

Resolving the issue

To fix the content security policy issue and allow the Map Maxi block to display correctly, you have two options:

Option 1: Install a content security policy plugin (recommended)

1. Install and activate the Cookies and Content Security Policy plugin.
2. In your WordPress dashboard, go to Settings → Cookies and Content Security Policy.
3. In the "Content Security Policy" tab, locate the "script-src" and "img-src" directives.
4. Add https://unpkg.com to the "script-src" directive and https://*.openstreetmap.org to the "img-src" directive.
5. Save your changes.

The map should now display correctly on your site's frontend.

Option 2: Contact your hosting provider

If you prefer not to use a plugin, you can contact your hosting provider and ask them to update your server's content security policy to include exceptions for https://unpkg.com and https://*.openstreetmap.org . Provide them with the error messages from your browser console to help them understand the issue.

Summary

If your Map Maxi block is not displaying on your site's frontend, despite being visible in the backend editor, the likely culprit is your server's content security policy blocking the necessary external resources.

By adding exceptions for https://unpkg.com and https://*.openstreetmap.org , either through a plugin or by contacting your hosting provider, you should be able to resolve the issue and have your maps displaying correctly.

Remember to always check your browser's developer console for errors when troubleshooting display issues, as it can quickly help you diagnose problems related to content security policy. If you continue to have problems or need further assistance, we're here to help.