Cannot Show/Hide Popup on Mouse Hover

[and-rej]

Hi there,

I am trying to show asset positions on a map. I am using HTML markers as they let me use HTML and CSS to customise the asset's appearance e.g., a car gets a car icon, a train gets a train icon, a stationary asset looks different to a moving one, etc. I want to show high level details in a tooltip when the user hovers their mouse over the marker. The user can then either move their mouse off the marker or click it. If they move their mouse off the marker, the tooltip disappears. If they click the marker, a panel on the left appears with more details. It's basically the Google Maps experience.

The React Azure Maps documentation has a Popup example so I tried to use this as the basis of the solution, but I can't get it to work with mouse hover. It works ok on click (ok as in most clicks work, but not all), but, as mentioned above, I want a different experience on click.

There are two problems:

1. The HtmlMarkerEvents interface does not declare all events. mouseenter and mouseleave are missing and I think these are the ones I want. They are documented in the Azure Maps documentation and logging shows that they work: https://learn.microsoft.com/en-us/azure/azure-maps/map-events#interact-with-html-marker. This isn't really a problem with this repo as this type comes from azure-maps-control, but it may be related so thought I would mention it.
2. The visibility of the popup does not update when the state updates. It starts off correct, then gets out of sync.

Consider the below example code:

import {
  AzureMap,
  AzureMapDataSourceProvider,
  AzureMapsProvider,
  IAzureMapOptions,
  AzureMapHtmlMarker,
  useCreatePopup
} from "react-azure-maps";
import { AuthenticationType } from "azure-maps-control";
import { useState } from "react";

const option: IAzureMapOptions = {
  authOptions: {
    authType: AuthenticationType.subscriptionKey,
    subscriptionKey: "xxx",
  },
  center: [133.76866774216998, -25.151382729660657],
  zoom: 4,
};

export default function MapWithPopup() {
  const [visible, setVisible] = useState(false);
  return (
    <AzureMapsProvider>
      <AzureMap options={option}>
        <AzureMapDataSourceProvider id={'map AzureMapDataSourceProvider'}>
          <AzureMapHtmlMarker
            markerContent={<div style={{ backgroundColor: 'pink', height: '50px', width: '50px' }}></div>}
            isPopupVisible={visible}
            options={{
              position: [151, -34],
              popup: useCreatePopup({
                options: {
                  closeButton: false,
                  pixelOffset: [0, -50]
                },
                popupContent: (<div>visible = {visible.toString()}</div>),
              })
            }}
            events={[
              {
                eventName: 'mouseenter',
                callback: () => {
                  console.log('mouseenter');
                  setVisible(true);
                }
              },
              {
                eventName: 'mouseleave',
                callback: () => {
                  console.log('mouseleave');
                  setVisible(false);
                }
              }
            ]}
          />
        </AzureMapDataSourceProvider>
      </AzureMap>
    </AzureMapsProvider>
  );
};

This should render a map, focused on Australia, with a pink box near Sydney, and should show a popup on hover. What you experience is as follows:

• The popup is not visible by default. Correct.
• When you hover your mouse over the pink box, the mouseenter event fires, the visible state is set to true, the popup appears. All correct.
• When you move your mouse off the pink box, the mouseleave event fires, the visible state is set to false. Correct. However, the popup is still visible. Why?
• When you move your mouse back over the pink box, the mouseenter event fires, the visible state is set to true. Correct. However, the popup disappears. Why?
• You are now stuck in a situation where mouse hover does the opposite of what is desired, despite the state being correct.

At this point I completely lost faith in the Popup functionality and abandoned the approach. Instead I have implemented the tooltip experience by including the tooltip HTML inside the marker itself, then using CSS to show/hide the tooltip on hover.

I feel like I have a fairly simple and common use case here, what am I doing wrong? Or is there a bug somewhere?

[yulinscottkang]

@and-rej, thanks for your detailed example. Yes, I believe it is a bug within the AzureMapMarkers component. The logic here seems to be the opposite of what is should be...

if (isMarkerPopupOpen && isPopupVisible) {
  markerRef.getOptions().popup?.close()
} else if (isMarkerPopupOpen !== undefined) {
  markerRef.getOptions().popup?.open()
} else if ((isPopupVisible && isMarkerPopupOpen) || isPopupVisible) {
  markerRef.togglePopup()
}

We will address this issue shortly. Thank you!

[yulinscottkang]

Fixed in https://github.com/Azure/react-azure-maps/releases/tag/0.4.7