Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

OpenStreetMap won´t display marker icons

Featured Lock Resolved Bug
Dear Support Team,

unfortunately the OpenStreetMap Addon for SP Page Builder shows no marker. I´ve done a little research, it looks like the marker assets are not cached. The addon tries to load the icons from cache, but they never exists.

There are 404 errors in the console.

https://example.com/cache/com_templates/templates/images/pattran.png
https://example.com/cache/com_templates/templates/images/marker-icon.png
https://example.com/cache/com_templates/templates/images/marker-shadow.png


I compared this with another Project (Template Revibe), the marker is loaded from template folder instead of the cache directory.


https://example.com/components/com_sppagebuilder/assets/images/marker-icon.png
https://example.com/components/com_sppagebuilder/assets/images/marker-shadow.png


Because theres no problem with other templates in my opinion this is a salon specific problem.


Stacktrace

iframe.js:245 GET https://domain.example/cache/com_templates/templates/images/pattran.png 404
getMatchedAdSizeForElement @ iframe.js:245
elementIsAdShaped @ iframe.js:241
(anonymous) @ iframe.js:317
TopSearcher.search @ iframe.js:314
findAds @ iframe.js:523
extractAds @ iframe.js:968
extractAdsWrapper @ iframe.js:960

2e61cc4c51e215dc3557fb49a7aa25ba.js:11 GET https://domain.example/cache/com_templates/templates/images/marker-icon.png 404
W @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
_detectIconPath @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
_getIconUrl @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
_createIcon @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
createIcon @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
_initIcon @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
onAdd @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
_layerAdd @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
whenReady @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
addLayer @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
addTo @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
(anonymous) @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:14
each @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
each @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
initOpenStreetMap @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:14
(anonymous) @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:14
dispatch @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
v.handle @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
load (async)
add @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
(anonymous) @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
each @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
each @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
xe @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
on @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
(anonymous) @ sppagebuilder.js:1
(anonymous) @ sppagebuilder.js:1

marker-shadow.png:1 GET https://domain.example/cache/com_templates/templates/images/marker-shadow.png 404
Image (async)
_createImg @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
_createIcon @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
createShadow @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
_initIcon @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
onAdd @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
_layerAdd @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
whenReady @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
addLayer @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
addTo @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:11
(anonymous) @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:14
each @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
each @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
initOpenStreetMap @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:14
(anonymous) @ 2e61cc4c51e215dc3557fb49a7aa25ba.js:14
dispatch @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
v.handle @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
load (async)
add @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
(anonymous) @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
each @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
each @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
xe @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
on @ jquery.min.js?5721ef5deba60875d91494bce5de5e1c:2
(anonymous) @ sppagebuilder.js:1
(anonymous) @ sppagebuilder.js:1


Can you please investigate the Problem and solve it in future releases?

9 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. I've just checked the issue and couldn't recreate it. Would you please check this screencast https://files.fm/u/7p2mt8a3

WinHelp GmbH

More than a month ago #Permalink
Hi Sifat,

i´ve cheked this issue again. I figured out the icons are missing, when I turn on the "Compress CSS Files" option in template.
But as I mentioned before this won´t happen in Revibe. The Option "Compress CSS Files" is active in both templates.

I´ve send you an message with the project data.

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your reply. Actually the css compression is causing the issue. Actually pagebuilder css is already compressed so you no need to compress it again. When you compress a compressed css then some css issues may occur. So i would suggest to not compress the css. http://prntscr.com/o6wr4q

-Best Regards

WinHelp GmbH

More than a month ago #Permalink
Hi,

correct me if I´m wrong. You say this is caused by a css compression failure, but the icons were rendered in the site html code. So it´s strange, that css compression causes html changes?
I know leaflet renders the map by it self trough js. So I would acknowledge when you would say that theres a js compression issue.

I also like the css compression feature because, it combines the most css files into one.

And last but not least, why is this working in Revibe and not in Salon? This doesn´t make sense for me.

Attachments (1)

  • OpenStreetMap-Html.png
    OpenStreetMap-Html.png 10 KB

Sifat - Staff

More than a month ago #Permalink
Yes it's rendered by js but there might be some css confliction in your site. May be with some third party css. Because for me the icon is working even if i enabled all the compressions.

WinHelp GmbH

More than a month ago #Permalink
We don´t have any thirdparty css installed. We use the custom code tab in the template only. I will try to reinstall the template. Maybe there are some issues with the template.

Sifat - Staff

More than a month ago #Permalink
sure. But we always prefer not to compress the css again since we've already compressed them. And if you compress them again from template setting then sometimes it may cause some weird issues.

WinHelp GmbH

More than a month ago #Permalink
Hi,

I reinstalled the template, but unfortunately it still won´t work.

So I dived into code ;-)

Why is this working in Revibe and not in Salon?
Salon uses helixultimate, which has another css compression logic than helix3 from Revibe.

File: /plugins/system/helixultimate/core/helixultimate.php Line 976

if(preg_match('/\.(jpg|png|jpeg|mp4|gif|JPEG|JPG|PNG|GIF)$/', $url)) {
return "url('$url')";
}


When the css file contains any property with an url attribute which contains one of the following file extensions: jpg, png, jpeg, mp4, gif, JPEG, JPG, PNG, GIF. It leaves the url attribute untouched, this works fine for absolute urls. In case of leaflet this will break the image paths. Previously (helix3) the marker path was modified from '../images/marker-icon.png' to '/components/com_sppagebuilder/assets/images/marker.png', which is the full path of the image file. In ultimate the image is still '../images/marker-icon.png', and our css file is located into '/cache/com_templates/templates/<template_name>'. So leaflet always try to load the file from cache folder, where it never exists.

I´ve got some small improvements.

You could check if the file is already minified and don't run through the minifyCss. Which could cause issues when you replace content.

Quick and dirty example, could be abstracted for js:

// Check if filename contains min.css --> don´t minify then, already minified
if (strpos($css_file, 'min.css') === false) {
$compressed = $this->minifyCss(file_get_contents($css_file));
} else {
// Simply get css content and remove comments, mainly 3rd party css contains headers
$compressed = $css_code = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', file_get_contents($css_file));
}



You could check if the url is absolute, so leave it untouched.
This could be done like this:

Adding a function (According to https://stackoverflow.com/questions/23570262/how-to-determine-if-a-file-path-is-absolute):

private function isAbsolutePath($path) {
if (!is_string($path)) {
$mess = sprintf('String expected but was given %s', gettype($path));
throw new \InvalidArgumentException($mess);
}
if (!ctype_print($path)) {
$mess = 'Path can NOT have non-printable characters or be empty';
throw new \DomainException($mess);
}
// Optional wrapper(s).
$regExp = '%^(?<wrappers>(?:[[:print:]]{2,}://)*)';
// Optional root prefix.
$regExp .= '(?<root>(?:[[:alpha:]]:/|/)?)';
// Actual path.
$regExp .= '(?<path>(?:[[:print:]]*))$%';
$parts = [];
if (!preg_match($regExp, $path, $parts)) {
$mess = sprintf('Path is NOT valid, was given %s', $path);
throw new \DomainException($mess);
}
if ('' !== $parts['root']) {
return true;
}
return false;
}


And then modify line 976 to:

if(preg_match('/\.(jpg|png|jpeg|mp4|gif|JPEG|JPG|PNG|GIF)$/', $url) && $this->isAbsolutePath($url)) {
return "url('$url')";
}



Please let me know if you plan to add improvements like my quick examples in future releases.

Hopefully It's ok when I take deep looks to problems i've figured out.

Kind Regards

Sifat - Staff

More than a month ago #Permalink
Thanks for your informative reply. I've already shared your reply to our users request list and our developers will take care of that.

-Best Regards


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 121
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 110
Toufiq

Toufiq

Total Accepted Answers: 82
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 5
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2

115

Templates

296297

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us