Building the Figma for maps

The article explores the development of a specialized canvas UI for Felt's geospatial drawing tools, emphasizing the intricate processes behind creating an intuitive and responsive mapping experience. It delves into the foundational concepts of canvas UIs, including the importance of coordinate systems and viewport transformations, and explains how users interact with the map through gestures like panning and zooming. The text highlights the complexities of converting geographic coordinates to screen-space via map projection, focusing on the use of Mercator projection to translate world-space coordinates to a 2D cartesian system. To enhance performance, the system employs optimizations like transient canvas transforms and regular reprojections, which leverage GPU-accelerated SVG transformations to efficiently manage and update the display of thousands of coordinate pairs. These techniques ensure that users can smoothly navigate and manipulate the map, even as the complexity and scale of drawn elements increase.