Right and left button, and chart elevation repeated

Sorry for writing the first paragraph, I had written: I’ve had a problem recently. On a first map, the left buttons (fullscreen, zomehome map) and right button (layerswitch) are repeated twice. Similarly, the bottom chart (for elevation and slope) is repeated twice. Strange fact: if I add another map on the same page, the first one is displayed correctly, but the second one displays the left and right buttons three times, and the chart three times.

You want to display 4 maps, each with a track and a chart? Or would you like to display all tracks in one map and get a chart on mouse over a track (multielevation)?

Yes, I only want to display several maps in one page, each with a track and a chart (not a multielevation). But when I display only one map with one track, I already have this issue.

If I interpret the html source code, you have 2 leaflet-map instructions and 4 elevation instructions loading 2x the same gpx file. Like:

[leaflet-map]
[elevation gpx="file1"]
[leaflet-map]
[elevation gpx="file2"]
[elevation gpx="file1"]
[elevation gpx="file2"]

It should be

[leaflet-map]
[elevation gpx="file1"]
[leaflet-map]
[elevation gpx="file2"]
[leaflet-map]
[elevation gpx="file3"]
[leaflet-map]
[elevation gpx="file4"]

Check the other shortcodes, how many times did you specify them? and where?

<span class=”HwtZe” lang=”en”><span class=”jCAhz ChMk0b”><span class=”ryNqvb”>In my page (article), I have only two blocks of short code to generate two maps (with Divi builder).</span></span></span> The first one:

[leaflet-map mapid="GeoportailFrance.plan" fitbounds scrollwheel]
[layerswitch tiles="OpenStreetMap.Mapnik"]
[elevation gpx="https://www.alpes-sud-photos.com/dev/wp-content/uploads/2023/01/GR4_ETAPE_1_gen.gpx"]
[fullscreen]
[zoomhomemap]

<style>
.elevation-waypoint-icon.icon-green:before {
	background: url(https://www.alpes-sud-photos.com/dev/wp-content/uploads/2023/01/icon-green.png) no-repeat 50%/contain;
}
.elevation-waypoint-icon.icon-blue:before {
	background: url(https://www.alpes-sud-photos.com/dev/wp-content/uploads/2023/01/icon-blue.png) no-repeat 50%/contain;
}
.elevation-waypoint-icon.icon-red:before {
	background: url(https://www.alpes-sud-photos.com/dev/wp-content/uploads/2023/01/icon-red.png) no-repeat 50%/contain;
}
</style>

and the second one:

[leaflet-map mapid="GeoportailFrance.plan" fitbounds scrollwheel]
[layerswitch tiles="OpenStreetMap.Mapnik"]
[elevation gpx="https://www.alpes-sud-photos.com/dev/wp-content/uploads/2023/01/GR4_ETAPE_2_gen.gpx"]
[fullscreen]
[zoomhomemap]

<style>
.elevation-waypoint-icon.icon-green:before {
	background: url(https://www.alpes-sud-photos.com/dev/wp-content/uploads/2023/01/icon-green.png) no-repeat 50%/contain;
}
.elevation-waypoint-icon.icon-blue:before {
	background: url(https://www.alpes-sud-photos.com/dev/wp-content/uploads/2023/01/icon-blue.png) no-repeat 50%/contain;
}
.elevation-waypoint-icon.icon-red:before {
	background: url(https://www.alpes-sud-photos.com/dev/wp-content/uploads/2023/01/icon-red.png) no-repeat 50%/contain;
}
</style>

I don’t understand why I have so many elevation ? I have specified one elevation gpx for each map (leaflet-map) in my short code ?

In html source code, I should have only:

[leaflet-map]
[elevation gpx="file1"]
[leaflet-map]
[elevation gpx="file2"]

The last two lines that appear additionally [elevation gpx=”file1″] and [elevation gpx=”file2″] shouldn’t exist. I don’t understand why it appears in my html code ?

I think the problem appeared after testing on the same page a map with one gpx track, then another map with multiple gpx tracks. Then, even when creating a new page, this duplication problem remained on my maps. Do I have to uninstall and reinstall the plugin Extensions for Leaflet Map to try to solve this problem?

Can you test please:

[leaflet-map fitbounds]
[leaflet-gpx src="file1.gpx"]

Does this work?

[leaflet-map fitbounds]
[leaflet-gpx src="file1.gpx"]
[leaflet-map fitbounds]
[leaflet-gpx src="file2.gpx"]

Does this work?

[leaflet-map fitbounds]
[leaflet-gpx src="file1.gpx"]
[zoomhomemap]
[leaflet-map fitbounds]
[leaflet-gpx src="file2.gpx"]
[zoomhomemap]

Does this work?

I tested. The first two codes work. But I have the problem (buttons and chart repeated) with the last code.

I rectify the previous message: only the first code works, the following two display in the second map the two gpx traces.

This does not work? Right?

[leaflet-map fitbounds]
[leaflet-gpx src="file1.gpx"]
[leaflet-map fitbounds]
[leaflet-gpx src="file2.gpx"]

Do you have a link to this page?

No, unfortunately this code does not work. The link to this page : https://www.alpes-sud-photos.com/dev/gr4-5-etapes-en-saintonge/

I suspect, the reason is the Complianz plugin. Maybe this helps.

Thank you for your answer.

Indeed, Complianz is at the origin of the malfunctions. By disabling the plugin, I no longer encounter any problems. The difficulty is that you cannot disable Complianz for another plugin like LeafletMap. The link you gave me https://complianz.io/leaflet-maps/ is interesting, but the MU-plugin in php is designed for OpenStreetMap. However, I use the maps from GeoportailFrance by default (https://leaflet-extras.github.io/leaflet-providers/preview/). How can I modify the php code to make it work with the GeoportailFrance? Here is the php code of the MU-plugin:

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

add_filter( 'cmplz_known_script_tags', 'cmplz_leafletmaps_directory_script' );
function cmplz_leafletmaps_directory_script( $tags ) {
	$tags[] = array(
		'name' => 'openstreetmaps',
		'category' => 'marketing',
		'placeholder' => 'openstreetmaps',
		'urls' => array(
			'WPLeafletMapPlugin',
		),
		'enable_placeholder' => '1',
		'placeholder_class' => 'leaflet-map',
		'enable_dependency' => '1',
		'dependency' => [
			//'wait-for-this-script' => 'script-that-should-wait'
			'leaflet.js' => 'leaflet-gesture-handling-leafext.min.js',
		],
	);
	return $tags;
}

/**
 * Add services to the list of detected items, so it will get set as default, and will be added to the notice about it
 *
 * @param $services
 *
 * @return array
 */

function cmplz_leafletmaps_directory_detected_services( $services ) {
	if ( ! in_array( 'openstreetmaps', $services ) ) {
		$services[] = 'openstreetmaps';
	}

	return $services;
}

add_filter( 'cmplz_detected_services', 'cmplz_leafletmaps_directory_detected_services' );

I tested the script, it works. But I changed the lines:

enable_dependency' => '0',
		'dependency' => [
			//'wait-for-this-script' => 'script-that-should-wait'
			//'leaflet.js' => 'leaflet-gesture-handling.min.js',
		],

If you can confirm this, I would report it. And “openstreetmaps” is a placeholder and it has nothing to do with the tile server used.