Block leaflet map before consent

I tried different things now, including what was suggested in the linked thread and here.

– If I block the scripts as in the thread, the map does not load properly even after accepting the cookies.

– With the 3rd party integration guide, I already got stuck with the first part to add the plugin to the settings list. Not sure where the piece of code should go. I guessed mu-plugins/ and also tried plugins/complianz-gdpr/integrations/plugins, but none of these seem to be correct.

Looking forward to your help ??

• This reply was modified 3 years, 6 months ago by akoelsch.

Meanwhile, I stumbled across this and managed to block the map and get it to load after consent. I did not yet try to include a placeholder, though.

However, I have two problems with the approach above:
1.) it slows down the page loading by a lot
2.) it’s no better regarding gdpr, because a CSS file is still loaded from unpkg.com and I don’t know how to block that.

If someone could show me a working example of how to integrate this plugin in complianz, I’m happy to do the rest of the coding.

Maybe we could even do a proper integration like with OSM where you can turn it on and off in the settings. Right now, I’m writing a mu-plugin for my own purpose. Since Leaflet maps are quite popular, I think there are many people who would appreciate it.

Best regards

Hi @akoelsch,

Our apologies for the delayed reply, we are usually faster in responding :-).

I am happy to see that you are on the right track in creating an integration for this plugin. You have found the correct implementation, but possibly a script dependency prevents the integration from working correctly.

I currently see the place where the map should appear, but it doesn’t seem to be appearing after consent anymore. Did you change anything after placing the above comment?

As a temporary/quick fix, you could always consider using the consent shortcode: https://complianz.io/wrapping-content-in-consent-shortcodes/

Would it be possible to share the URL of a page where you have the above-mentioned integration working? If you prefer working on the integration via email, you can reach out to us via the support form at https://complianz.io/support as well.

Kind regards,
Leon

Hi Leon,
yes, I’m actively testing stuff at the moment, so things may break sometimes. Right now, I am at a state where almost everything works, including the placeholder. However, if I accept the cookies, the map is not loaded before a page refresh.

This shortcode wrapper would actually do the job, too. Thanks for the hint

While this shortcode does work perfectly, I would actually prefer a nice placeholder. As said, I’m almost there. The only thing that does not work, yet is the automatic loading of the map after consent. Right now I still have to refresh the page. Here’s my mu-plugin code:

<?php

defined( 'ABSPATH' ) or die( "you do not have acces to this page!" );

/**
 * Block the script, and an inline script with string 'initMap'.
 * initMap can also be something else. That's the problem with custom maps :)
 *
 * @param $tags
 *
 * @return array
 */
function cmplz_leaflet_script( $tags ) {
    $tags[] = 'construct-leaflet-map.min.js';
    $tags[] = 'window.WPLeafletMapPlugin.maps';
    $tags[] = 'safari.js';

	return $tags;
}
add_filter( 'cmplz_known_script_tags', 'cmplz_leaflet_script' );

/**
 * Conditionally add the dependency
 * $deps['wait-for-this-script'] = 'script-that-should-wait';
 */

function cmplz_leaflet_dependencies( $tags ) {
    $tags['construct-leaflet-map.min.js'] = '';
    $tags['window.WPLeafletMapPlugin.maps'] = '';
    $tags['safari.js'] = '';

	return $tags;
}
add_filter( 'cmplz_dependencies', 'cmplz_leaflet_dependencies' );

/**
 * Add a placeholder to a div with class "my-maps-class" - add CSS class to Column of Advanced Google Maps 
 * @param $tags
 *
 * @return mixed
 */
function cmplz_leaflet_placeholder( $tags ) {

	$tags['openstreetmaps'][] = "leaflet-map WPLeafletMap";
	return $tags;

}
add_filter( 'cmplz_placeholder_markers', 'cmplz_leaflet_placeholder' );

Looking forward to your help ??

PS: The page I’m referring to is still the one from the start post

• This reply was modified 3 years, 6 months ago by akoelsch.

Hi @akoelsch,

Thank you for your reply and attaching your current code.

We will set up the Leaflet & Extension for Leaflet plugins locally and do some testing of our own, so I hope to get back to you with an update about this soon.

Kind regards,
Jarno

Cool, thank you very much!

PS: The problem of the non-blocked CSS file can be avoided by self-hosting this file.

• This reply was modified 3 years, 6 months ago by akoelsch.

Hi @akoelsch,

Excuse me for taking a while to get back to you about this.

For the “regular” Leaflet Maps, you can use this script as an MU Plugin to block/add a placeholder prior to consent: https://github.com/Really-Simple-Plugins/complianz-integrations/blob/master/leaflet-maps.php

We have also taken a look at Extensions for Leaflet, but this needs some further investigation. This specific plugin presents a bit of a challenge because it has a variety of dependencies. We will add this to our list of Feature Requests.

Hope this helps for now!
Kind regards,
Jarno

Hey, thanks for your response. Your snippet did actually help me. Even though I do not fully understand all the filters, I now managed to block the maps and automatically load them after consent. Here’s the mu-plugin I use:

<?php

defined( 'ABSPATH' ) or die( "you do not have acces to this page!" );

/**
 * Block the script, and an inline script with string 'initMap'.
 * initMap can also be something else. That's the problem with custom maps :)
 *
 * @param $tags
 *
 * @return array
 */
function cmplz_leaflet_script( $tags ) {
    $tags[] = 'WPLeafletMapPlugin';

	return $tags;
}
add_filter( 'cmplz_known_script_tags', 'cmplz_leaflet_script' );

/**
 * Conditionally add the dependency
 * $deps['wait-for-this-script'] = 'script-that-should-wait';
 */

function cmplz_leaflet_dependencies( $tags ) {
    $tags['construct-leaflet-map.min.js'] = '';
    $tags['window.WPLeafletMapPlugin.maps'] = '';
    $tags['safari.js'] = '';

	return $tags;
}
add_filter( 'cmplz_dependencies', 'cmplz_leaflet_dependencies' );

/**
 * Add a placeholder to a div with class "my-maps-class" - add CSS class to Column of Advanced Google Maps 
 * @param $tags
 *
 * @return mixed
 */
function cmplz_leaflet_placeholder( $tags ) {

	$tags['openstreetmaps'][] = "leaflet-map WPLeafletMap";
	return $tags;

}
add_filter( 'cmplz_placeholder_markers', 'cmplz_leaflet_placeholder' );

Is there a documentation page explaining all the filters or could you explain to me what cmplz_detected_services is doing? Apparently, my plugin works fine without it.

Hi @akoelsch,

Thank you for the quick reply. Indeed, it’s not necessary to include the part with “cmplz_detected_services”.

We’ve included this so that when Leaflet Maps is found, we automatically enable the checkbox for “OpenStreetMaps” in the list of Services. It’s nice to have, but not required to work properly.

Hope this clarifies!
Kind regards,
Jarno

Just one last remark. Aren’t you missing the following line in your code?

add_filter( 'cmplz_dependencies', 'cmplz_leafletmaps_directory_plugin_dependencies' );

Hi @akoelsch,

The leafext.min.js scripts are dependencies of Leaflet Extensions, the ‘regular’ Leaflet Map works without it.

Kind regards,
Jarno