top of page
Search
  • Matthew

The healthsite icon hover function




Getting this functionality to work was a bit challenging at first, understanding what to do and where to put the code in our javascript was the key to making it work, after a couple hours of trial and error, there was success!


How it works:

In order to create a function where the icon changes when hovered over, a second icon was needed; we used the same syringe icon as the second icon, but with a black background instead of the white. A variable called 'househealthsiteIcon' was created to call the URL of the second icon from our github repository and the size of this icon was also made larger than the original.



In order for the icon to be used on a mouse hover, the 'mouseover' event was used in the 'pointToLayer' function created (shown below). With this, the new icon would display over the marker; once the mouse moved off the marker, the original icon would be set and thus appear again. The 'mouseout' event was used for this to work.





2 views0 comments

Recent Posts

See All

The project

My group and I have been working on this project since the beginning of August. At first we were unsure about what we had to do and what our final product would be, but with time and constant communic

bottom of page