Map JS files on CDN when lazyloaded

(@woorooo)

9 months, 4 weeks ago

I’ve checked OSM version and there are more files that are being ignored by the CDN rewrite:

leaflet.min.js
osm.geocode.min.js
leaflet-routing-machine.min.js

Plugin Author

Paolo

(@paoltaia)

9 months, 4 weeks ago

Hi @woorooo,

the devs are looking into this.

They’ll get back to you ASAP.

Thanks for your patience,

(@1naveengiri)

Hi @woorooo,

I have few queries to confirm the case.

are you facing this issue only for Geodirectory assets?
which plugin are you using to apply CDN?
have you tried clearing cache?
can you send us the site URL?

Regards

Thread Starter

(@woorooo)

– https://www.dancelifemap.com/studios/

Hi @1naveengiri,

Are you facing this issue only for Geodirectory assets?

– Yes

Which plugin are you using to apply CDN?

– Statically.io wordpress plugin, also tried it with WP Rocket

Have you tried clearing cache?

– Yes

Can you send us the site URL?

Here is the screenshot with the full list of assets loaded bypassing CDN:
https://ibb.co/3NvZ7Mw

Thank you

This reply was modified 9 months, 3 weeks ago by woorooo.

(@1naveengiri)

Thanks for more info.

we are confirming this. we will come back to you soon.

Regards

(@1naveengiri)

Since when those assets are lazy-loaded, they added on page load and hence not been tracked by the CDN plugin.

Please try this snippet.


add_filter( 'geodir_map_api_osm_data', 'geodir_map_api_osm_data_custom_cdn_url' );
function geodir_map_api_osm_data_custom_cdn_url( $map_params ){
	$cdn_url = 'https://cdn.statically.io/js/';
	$plugin_url = $cdn_url.preg_replace( "#^[^:/.]*[:/]+#i", "", geodir_plugin_url() );
	$map_params = array(
		'styles' => array(
			array( 
				'id' => 'geodir-leaflet-css',
				'src' => $plugin_url . '/assets/leaflet/leaflet.css' . $version_tag
			),
			array( 
				'id' => 'geodir-leaflet-routing-machine-css',
				'src' => $plugin_url . '/assets/leaflet/routing/leaflet-routing-machine.css',
				'check' => ! geodir_is_page( 'add-listing' )
			),
		),
		'scripts' => array(
			array( 
				'id' => 'geodir-leaflet-script',
				'src' => $plugin_url . '/assets/leaflet/leaflet' . $suffix . '.js' . $version_tag,
				'main' => true,
			),
			array( 
				'id' => 'geodir-leaflet-geo-script',
				'src' => $plugin_url . '/assets/leaflet/osm.geocode' . $suffix . '.js' . $version_tag
			),
			array( 
				'id' => 'leaflet-routing-machine-script',
				'src' => $plugin_url . '/assets/leaflet/routing/leaflet-routing-machine' . $suffix . '.js' . $version_tag,
				'check' => ! geodir_is_page( 'add-listing' )
			),
			array( 
				'id' => 'geodir-o-overlappingmarker-script',
				'src' => $plugin_url . '/assets/jawj/oms-leaflet' . $suffix . '.js' . $version_tag,
				'check' => ! geodir_is_page( 'add-listing' )
			),
			array( 
				'id' => 'geodir-gomap-script',
				'src' => $plugin_url . '/assets/js/goMap' . $suffix . '.js' . $version_tag,
			),
			array( 
				'id' => 'geodir-map-widget-script',
				'src' => $plugin_url . '/assets'.$aui.'/js/map' . $suffix . '.js' . $version_tag,
			)
		)
	);
    return $map_params;
}

Regards

This reply was modified 9 months, 3 weeks ago by 1naveengiri.

Thread Starter

(@woorooo)

Hi @1naveengiri

I’ve tried the snippet, but it doesn’t work for css assets, as they are loaded via a different cdn base:

https://cdn.statically.io/js/ – for JS
https://cdn.statically.io/css/ – for CSS

CSS files do not load in this case. Is there a way to adjust the snippet so it takes care of this differences?

Also custom map markers do not load via CDN regardless of whether the map is lazy loaded or not. Is there a way to take care of it as well?

Thank you.

(@1naveengiri)

Hello @woorooo

you can try this snippet for assets.


add_filter( 'geodir_map_api_osm_data', 'geodir_map_api_osm_data_custom_cdn_url' );
function geodir_map_api_osm_data_custom_cdn_url( $map_params ){
	$version_tag = '?ver=' . GEODIRECTORY_VERSION;
	$cdn_url = 'https://cdn.statically.io/js/';
	$plugin_url = preg_replace( "#^[^:/.]*[:/]+#i", "", geodir_plugin_url() );
	$map_params_new = array();
	foreach ( $map_params['styles'] as $key => $params ) {
		$cdn_url = 'https://cdn.statically.io/css/';
		$params['src'] = $cdn_url.$plugin_url . '/assets/leaflet/leaflet.css' . $version_tag;
		$map_params_new['styles'][] = $params;
	}
	foreach ( $map_params['scripts'] as $key => $params ) {
		$cdn_url = 'https://cdn.statically.io/js/';
		$params['src'] = $cdn_url.$plugin_url . '/assets/leaflet/leaflet.css' . $version_tag;
		$map_params_new['scripts'][] = $params;
	}
    return $map_params_new;
}

Map markers are loaded from the rest API. so I am checking it, if we can adjust it otherwise we will do the required changes and update you with snippet here.

Regards

Thread Starter

(@woorooo)

Hi @1naveengiri

Unfortunately the snippet didn’t work, there’s probably some mistake in the code. Or should I use it together with the first snippet you provided? Not sure, please let me know.

Thank you.

(@1naveengiri)

Please try this one instead.

add_filter( 'geodir_map_api_osm_data', 'geodir_map_api_osm_data_custom_cdn_url' );
function geodir_map_api_osm_data_custom_cdn_url( $map_params ){
	
	$map_params_new = array();
	foreach ( $map_params['styles'] as $key => $params ) {
		$cdn_url = 'https://cdn.statically.io/css/';
		$assets_url = preg_replace( "#^[^:/.]*[:/]+#i", "", $params['src'] );
		$params['src'] = $cdn_url.$assets_url;
		$map_params_new['styles'][] = $params;
	}
	foreach ( $map_params['scripts'] as $key => $params ) {
		$cdn_url = 'https://cdn.statically.io/js/';
		$assets_url = preg_replace( "#^[^:/.]*[:/]+#i", "", $params['src'] );
		$params['src'] = $cdn_url.$assets_url;
		$map_params_new['scripts'][] = $params;
	}
    return $map_params_new;
}

Thread Starter

(@woorooo)

Thank you @1naveengiri,

This one worked perfectly, however only for OpenStreetMaps. When google maps is active css an js are still loaded bypassing cdn. Is there a similar way to make it work for Google maps as well?

(@1naveengiri)