matbe81

Something else: same issue on version difference on this page:
Prod (3.0.2):
https://epicside.be/destination/australia/

Dev (3.1.0):
https://dev.epicside.be/destination/australia/

The map simply don’t appears at all in dev.

Code is the same:

global $site, $destination_current, $page_current;
//e($destination_current);

if ($page_current['type'] == "destination") {

	if (isset($destination_current['lat']) && !empty($destination_current['lat']) &&
		 (isset($destination_current['lng']) && !empty($destination_current['lng'])
		 )){

	echo do_shortcode("[leaflet-map zoom=".$destination_current['map_zoom']." lat=". $destination_current['lat']." lng=". $destination_current['lng']." maxbounds=". $destination_current['lat'].",". $destination_current['lng'].";".$destination_current['lat'].",". $destination_current['lng']." detect-retina zoomcontrol dragging !scrollwheel !attribution !touchZoom !keyboard tileurl='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png' subdomains='abc']");

	// Destination Marker
	echo do_shortcode("[leaflet-marker fitbounds title='".$destination_current['name_fr']."' iconUrl='".$site['markers']['full']."' iconclass='marker_icon' iconSize='".$site['marker']['icon_size']."' lat=". $destination_current['lat']." lng=". $destination_current['lng']." iconAnchor='".$site['marker']['icon_anchor']."' shadowUrl='".$site['markers']['shadow']."' shadowSize='".$site['marker']['shadow_size']."' shadowanchor='".$site['marker']['shadow_anchor']."' maxWidth='150']".$destination_current['name_fr']."[/leaflet-marker]");

			//	$code_markers .= "[leaflet-marker fitbounds title='".$country_fr.(!empty($parent_fr)?", ".$parent_fr:"").chr(13).$country_local.(!empty($parent_local)?", ".$parent_local:"")."' lat=". $lat." lng=". $lng." iconUrl='/wp-content/uploads/logos/epicside_icon_location_frontwhite_backcolor_nonframed_square_marker.svg' iconclass='marker_icon' iconSize='45.55,50' iconAnchor='20.46,48.293' shadowUrl='/wp-content/uploads/logos/epicside_icon_location_frontcolor_backwhite_framed_marker_shadow.svg' shadowSize='122.03,35.47' shadowanchor='11.891,34.521' maxWidth='150']".($has_link?"<a href='".$link."' target='_blank'>":"").$mainflag."<div class='leaflet-marker-titlecontainer'>".$title.$subtitle."</div>".($has_link?"</a>":"")."[/leaflet-marker]";

echo do_shortcode("[leaflet-geojson src='/countries.json?country=".$destination_current['code']."']");

	
	// Country marker
	$flag_url = $site["base_flags"].$destination_current['code'].".svg";
	//echo do_shortcode("[leaflet-marker title='".$destination_current['name_fr']."' lat=". $destination_current['country_lat']." lng=". $destination_current['country_lng']." iconUrl='".$flag_url."' iconSize='".$site['marker']['flag_size']."' iconAnchor='".$site['marker']['flag_anchor']."']".$destination_current['name_fr']."[/leaflet-marker]");

	// Parent Country marker
		if (!empty($destination_current['parent_country_code']) && !empty($destination_current['parent_country_lat']) && !empty($destination_current['parent_country_lng'])){
			$flag_url = $site["base_flags"].$destination_current['parent_country_code'].".svg";
			echo do_shortcode("[leaflet-marker title='".$destination_current['parent_country_fr']."' lat=". $destination_current['parent_country_lat']." lng=". $destination_current['parent_country_lng']." iconUrl='".$flag_url."' iconSize='".$site['marker']['flag_size']."' iconAnchor='".$site['marker']['flag_anchor']."']".$destination_current['parent_country_fr']."[/leaflet-marker]");
		}
	}
	
}
?>

I changed it to that:

echo do_shortcode(“[leaflet-map zoom=”.$experience_current[‘map_zoom’].” lat=”. $experience_current[‘lat’].” lng=”. $experience_current[‘lng’].” maxbounds=”. $experience_current[‘lat’].”,”. $experience_current[‘lng’].”;”.$experience_current[‘lat’].”,”. $experience_current[‘lng’].” detect-retina zoomcontrol dragging !scrollwheel !attribution !touchZoom !keyboard tileurl=’https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg’]”);

Seems better. WDYT?

No difference in shortcode generator :

<?php
global $site, $experience_current;

if (isset($experience_current['lat']) && !empty($experience_current['lat']) &&
	 (isset($experience_current['lng']) && !empty($experience_current['lng'])
	 )){
   
echo do_shortcode("[leaflet-map zoom=".$experience_current['map_zoom']." lat=". $experience_current['lat']." lng=". $experience_current['lng']." maxbounds=". $experience_current['lat'].",". $experience_current['lng']." detect-retina zoomcontrol dragging !scrollwheel !attribution !touchZoom !keyboard tileurl='https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg']");

// Experience Marker
echo do_shortcode("[leaflet-marker title='".$experience_current['location']."' iconUrl='".$site['markers']['normal']."' iconclass='marker_icon' iconSize='".$site['marker']['icon_size']."' iconAnchor='".$site['marker']['icon_anchor']."' shadowUrl='".$site['markers']['shadow']."' shadowSize='".$site['marker']['shadow_size']."' shadowanchor='".$site['marker']['shadow_anchor']."' maxWidth='150']".$experience_current['location']."[/leaflet-marker]");

	//		$code_markers .= "[leaflet-marker title='".$experience_value["location"].", ".$experience_value["country_fr"]."' lat=". $experience_value["lat"]." lng=". $experience_value["lng"]." iconUrl='/wp-content/uploads/logos/epicside_icon_location_frontcolor_backwhite_framed_marker.svg' iconclass='marker_icon' iconSize='45.55,50' iconAnchor='20.46,48.293' shadowUrl='/wp-content/uploads/logos/epicside_icon_location_frontcolor_backwhite_framed_marker_shadow.svg' shadowSize='122.03,35.47' shadowanchor='11.891,34.521' maxWidth='150']<a href='".$link."' target='_blank'>".$image."<div class='leaflet-marker-titlecontainer'>".$title.$subtitle."</div>"."</a>"."[/leaflet-marker]";
	
// Country marker
$flag_url = $site["base_flags"].$experience_current['country_code'].".svg";
echo do_shortcode("[leaflet-marker title='".$experience_current['country_fr']."' lat=". $experience_current['country_lat']." lng=". $experience_current['country_lng']." iconUrl='".$flag_url."' iconSize='".$site['marker']['flag_size']."' iconAnchor='".$site['marker']['flag_anchor']."']".$experience_current['country_fr']."[/leaflet-marker]");

// Parent Country marker
	if (!empty($experience_current['parent_country_code']) && !empty($experience_current['parent_country_lat']) && !empty($experience_current['parent_country_lng'])){
		$flag_url = $site["base_flags"].$experience_current['parent_country_code'].".svg";
		echo do_shortcode("[leaflet-marker title='".$experience_current['parent_country_fr']."' lat=". $experience_current['parent_country_lat']." lng=". $experience_current['parent_country_lng']." iconUrl='".$flag_url."' iconSize='".$site['marker']['flag_size']."' iconAnchor='".$site['marker']['flag_anchor']."']".$experience_current['parent_country_fr']."[/leaflet-marker]");
	}
}
?>

Only differerence is version:

Prod env (3.0.2):
https://epicside.be/experience/observer-les-manchots-a-boulders-beach/

Dev env (3.1.0):
https://dev.epicside.be/experience/observer-les-manchots-a-boulders-beach/

As you can see, position of the map is totally wrong on dev env. So something definitely changes between those 2 versions.

OK and it work fine include version 3.0.2 but not anymore in version 3.1.0 using same code.

As i use wordpress shortcodes, i think it’s automatically send when map is in “ready” state.

Please keep me in touch on the bug resolution which didn’t affect version 3.0.2

Thank you! But isn’t possible to set that directly in PHP for cleaner integration?

Please note I don’t want to use fitbounds on map layer as I want the experience (boulder beach in the example is always centered.

So I added lat & lng to the experience marker and only require to fix the maxBound setting:

// Map
echo do_shortcode("[leaflet-map lat=". $experience_current['lat']." lng=". $experience_current['lng'] . " zoom=".$experience_current['map_zoom']." detect-retina zoomcontrol dragging !scrollwheel !attribution !touchZoom !keyboard tileurl='https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg']");

// Experience Marker
echo do_shortcode("[leaflet-marker lat=". $experience_current['lat']." lng=". $experience_current['lng'] . " title='".$experience_current['location']."' iconUrl='".$site['markers']['normal']."' iconclass='marker_icon' iconSize='".$site['marker']['icon_size']."' iconAnchor='".$site['marker']['icon_anchor']."' shadowUrl='".$site['markers']['shadow']."' shadowSize='".$site['marker']['shadow_size']."' shadowanchor='".$site['marker']['shadow_anchor']."' maxWidth='150']".$experience_current['location']."[/leaflet-marker]");

Play attention to ‘maxbounds=”. $experience_current[‘lat’].”,”. $experience_current[‘lng’]’.

How should i adapt it to have the correct calculation? It looks to be the only issue as when I completely remove it, the marker are well positioned.

https://dev.epicside.co/experience/observer-les-manchots-a-boulders-beach/

But for your consideration, the incorrect maxBounds setting was present for years so since version 3.1.0, something changes.

Thank you again.

Indeed. Look another side effect of the plugin update.

Let’s first concentrate on the map present on those pages:
https://epicside.be/experience/observer-les-manchots-a-boulders-beach/
https://dev.epicside.be/experience/observer-les-manchots-a-boulders-beach/

• This reply was modified 1 year, 10 months ago by matbe81.

I have replicated the prod env to the dev env then have updated the leaflet map plugin to the latest version (3.1.0) on the dev env and and have updated the URL in the leaflet map settings page of the dev env to 1.9.2.

Thanks for having a look.

Don’t think so. The code was written 2 years ago and never changed. I have made all the updated since that without any issue. Look that only 3.1.0 make issues.

I confirm having restored version 3.0.2 of leaflet-map wordpress plugin in place of 3.1.0 on the prod env and everything is back OK.

Issue can still be seen on the dev env. Same url except domain https://dev.epicside.co in place of https://epicside.co

Any idea?

• This reply was modified 1 year, 10 months ago by matbe81.

It look the break occurs when upgrading Leaflet Map WordPress plugin from version 3.0.2 to 3.1.0 since my test environment don’t have any issue using the same source code for map generation:

https://test.epicside.be/experience/observer-les-manchots-a-boulders-beach/

https://test.epicside.be/experience/rallier-le-pain-de-sucre-en-telepherique/

Any idea?

• This reply was modified 1 year, 10 months ago by matbe81.

I have to admit I’m completely lost for such things. Which i don’t understand, i that everything was working perfect for months. Something changed at leaflet-map and break all my maps…

Similar issue for this page:

https://epicside.be/destination/australia/

• This reply was modified 1 year, 10 months ago by matbe81.

I know PHP but not the calculation to be applied to the lat & lng parameters to get correct maxBound 4-arguments values

Thank you. let & lng where missing in the marker code.

Now I indeed have to fix the maxBounds but as the map’s code is generic for differents locations stores in a database, how should I calculate the value of mapBound based on the lat & lng values please?

Indeed. It’s correct on Google maps:

34°11’53.1″S 18°27’07.8″E
https://maps.app.goo.gl/2Lgw2bYH1wKReoqa9?g_st=ic

but it show another location on leaflet map as you can see.