The project was about sailing around the oceans, and it would give some useful information to people who were traveling.
As a starting position for this task, I already had a leaflet map, which was represented as a block view, and in the view settings it was set that for a country their related nodes are presented as markers on the map.
Yellow icons on the maps are nodes, where each icon represents a different content type.
Whenever we need to make some custom code for leaflet maps, this is the code syntax and where we need to place our custom code.
In my example above, I only needed content types which would be included in the overlays list and that have values for the icon image in the Leaflet Icons settings.
I have selected a value from the database table leaflet icons, but as the content is serialized, we'll first have to unserialize it. After fetching them all, I've sorted everything alphabetically.
In the code above, we went through every content type dynamically, and set icon settings for each of them (url, position, size, ..). We'll need that later as well.
Next we need to set the base_url that we'll need for setting the icon path value.
We are going through every icon on the map, using a for loop ni order to set some variables.
lat and lon variables, are the coordinates of the each node.
Next, we'll format the icons.
Variable popup is the value of a popup section for each node.
In the end, we ask if typeof icon is not undefined, so we can set the node values, including it's coordinates, icon url value and popup. All those nodes will appear on the map as we load the page.
As I said before, we did have icons on the map set already, before we started adding our custom code for leaflet icons.
So it means with adding these custom settings, our map would have duplicates of each icon.
We'll have to exclude those already appearing there before our changes.
In the end, we need to go again through all selected content types, and set the list of overlays and add them to the leaflet map.