Icons on openstreet maps

Phoca Maps - displaying maps in Joomla! CMS
User avatar
louponapoletano
Phoca Newbie
Phoca Newbie
Posts: 1
Joined: 12 Jun 2019, 10:35

Icons on openstreet maps

Post by louponapoletano » 12 Jun 2019, 10:45

Hello everybody

I work on a openstreet map , due to the limitation on traffic with google maps;
I search to implement my own icons in my openstreet maps .

The google map link : http://www.database-memoire.eu/prive/fr ... ieres-fr-3 , you can see the icons.
The openstreet map link : http://www.database-memoire.eu/prive/fr ... etieres-v2

I found one way but i need to modify the css and a php page to suppress the white circle.

Is there another way ???

Sorry i don't implement the english maps... Many thanks for your help

christine
Phoca Hero
Phoca Hero
Posts: 1615
Joined: 28 Nov 2010, 17:20

Re: Icons on openstreet maps

Post by christine » 13 Jun 2019, 13:18

Hi,
louponapoletano wrote:
12 Jun 2019, 10:45
I found one way but i need to modify the css and a php page to suppress the white circle.
Which way did you find?
in principle (I think it's Protostar?) you could change/add CSS etc., when creating a user.css. Just to avoid overrides after Core/extensions updates.

Do you mean this one? http://www.database-memoire.eu/prive/me ... arkers.css

PHP file: Maybe using via template override?

I think, you mean this icon: http://www.database-memoire.eu/prive/im ... y_WWII.png
Did you try to implement into other page?

Sorry, I hv more questions than you - Wait for Jan please :wink: Thank you.

Kind regards
Christine

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

Re: Icons on openstreet maps

Post by Jan » 15 Jun 2019, 12:09

Hi, the icons cab be selected from Bootstrap Icons (Glyphicons) or FontAwesomeIcons in OpenStreetMap. If you want to add your own icons, the best method I think, is to add them per CSS - you can specify the class for the icons in administration and in CSS you can then add your own icons.

E.g. the similar way how here the flags are rendered:
https://www.phoca.cz/cssflags/

Code: Select all

.de {
 background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjYwMCIgdmlld0JveD0iMCAwIDUgMyI+DQo8cGF0aCBkPSJtMCwwaDV2M2gtNXoiLz4NCjxwYXRoIGZpbGw9IiNkMDAiIGQ9Im0wLDFoNXYyaC01eiIvPg0KPHBhdGggZmlsbD0iI2ZmY2UwMCIgZD0ibTAsMmg1djFoLTV6Ii8+DQo8L3N2Zz4NCg==');
 width: 100%;
 height: 60%;
 background-size: 100% 100%;
}
Jan
If you find Phoca extensions useful, please support the project

Post Reply