Marker not shown on mobile devices

[studiocurci]

Hi, first of all thank you for this very good component because it let people use maps without Google Map api key.
Everything works fine, I only have a small problem on my site : on mobile devices I can't see the red marker.
Could you please help me to solve it?

Thank you, best regards
Francesco

[studiocurci]

Thank you,I've found another solution.
Best regards
Francesco

[Jan]

Ok

[seldor]

hello, and how was the problem solved I have the same.

Mobile Version
https://i.imgur.com/OE3fiY5.png

Desktop Version

https://i.imgur.com/ndKIgMR.png

thank you

[rhondel]

Hi, I have the same problem, the markers on mobile device are white and very difficult to see.
How do you solved the problem?

[Jan]

Hi, hmm, are you able to see the icon here:
https://www.phoca.cz/joomla3demo/phoca-maps-demo

I don't have any problems with displaying the icon here on mobile

Jan

[seldor]

Hello, yes i see the markers at the demo page.

I try different browser's and smartphone's android apple no where show the marker only the icon. I try to change the color but no Effekt.

I use a template from joomlaplates maybe there is the problem.

[seldor]

Hello,

i just switch to google maps and it works :( good for google xD

[rhondel]

Hi,
I solved the problem,
I have make an adjustment in de file media\com_phocamaps\js\leaflet-awesome\ leaflet.awesome-markers.css
change the lines:

/* 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;
}
}

into

/* 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;
}
}

[seldor]

Hi,
I solved the problem,
I have make an adjustment in de file media\com_phocamaps\js\leaflet-awesome\ leaflet.awesome-markers.css
change the lines:

/* 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;
}
}

into

/* 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;
}
}

Thanks a lot,

I think the problem is here, my homepage is in a subfolder, so the right path is not found.
I marked the code in red that needs to be changed.

unfortunately the icons are not displayed centered they are in the middel of top, also a change of the color of the marker has no more influence on the smartphone.