Azure Map Popup rendering issue about react-azure-maps

[yulinscottkang]

The popup should automatically adjust its location based on the content height unless you're dynamically updating the popup content using DOM APIs. You can try one of the following options:

• Avoid directly updating the popup content using DOM APIs; instead, update the popupContent prop.
• Set a fixed height for the popup container so that it doesn't change with its content.
• Toggle isVisible to false and then true again, allowing the popup to recalculate its position.

[ashishkabuni]

my popup is showing bottom of the screen, not sure why. can someone tell me how to show it on icon. I am using custom icon. popup should show on top of icon

my code is as below:

import { useMemo, useState } from "react";
import {
  AzureMap,
  AzureMapDataSourceProvider,
  AzureMapFeature,
  AzureMapLayerProvider,
  AzureMapsProvider,
  AuthenticationType,
  AzureMapPopup,
  IAzureMapImageSprite,
} from "react-azure-maps";
import { key } from '../key';
import { citiesData } from "./data";

const renderPoint = (data: any) => {
  return (
    <AzureMapFeature
      key={data.cityName}
      id={data.cityName}
      type="Point"
      // coordinate={data}
      coordinate={[data.lon, data.lat]}
      properties={{
        id: data.cityName,
        popUpProp: data,
      }}
    />
  );
};
const iconUrl = require("../../../assets/images/short-logo.png");

const spaceshipImageSprites: IAzureMapImageSprite = {
  id: "spaceship",
  color: "DarkOrchid",
  secondaryColor: "DarkOrchid",
  icon: iconUrl,
  scale: 0.1,
};
export const ReportMap = () => {
  const [mapData, setMapData] = useState([...citiesData]);
  // const [mapData, setMapData] = useState([...points]);
  const [popupOptions, setPopupOptions] = useState<any>({
    position: [73.80615234375125, 18.854310361887883],
    showPointer: true,
    content: "<h1>count: 20</h1>",
    closeButton: true,
    draggable: false,
  });

  const [isVisible, setIsVisible] = useState(false);

  const option = useMemo(() => {
    return {
      authOptions: {
        authType: AuthenticationType.subscriptionKey,
        subscriptionKey: key,
      },
      center: [78.4378, 17.3724],
      zoom: 3,
      view: "Auto",
      showFeedbackLink: false,
      showLogo: false,
      showLabels: true,
      showBuildingModels: false,
      autoResize: false,
      renderWorldCopies: false,
      showAttribution: false,
    };
  }, []);

  const memoizedMarkerRender = useMemo(
    () => mapData.map((el) => renderPoint(el)),
    [mapData]
  );

  const memoizedMapPopup = useMemo(
    () => (
      <AzureMapPopup
        isVisible={isVisible}
        options={popupOptions}
        events={[
          {
            eventName: "close",
            callback: async () => {
              console.log("clsoed");
              setIsVisible(false);
            },
          },
        ]}
        popupContent={<span>count: 20</span>}
      />
    ),
    [isVisible, popupOptions]
  );
  return (
    <>
      <AzureMapsProvider>
        <div style={{ height: "600px" }}>
          <AzureMap imageSprites={[spaceshipImageSprites]} options={option}>
            {memoizedMapPopup}
            <AzureMapDataSourceProvider
              id={"MultiplePoint AzureMapDataSourceProvider"}
            >
              <AzureMapLayerProvider
                id={"MultiplePoint AzureMapLayerProvider"}
                options={{
                  iconOptions: {
                    size: 0.5,
                    image: "spaceship",
                    allowOverlap: true, //For smoother animation, allow symbol to overlap all other symbols on the map.
                    ignorePlacement: true, //For smoother animation, ignore the placement of the icon. This skips the label collision calculations and allows the icon to overlap map labels.
                  },
                }}
                events={{
                  click: (e: any) => {
                    setIsVisible(false);
                    if (e.shapes && e.shapes.length > 0) {
                      // Set popup options
                      setPopupOptions({
                        position: e.position,
                        showPointer: true,
                        content: "<h1>count: 20</h1>",
                        closeButton: true,
                        draggable: false,
                      });
                      setIsVisible(true);
                    }
                  },
                }}
                type="SymbolLayer"
              />
              {memoizedMarkerRender}
            </AzureMapDataSourceProvider>
          </AzureMap>
        </div>
      </AzureMapsProvider>
    </>
  );
};

[ashishkabuni]

Note same code showing popup correctly with version 0.4.7

[yulinscottkang]

@ashishkabuni, e.position could be inaccurate based on your current zoom level. Instead of relying on it for the popup's position, it's better to use position: e.shapes[0].getCoordinates() for a more precise longitude and latitude.

// Set popup options
setPopupOptions({
-  position: e.position,
+ position: e.shapes[0].getCoordinates(),
  showPointer: true,
   content: "<h1>count: 20</h1>",
   closeButton: true,
  draggable: false,
});

[yulinscottkang]

Duplicate of #190