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
Highlighted
Power Apps
Power Apps

Re: Azure Maps PCS Component Offset Issue

@GregHurlmanMSFT 

@yashag2255 

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

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

Highlighted
Dual Super User III
Dual Super User III

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!

Highlighted
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!

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

});

 

Highlighted
Dual Super User III
Dual Super User III

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!

Highlighted
Dual Super User III
Dual Super User III

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!

 

Highlighted
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!

Highlighted
Power Apps
Power Apps

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
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Tech Marathon

Maratón de Soluciones de Negocio Microsoft

Una semana de contenido con +100 sesiones educativas, consultorios, +10 workshops Premium, Hackaton, EXPO, Networking Hall y mucho más!

Users online (5,916)