Phoca Forum

Background:

Have recently upgraded to latest version of Phoca Maps to move away from Google maps.
Upgrade was successful and map shows markers as before.

New markers have been added and these mostly display correctly (look slightly different). New markers use the Awesome font and the page source shows new and existing marker code.

Following reports I have found that the new marker is not been shown (only small white dot) on some devices. I have tested with windows (Chrome, Firefox etc) and on two Andriod devices and all is well.

However using Chrome (and Samsung Browser) on an Andriod Phone running 6.0.1 (also reported on 5.01) I can see the issue - a small white dot rather than the marker.

I get the impression that the issue may be with smaller devices... any thoughts?

Website is Joomla 3.7.5 using T3 template 2.2.6.

Hi, did you test it with another template?

Testing now here:
https://www.phoca.cz/joomla3demo/phoca-maps-demo

without any problem with small screen device (on Adroid - Firefox, Chrome)



Jan

Hi,

south1234 wrote: ↑27 Nov 2018, 17:01Website is Joomla 3.7.5 using T3 template 2.2.6.

in addition to Jan: You are using an outdated Joomla Version & probably older T3 Framework.

Current version of Joomla is: 3.9.1 [included all previous Versions bug fixes/security releases]
Template check(s): http://www.t3-framework.org/downloads.html

Kind regards
Christine

Sorry about the delay.

Finally I think I have found the issue.

The leaflet.awesome-markers.css file refers to images on lines 29 & 33 that don't exist.

/* Retina displays */
@media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) {
.awesome-marker {
background-image: url('images/markers-soft@2x.png');
background-size: 720px 46px;
}
.awesome-marker-shadow {
background-image: url('images/markers-shadow@2x.png');
background-size: 35px 16px;
}
}

Replacing with standard images do work:

/* Retina displays */
@media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) {
.awesome-marker {
background-image: url('images/markers-soft.png');
background-size: 720px 46px;
}
.awesome-marker-shadow {
background-image: url('images/markers-shadow.png');
background-size: 35px 16px;
}
}

This only impacts the map when the Retina display is detected - in my case on an Andriod Phone. I haven't checked it more widely but I guess it will work.

Hi, thank you for the info, I will take a look at for next version.

Jan

Hi, should be OK in version 3.0.6

https://www.phoca.cz/news/1019-phoca-ma ... 6-released

Jan