Improving Takeout Map UX with Map Projection

When multiple stores share the same latitude and longitude, markers on the map would overlap, and relying solely on the existing pin list broke the exploration flow. So we improved the experience by automatically re-searching and updating results instantly when the map is moved, and by expanding overlapping markers directly on the map.

Marker expansion was calculated on the client, not the server. Since the result depends on the current screen's Projection and Zoom Level, calculating in real time based on the map the user is actually viewing was more accurate and also reduced cost and latency.

The layout used a circular principle. For N markers, angles are divided evenly, dx and dy are derived from radius and angle, the screen coordinates are shifted from the reference point accordingly, and then converted back to latitude/longitude.

• Convert reference latitude/longitude → screen coordinates
• Shift by dx, dy in screen coordinates
• Convert the shifted coordinates back to latitude/longitude

The key to this approach is that it doesn't add directly to latitude/longitude, but instead calculates in the distortion-free map screen coordinate system. As a result, we were able to create markers that spread out evenly in a circular pattern on screen.

However, since a larger expansion area could overlap with surrounding information, we also added operational policies. We expand up to 8 markers only, limit to 1 depth per 4 markers, up to 2 depths max to reduce the area, and treat cases with 9 or more markers at the same latitude/longitude as an exception.

Also, at low Zoom Level, only the minimum number of markers are expanded to reduce complexity, while zooming in expands more markers to allow detailed selection. The radius is scaled using 2.0.pow(currentZoomLevel - standardZoomLevel) so the perceived distance doesn't change abruptly as zoom level changes.

As a result, stores at the same location now appear separated on the map, making exploration and selection feel natural, and the takeout screen's key metrics, CVR and GMV, also improved positively.