Comments (5)
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.
from react-azure-maps.
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>
</>
);
};
from react-azure-maps.
Note same code showing popup correctly with version 0.4.7
from react-azure-maps.
@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,
});
from react-azure-maps.
Duplicate of #190
from react-azure-maps.
Related Issues (20)
- @sangeetha321 , can you try our [`v1.0.0-beta.3` version](https://www.npmjs.com/package/react-azure-maps/v/1.0.0-beta.3)? You should be able to see consistent map style. We'll release our formal `v1.0.0` soon in case you want to use it on production site.
- Error after updating to version 1.0.0 from 0.1.4 - Cannot read properties of undefined (reading 'Map') HOT 3
- Error, after updating to version 1.0.0 from 0.1.4 - uncaught ReferenceError: _wrapNativeSuper is not defined HOT 2
- Error, after updating to version 1.0.0 from 0.1.4 - Error in azure-maps-indoor module HOT 3
- Is thre a reason for removing the dependency @testing-library/react-hooks in version 1.0.0 HOT 1
- After migrating to version 1.0.0 - Error encountered while running the test case: 'Cannot find module 'react-azure-maps' from 'src/map/Componentx.tsx'. HOT 1
- Popup content is non-interactive (react components are rendered as static markup in Popup content) HOT 6
- Animation does not work when using mapRef.setCamera with animation HOT 2
- Map not loading HOT 7
- azure map not loading in production with subscription key HOT 9
- Azure Map not loading correct in prod HOT 4
- Popup is showing bottom of the screen with latest version HOT 4
- IAzureMapLayerType and SymbolLayerOptions not found HOT 1
- Map loads in local, but does not load in azure dev environment HOT 5
- Control containers are outside of the map canvas HOT 1
- Support for JS project HOT 3
- Custom cluster HOT 2
- AzureMapPopup Error: TypeError: Cannot read properties of undefined (reading 'getCurrentStack') HOT 6
- AzureMap with large number of markers having tab switching issue HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-azure-maps.