cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Super User
Super User

Azure Maps PCS Component Offset Issue

Hello,

I inherited an interactive map component for canvas apps that has an issue. The component is based on the Azure Maps SDK Code Sample here. I'm not an experienced programmer, so I'm unsure how to fix the component. If someone could please advise, that would be awesome.

Issue:

- When a pin is dropped on the map, it is offset from the cursor. It should be directly under the cursor.

- Same issue when a polygon is drawn or a circle/square is originated

- The offset changes when the browser window size changes

Complete writeup here on Stack Overflow.

Example: I'll click the "a" in "Seattle" with the browser window at different sizes. Note the offset changes.

offsetIssue4.gif

13 REPLIES 13
Power Apps Staff Mr-Dang-MSFT
Power Apps Staff

Re: Azure Maps PCS Component Offset Issue

@GregHurlmanMSFT 

@yashag2255 

Do you have thoughts on what may be causing the offset on this map component?

Super User
Super User

Re: Azure Maps PCS Component Offset Issue

The developer just gave me this additional information if its helpful:

 

`When I last troubleshooted this I tracked it down to these two functions on atlas.js.`

image.png

`top and left are different when the map is embedded vs when the map is tested in the harness. There must be some miscalculation happening when this is calculated, is my theory.`

Dual Super User
Dual Super User

Re: Azure Maps PCS Component Offset Issue

Hey @seadude 

 

Can you please confirm if you are trying to build a PCF from scratch? This type of issue usually occurs when the width property of the HTML elements is not provided properly in the code. I was facing a similar issue when trying to create the iframe PCF (https://github.com/yashag2255/iframePCF ). This was resolved by setting up the below property of the HTMLIFrameElement.

this.iframeelem.width = "500";
this.iframeelem.height ="700";
this.iframeelem.frameBorder = "0";

This way the width was set in a proper way and I was able to click whenever required and it was reading the correct input.

I tried to add

 https://azuremapscodesamples.azurewebsites.net/Drawing%20Tools%20Module/Get%20drawn%20shapes%20from%...  in the IFrame control and it was reading the inputs correctly.

I have attached a GIF to demonstrate the usage of this. I set width for this PCF, as 500 but if this width is extended then the frame will display it like it does on the web page. This is due to the responsive behavior of the web page.

ddj.gif

Thank you @Mr-Dang-MSFT  for tagging me in this post! It was an interesting problem to look at. 

 

Hope this Helps!

 

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

Super User
Super User

Re: Azure Maps PCS Component Offset Issue

Hi @yashag2255 ,

 

Yes, this is a PCF built from scratch. As far as I know, it does not use the iFrame PCF. Do you know which files in the source code would hold this type of height/width information?

Thanks for your expertise!

Super User
Super User

Re: Azure Maps PCS Component Offset Issue

Maybe here in `index.ts`?

public init(
context: ComponentFramework.Context<IInputs>,
notifyOutputChanged: () => void,
state: ComponentFramework.Dictionary,
container: HTMLDivElement
) {
let _drawingManager: drawing.DrawingManager;
AzureMapsComponent._context = context;
const mapContainer = document.createElement('div');
const zoomLevel = 15;
mapContainer.id = 'azureMap';
mapContainer.setAttribute(
'style',
`text-align:left;width:${context.parameters.azureMapsWidth.raw!.toString()}px; height:${context.parameters.azureMapsHeight.raw!.toString()}px;`
);
container.appendChild(mapContainer);
AzureMapsComponent._azureMap = new Map(mapContainer, {
view: 'Auto',
authOptions: {
authType: AuthenticationType.subscriptionKey,
subscriptionKey: context.parameters.azureMapsKey.raw!,
},

});

 

Dual Super User
Dual Super User

Re: Azure Maps PCS Component Offset Issue

Hey @seadude 

 

IFrame PCF was just an example of how this can be achieved. You need to setup the width configuration in the index.ts file. It would include the width dimensions in both init() and UpdateView() functions.

 

Hope this Helps!

 

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

Dual Super User
Dual Super User

Re: Azure Maps PCS Component Offset Issue

Hi @seadude 

 

Yes this should be included as part of init() and UpdateView() functions. Can you try to setup the width for mapContainer div tag? 

 

Hope this Helps!

 

If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!

 

Super User
Super User

Re: Azure Maps PCS Component Offset Issue

This is my first PCF (like I said, I inherited it from a developer) so I'm still researching the entire dev process. I have the source code uploaded to Github for version control. My only Windows machine is a Surface Go so I don't think I can install Visual Studio on this device, its RAM is too limited. Too bad I can't dev PCF's from Linux!

Power Apps Staff jopursle
Power Apps Staff

Re: Azure Maps PCS Component Offset Issue

Hi @seadude 

Since you just need MSBuild, you can try to install Build Tools for Visual Studio 2019.  That way you can run it from the developer command prompt without doing a full VS install.

 

https://visualstudio.microsoft.com/downloads/?q=Build+Tools+for+Visual+Studio+2019

 

Helpful resources

Announcements
New Ranks and Rank Icons in April

'New Ranks and Rank Icons in April

Read the announcement for more information!

Better Together’ Contest Finalists Announced!

'Better Together’ Contest Finalists Announced!

Congrats to the finalists of our ‘Better Together’-themed T-shirt design contest! Click for the top entries.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

thirdimage

Community Summit North America

Innovate, Collaborate, Grow - The top training and networking event across the globe for Microsoft Business Applications

Users online (10,491)