Tell us about your project
The project was about sailing, and it was supposed to provide people who were traveling the oceans with useful information.
As a starting point for this task, I already had a Leaflet map, which was represented as a block view. In the View settings, it was set that for a country 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 that 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, etc ). 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 to set some variables.
lat and lon variables are the coordinates of each node.
Next, we'll format the icons.
The 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 its coordinates, icon URL value, and popup. All those nodes will appear on the map when 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, by 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.