How to make a modern map UI?

I want to make a map ui, like pressing ESC map in GTA5, a big picture, beyond the bounds, the mouse can drag the map range, and the mouse wheel can zoom the map size. “Grand Theft Auto: Trilogy” is made with Unreal 4.23, which implements this function. Does anyone know the principle or method of implementing this map UI? (Because I’ve seen most of the map UI tutorials, the map is just a specific square picture, the scope is small, and there is no mouse drag and mouse wheel zooming the map)

The general idea:

More detailed:

1 Like

Thank you, Master. I have been trying this idea, but the clarity of the image decreases after zooming. I wonder if I should use a vector bitmap such as SVG to make the image?

You can use a very large image.

1 Like

OK, thank you very much!

Hero, I want to know how to get the ZoomUMGMap cast to level map location? In GTA5, click on the zoomed map to get the position of the zoomed map in the level map. That is, when the mouse moves in the UMG map, it can get the position of the mouse on this image, and then convert it to the map position. I want to implement double-click UMG map, Pawn arrives at the location represented by UMG map, how do I do it?

You know the dimension of the widget. You know the dimension of the map. Use the map range node to translate one range into another.

I have difficulty understanding the logic in it, I have been thinking about it for 6 hours, can you give me an example?

For example, the center of the world map is the level map (0,0), when the mouse is offset, click UMGMap to move to the indicated position.

because there are also the problems of zooming size and dragging offset, and I think that should only getting “mouse position in photo”, like Photoshop, In the software photoshop, hovering over a photo will prompt the location of the photo where the mouse is located.instead of “mouse position on image widget”, feels complicated and difficult for me to understand.If I only get the “position of the mouse on the image widget”, it may only be suitable for use without zooming and dragging. And I don’t even understand how this works now.

Dear

Have a look at the link with the map above. Offsets are handled, dragging is handled, zooming in/out & scaling is handled, and local widget coordinates are accounted for, too.

I feel like you’re proficient in Unreal Engine 4, would you, hero.