javascript - Expanding“clickable” area for custom icons using Leaflet

Question

I have a searchable Leaflet map. The green icons represent all of the existing data and when you search for an address it shows a blue pushpin icon.

I would expect to be able to click anywhere on my custom (blue pushpin) icon and get a popup as a result. But nothing happens when I click on it.

I have to click on a very specific spot in order to get the popup to activate. I can tell it's the right spot because my hover text (on the bottom left) changes. I want to make it so that the results pop up if I click anywhere on the custom icon (or even the original green icon).

I'm using a template, so I'm not completely sure which part of the code controls the hover actions or the "clickable" area, but I'm guessing it's this...?

 var hover_template;
      $.get( "./templates/hover.ejs", function( template ) {
        hover_template = template;
      });
      SearchableMapLib.info.update = function (props) {
        if (props) {
          this._div.innerHTML = ejs.render(hover_template, {obj: props});
        }
        else {
          this._div.innerHTML = 'Hover over a ' + SearchableMapLib.recordName;
        }
      };

      SearchableMapLib.info.clear = function(){
        this._div.innerHTML = 'Hover over a ' + SearchableMapLib.recordName;
      };

      

question from:https://stackoverflow.com/questions/66054845/expanding-clickable-area-for-custom-icons-using-leaflet

Answer 1

From the source code of the framework / template you are using, it seems like the custom icon / blue pushpin is just a "center mark" of the geocoding result, without attached data. Hence the absence of hover and popup.

https://github.com/datamade/searchable-map-template-csv/blob/master/js/searchable_map_lib.js#L321-L329

On the contrary, the green icon Markers seem to be results of a 2nd search, based on the coordinates of the previous result and a fixed radius. They have this hover and click popup features. Hence you get them when on the green icon behind the blue pin.

Therefore it seems like what you experience is the expected behaviour, even though it can be strange when the blue pin matches one of the green icons.

If you expect a different behaviour, it seems to me that you should raise an issue on the repo of that framework / template.