Skip to main content
Support Center
Help ArticlesAcademyCommunity
HomeCommunitySDK/APIAdd-insMyGeotab Map Deeper Add-in SDK Development Questions

MyGeotab Map Deeper Add-in SDK Development Questions

Solved
SDK/API
Add-ins
L
L
lmit-1292
Original Poster

Out Team has almost completed our development of a MyGeotab Map Deeper Add-In.

Unfortunately, we're blocked with 3 issues regarding the Deeper API / SDK. 

 

(1) How Add-In can detect in CSS/API when running on Tablet or Mobile device ?

  (As Add-In is always running in a 450px width iFrame, CSS media selectors will not work)

 

(2) Detect if Add-In Panel open / closed via API or CSS selectors ?

(3) Open / Close Add-In Panel via API ?

   (The panel is open / closed dynamically by MyGeotab, we're hoping to give the Add-In more capability to direct users to the presence of new hidden data in panel by opening it programmatically when it is closed)

 

We've searched the forum hoping someone else in the community may have also experienced or reported it as a feature request?

 

Does Geotab Dev Team / Support have any suggestions or workarounds for these issues?

 

SplGeotabMap

6
Join the conversation

You need to be logged in to reply to this post and participate in the Geotab Community discussions.

Top Answers

C
C
canislobo-1739

Hi,

These two articles (1 and 2) should resolve your first question.

To find if the panel is closed or not, you could check the div that contains the panel. If the div has the "hiddenPane" class, the panel is closed.

There isn't a way to open or close the panel via API at the moment. It's part of an ongoing discussion of new changes to make; it's tricky because the panel is shared with all the Map addin solutions installed in the database, so they would all have the ability to open/close the panel, which could make them interfere with each other and lead to a poor user experience.

Let me know if you have more questions, I'm happy to help.

Geotab Verified
L
L
lmit-1292
Original Poster

Using the information supplied by @canislobo-1739​ we were able to resolve all three questions.

For the sake of others within the community with the same or similar questions here is what we did

 

  • How Add-In can detect in CSS/API when running on Tablet or Mobile device

A combination of the following worked

  1. Include <meta name="viewport" content="width=device-width, initial-scale=1.0" /> in your Add-In HTML page
  2. Make sure to use @media (max-width: 390px) {} instead of "max-device-width" in your media queries. This size worked for detecting Mobile phones, which was the biggest dimension change we needed to handle.

 

  • Detect if Add-In Panel open / closed

This line of JS worked from within the Add-In on our database version of MyGeotab Checkmate.

May fail in future releases. Take note of "parent" required for JS calls from within the iFrame to the parent DOM.

parent.document.querySelector("#liveMap_addinsPanel").classList.contains("hiddenPane")
  • Open / Close Add-In Panel

This line of JS will toggle the open/close Panel behavior from within the Add-In on our database version of MyGeotab Checkmate. May fail in future releases. Take note of "parent" required for JS calls from within the iFrame to the parent DOM.

parent.document.querySelector("#liveMap_detailsPanelAndMapCanvasLayout .mapAddinResizer .resizerButton").click()

We realize that these are not official solutions by Geotab and so are subject to change at any time. So I would suggest to code in safeguards against these CSS/DOM selectors failing so that your application does not break, but gracefully fails.

 

It would be great for the SDK team to release oficial solutions so we can future-proof our Geotab integrations.

 

Much Thanks

Best Answer

6 Replies

G
G
Genevieve-1051
Community Administrator

Hi @lmit-1292​ ,

 

Thank you for asking the Geotab Community! A SDK expert will very likely jump in tomorrow morning, if not you can count on me to start nudging them to help you out.

 

If you have any other questions or context, please let us know?!

 

Best,

Genevieve

L
L
lmit-1292
Original Poster

Thank you so much for the follow-up Genevieve Looking forward to hearing from the SDK experts Best Regards Lance Mitchell
C
C
canislobo-1739

Hi,

These two articles (1 and 2) should resolve your first question.

To find if the panel is closed or not, you could check the div that contains the panel. If the div has the "hiddenPane" class, the panel is closed.

There isn't a way to open or close the panel via API at the moment. It's part of an ongoing discussion of new changes to make; it's tricky because the panel is shared with all the Map addin solutions installed in the database, so they would all have the ability to open/close the panel, which could make them interfere with each other and lead to a poor user experience.

Let me know if you have more questions, I'm happy to help.

Geotab Verified
L
L
lmit-1292
Original Poster

Thank you for the response. We will review. Looking forward to these 3 features being more available and easier to use via the API. Regards Lance Mitchell
L
L
lmit-1292
Original Poster

Using the information supplied by @canislobo-1739​ we were able to resolve all three questions.

For the sake of others within the community with the same or similar questions here is what we did

 

  • How Add-In can detect in CSS/API when running on Tablet or Mobile device

A combination of the following worked

  1. Include <meta name="viewport" content="width=device-width, initial-scale=1.0" /> in your Add-In HTML page
  2. Make sure to use @media (max-width: 390px) {} instead of "max-device-width" in your media queries. This size worked for detecting Mobile phones, which was the biggest dimension change we needed to handle.

 

  • Detect if Add-In Panel open / closed

This line of JS worked from within the Add-In on our database version of MyGeotab Checkmate.

May fail in future releases. Take note of "parent" required for JS calls from within the iFrame to the parent DOM.

parent.document.querySelector("#liveMap_addinsPanel").classList.contains("hiddenPane")
  • Open / Close Add-In Panel

This line of JS will toggle the open/close Panel behavior from within the Add-In on our database version of MyGeotab Checkmate. May fail in future releases. Take note of "parent" required for JS calls from within the iFrame to the parent DOM.

parent.document.querySelector("#liveMap_detailsPanelAndMapCanvasLayout .mapAddinResizer .resizerButton").click()

We realize that these are not official solutions by Geotab and so are subject to change at any time. So I would suggest to code in safeguards against these CSS/DOM selectors failing so that your application does not break, but gracefully fails.

 

It would be great for the SDK team to release oficial solutions so we can future-proof our Geotab integrations.

 

Much Thanks

Best Answer
G
G
Genevieve-1051
Community Administrator

Thank you for checking back in and letting us know what worked @lmit-1292​ ! Exactly what the community is about and am very confident it will help someone out in the future. Appreciate you 😊

 

Warm Regards,

Genevieve

Still have questions?
Learn with AcademyBrowse documents