Use numbers on icons markers with openstreetmap

Phoca Maps - displaying maps in Joomla! CMS
xillibit
Phoca Member
Phoca Member
Posts: 26
Joined: 26 Jun 2017, 16:25

Use numbers on icons markers with openstreetmap

Post by xillibit »

Hello,

On a map which is set with phocamaps 3.0.12 on Joomla! 3.10.10, i'am using openstreetmap with fontawesome icons. The issue is that i want to set a number in the icon instead the one taken from fontawesome. I have 17 icons on this map, so i need to numbered these icons from 1 to 17.

Is-there a way to achieve that when using openstreetmap ?

Is-this a way to use fontawesome 5.x with openstreetmap on phocamaps ?

Thanks by advance
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Use numbers on icons markers with openstreetmap

Post by Jan »

Hi, in fact you don't need to use fontawesome only, with another prefix, etc. you can even use another library, but I think, you need to do specific icon for each number version. There is no some dynamic script to create the numbers. :idea:

Jan
If you find Phoca extensions useful, please support the project
xillibit
Phoca Member
Phoca Member
Posts: 26
Joined: 26 Jun 2017, 16:25

Re: Use numbers on icons markers with openstreetmap

Post by xillibit »

I don't figure out with openstreetmap how to load just an image for the icon or just set a number instead the icon or directly on the icon.

Image
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Use numbers on icons markers with openstreetmap

Post by Jan »

Hi, openstreetmap only works with icons defined in CSS
If you find Phoca extensions useful, please support the project
AlainR
Phoca Enthusiast
Phoca Enthusiast
Posts: 50
Joined: 24 Jul 2018, 16:33

Re: Use numbers on icons markers with openstreetmap

Post by AlainR »

Thanks for this discussion.
One way would be to define an "Additional Icon Class" in "Design Settings (OpenStreetMap)" tab for each marker: one, two, etc.
Then, in the site CSS, define the content of the classes:

Code: Select all

.one.fa::before {
	content: "1";
}
.two.fa::before {
	content: "2";
}
etc.

You've to remove or replace ".fa" from the above code if you don't use "Icon Prefix".
Please note that this will delete the circle or any icon defined in "Marker Icon".
Post Reply