Comments (6)
Hello @smith1511 , thanks for reporting the issue.
I think for now there is no way to fix this in an easy way becauserenderToStaticMarkup
does not support async rendering. The other thing is that the Popup that is provided by azure-maps-control
accepts only static HTML string and we need to render it somehow on our side.
The one way to implement that kind of feature is just grabbing an async call from popupContent
component and put that into a parent component and make sure that popupContent
not have any async calls.
from react-azure-maps.
Thanks for the reply - I feared that.
When you say move the logic to the parent - is there a way to do that so that the API calls are only done when the user clicks on a popup?
In my scenario I have 50-60 HTML markers, and ideally when someone clicks or mouses over one, I only want to load the async content at that point.
What I'm currently doing is pre-loading all content and passing the results into the Map as props - but this is obviously not very performant.
from react-azure-maps.
One other thing I noticed is that this seems to prevent the usage of <Link to={...}/>
- unless you know a way around that?
from react-azure-maps.
Thanks for the reply - I feared that.
When you say move the logic to the parent - is there a way to do that so that the API calls are only done when the user clicks on a popup?
In my scenario I have 50-60 HTML markers, and ideally when someone clicks or mouses over one, I only want to load the async content at that point.
What I'm currently doing is pre-loading all content and passing the results into the Map as props - but this is obviously not very performant.
Ok but you can also create a simple state for popup data in the parent component, and whenever someone clicks make an async call, set result in state and use that state in the popup content and this approach should work. It is really hard to help you without some code sample or something like that, so if you can please attach something like that :). Also, I would say that HtmlMarker from azure-map-controls
may not be the best option for handling this amount of data. @srednicki95
from react-azure-maps.
One other thing I noticed is that this seems to prevent the usage of
<Link to={...}/>
- unless you know a way around that?
We will check this one.
from react-azure-maps.
@smith1511 We prepared example for you AsyncPopupExample
Fell free to comment if you have any other question
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
- Azure Map Popup rendering issue HOT 5
- 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.