Esri / information-lookup

Web app template that is used to determine if the location specified intersects a polygon
Apache License 2.0
6 stars 25 forks source link

Pop-ups open off screen on laptop and mobile devices #35

Open karmstro77 opened 8 years ago

karmstro77 commented 8 years ago

image

NikkiGolding commented 6 years ago

@MikeMillerGIS Is this a core Popup issue or is it tied to Information Lookup specifically? If it is the later, can we get this resolved soon? @previnWong

MikeMillerGIS commented 6 years ago

We center the map and show pop up, map does not move itself. maybe there is a setting or something?

Can they use the side panel?

MikeMillerGIS commented 6 years ago

maybe something we can leverage in this thread https://community.esri.com/thread/32141

previnWong commented 6 years ago

@karmstro77 @NikkiGolding Made a fix to center the popup to support mobile platform. By doing so, though, the point clicked is offset from center in the display. Give it a shot and let me know. Get the version in the dev branch.

https://github.com/Esri/information-lookup/tree/dev

MikeMillerGIS commented 6 years ago

@previnWong We should make this an option. Will this change will affect and provide a different UX from an app today?

previnWong commented 6 years ago

It shouldn't. Today, the map center and zooms to where the user clicked. The infowindow then opens and is offset to the right, therefore getting cut off on mobile devices. image

Now, I just get where the user clicked, offset that location by the resolution of the infowindow. Then show the popup. The result is that the popup is centered in the viewing area and the clicked point is offset. A graphic is there so a user knows where he/she clicked. image

MikeMillerGIS commented 6 years ago

more worried about desktop browser based, will it only move the map if the pop up is cut off?

previnWong commented 6 years ago

The existing code in there calls for the map to center and zoom. So the map in the desktop browser will move as of today. I'm just changing it slightly where it centers. It should do the same for desktop browser, push it away from top or right from getting cut off.

Speaking of it now, I haven't done the case where you click and select the underlying feature. I will have to handle that case as well.