conflict with buddypress activity plus

at first glance it looks like you have some invalid JS in there, somehow:

`
var baseUrl = ‘https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png’,
base = (!baseUrl && window.MQ) ?
`

Also looks like you’re loading Google Maps API several times. The console is throwing errors. Perhaps BuddyPress is executing shortcodes but sanitizing the output to remove JavaScript. I can look into solving this, but that’s the gist of it.

hi bozdoz,

thank you very much for your quick reply. The weird thing is that it works with “normal” buddypress posts => e.g. https://www.via-ferrata.de/members/ralf/activity/16407/
but when I use an image upload (through buddypress activity plus) together with the leaflet map shortcode in an activtity post – only the uploaded image is shown and not the map!
when I delete the image from the activity post in the backend then the map will be shown.
what do I have to change?
Thank you for your support!

another issue that I recognized is that the leaflet maps do not show up in the buddypress activity stream https://www.via-ferrata.de/gipfelbuch/ directly – even if I click on “read more” with expanded text I then see only the shortcode (see here https://we.tl/t-GC68kfeI1p – why and how can this be fixed?)

@bozdoz Do you know meanwhile why the leaflet map is shown here https://www.via-ferrata.de/members/ralf/activity/16400/ but not here https://www.via-ferrata.de/members/ralf/activity/16413/
Same posts with same included shortcodes but in the second is also a buddypress activity Image upload via the plugin buddypress activity plus done. Can you reproduce this behaviour on your Installation?

• This reply was modified 6 years, 5 months ago by bergblume.

still that illegal character issue; i can try it out on my end at some point; I don’t really know enough about buddypress though; Any content I can try? Are there buddypress shortcodes? some setting I should have toggled?

Hi Bozodz,

can you pls. try the following
1) Install Buddypress and Buddypress Activity Plus
2) Go to Buddypress Activity Site and make a post. There you can use the leaflet map Shortcode(s) so that you should see the leaflet in your post (same as here https://www.via-ferrata.de/members/ralf/activity/16400/ )
3) make a new buddypress post but also use the image uploader of buddypress activity plus TOGETHER with posting a leaflet map shortcode – now you should have the issue that the uploaded image will be shown in the Buddypress Activity post but NOT the leaflet map (same as here https://www.via-ferrata.de/members/ralf/activity/16413/ )

Thank you for looking at this problem!

• This reply was modified 6 years, 5 months ago by bergblume.

I had a lot of issues with it. Here’s what appears to be happening:

Buddypress is escaping the && in the JavaScript code.

I only got that to work if I enabled shortcodes in the buddypress activities; like so:

// Enable Shortcodes for Side-wide Activity Stream
function leaflet_add_shortcodes_to_activity_stream() {
	add_filter( 'bp_get_activity_content_body', 'do_shortcode', 10 );
}
add_action('bp_init', 'leaflet_add_shortcodes_to_activity_stream');

that 10 might help you get past the escaping && error.

However, in my tests, I noticed it was loading via ajax, which meant that the wordpress scripts and styles weren’t queued! So I also included this in my functions.php file to force leaflet to load css and js on every page (currently it loads only if there’s a map being rendered. Kind of surprised that this hasn’t been an issue before. I suppose most people/plugins/themes aren’t getting their pages via ajax. Anyway, if you’re interested, here’s how I got the JS/CSS to queue on all pages:

function leaflet_always_enqueue_leaflet () {
	include_once LEAFLET_MAP__PLUGIN_DIR . 'class.plugin-settings.php';
	$settings = Leaflet_Map_Plugin_Settings::init();

	$js_url = $settings->get('js_url');
	$css_url = $settings->get('css_url');

	wp_enqueue_style('leaflet_stylesheet', $css_url, Array(), null, false);
	wp_enqueue_script('leaflet_js', $js_url, Array(), null, true);
}

add_action('leaflet_map_loaded', 'leaflet_always_enqueue_leaflet');

Hope this helps.

• This reply was modified 6 years, 5 months ago by bozdoz.

hi bozdoz,

thank you very much for your reply and your suggestion. But it still does not work together with the image upload by buddypress Activity Plus.

Did you also install Buddypress Activity Plus and processed an image upload TOGETHER with leaflet map shortcode.

As mentioned normal buddypress posts with leaflet map shortcode work well – but in combination with buddypress activity plus it does not work. And in this constellation I still also get the && javascript error.

I googled a little bit – might this perhaps help

• This reply was modified 6 years, 5 months ago by bergblume.

hi Bozdoz,

I could not solve this problem that is only occurring with buddypress activity plus plugin activitad (and doing an image upload together with posting a leaflet map shortcode within a buddypress activity post).
So I now changed to RTMedia (a similar image uplaod tool for buddypress) so it will work as I need it:
https://www.via-ferrata.de/members/ralf/activity/16439/

Looks really cool! thanks for sharing! I wasn’t able to get the image upload to work with the activity plus plugin either.

@bozdoz – thank you for your compliment. Yes, I also struggled with this! Good that there are enough alternatives within WordPress ??
Have a nice afternoon!

I have still another idea – is it possible to include the shortcode helper (map) also in a front end post, so that other users can also use it for generating leaflet map shortcodes?

definitely possible; you’d have to enqueue the shortcode helper js (or equivalent) into a certain page/template, and also include inputs. Something like:

[leaflet-map]
[leaflet-marker draggable=1 visible="true"]Drag me[/leaflet-marker]

Move the map and the marker to generate shortcodes below:
<input type="text" id="map-shortcode" readonly="readonly" />
<input type="text" id="marker-shortcode" readonly="readonly" />

from here: https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/templates/shortcode-helper.php

And enqueue the script somehow in your functions.php:

function leaflet_enqueue_shortcode_helper () {
	$js_url = LEAFLET_MAP__PLUGIN_DIR . 'scripts/shortcode-helper.js';

	wp_enqueue_script('leaflet_shortcode_js', $js_url, Array('wp_leaflet_map'), null, true);
}

add_action('leaflet_map_loaded', 'leaflet_enqueue_shortcode_helper');

Which is just enqueuing this: https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/scripts/shortcode-helper.js

You should make sure it’s only being enqueued for that one map though; and not all of them. Or just copy/paste that script and adjust it as necessary. Maybe just do:

if (!map_1 || !map_input) {
  return
}