Phoca Forum

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

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

Ok

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

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

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

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.

Hello,

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

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

rhondel wrote: ↑30 Aug 2018, 19:11 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.