The Trump Appeaser's Map

Donald Trump says he will meet Vladimir Putin next week. He also says that an end to the war must involve “some swapping of territories”.

I thought it might be worth creating an Appeasers Map to visualize an area of land roughly the size of Crimea overlaid on top of the United States. You can drag the shape around to see which areas of the United States you would be most prepared to give to Russia.

The map even has a download button that allows you to share your 'Donald Trump appeasement' territory' on social media. 

The Boring Technical Bit

The map was created in Maplibre. Unfortunately Maplibre does not have a native 'drag' event for polygons. Therefore to make the polygon draggable on the map, I implemented a straightforward interaction using MapLibre GL JS’s event system. 

First, we listen for a mousedown event on the polygon’s fill layer, which signals the start of a drag operation. When the user clicks down on the polygon, we set a flag indicating that dragging has started and store the initial mouse position (startLngLat). This allows us to track movement relative to where the drag began. 

As the user moves the mouse while holding down the button (mousemove event), we calculate the difference between the current mouse position and the last recorded position. We then update the polygon’s coordinates by applying this offset to each vertex, effectively shifting the polygon’s shape on the map. After updating the polygon’s coordinates, we update the map’s data source so the changes appear in real time. Finally, when the user releases the mouse button (mouseup event), we clear the dragging flag and reset the cursor style, completing the drag interaction. This approach allows the user to drag the polygon anywhere they want on the map.