cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
seadude
Memorable Member
Memorable Member

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
Mr-Dang-MSFT
Power Apps
Power Apps

@GregHurlmanMSFT 

@yashag2255 

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

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.`

yashag2255
Dual Super User II
Dual Super User II

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!

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!

seadude
Memorable Member
Memorable Member

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!,
},

});

 

yashag2255
Dual Super User II
Dual Super User II

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!

yashag2255
Dual Super User II
Dual Super User II

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!

 

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!

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
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Are Your Ready?

Test your skills now with the Cloud Skill Challenge.

Users online (38,140)