So, basically in the game I'm trying to create, what I want for the main part of the "map" is to be something like a map of europe/asia or something like that, something like a territory war game. My problem though is that, everytime I keep zooming in, the map keeps getting blurry/pixelated, is there a way to overcome this problem? Or perhaps I should look to other stuff like ".svg" files? I don't know much about the latter though.

My problem though is that, everytime I keep zooming in, the map keeps getting blurry/pixelated, is there a way to overcome this problem?

I assume you use a bitmap format, like png or jpg for your map.

A bit map is an image consisting of X pixels horizontally, and Y pixels vertically, and each pixel has a colour. With enough pixels / inch, it looks good to us. Laser printers do around 600 dpi (dots per inch), screens around 100 (the 4K screens do a lot more). But still everything is expressed as a fixed number of pixels with a colour.

When you zoom in, you use a bigger area to display the picture. To keep the same dpi, the same density of pixels, you need to have more pixels both horizontally and vertically. However, the image only has X pixels horizontally and Y pixels vertically. The only way to cover that bigger area is to enlarge the area covered by 1 pixel. That means your dpi goes down. In extreme cases, you could have only as much as a handful of pixels to cover half the screen for the area you zoomed into. At that point your eyes recognize the border of the individual pixels, and the seamless picture illusion that you had at 100 dpi is lost.

Modern software attempts to compensate for this problem, by interpolating the colour between the pixels, so you don't get sharp edges between the pixels, but more smooth ones that you don't notice so much. Font renderers do this too, it's called anti-aliasing. It works up to some point, but they cannot invent details that's not in the original picture, so eventually, you'll see it's all fake. (The usual detective movie thing where they take a webcam image at 320x200 of an entire garage, and then zoom in onto the license plate of one car and can clearly read the license plate number doesn't work in reality. In the original picture the license plate was less than a pixel, whereas a readable license plate is at least 6 8x8 pixel letters at least ie 8x48 pixels, or more. If you can construct 400 pixels from the original 1 pixel, you'll be very rich, but until that time, it's just impossible to create that information out of nothing.)

Or perhaps I should look to other stuff like ".svg" files? I don't know much about the latter though.

What can you do? One solution is to limit zooming. The map should provide a global overview, and there is no need to go into more detail.

A second solution is to use a higher resolution image, that is make a map of 100*X times 100*Y pixels (ie 10000 times more pixels). Now if you zoom in by a factor 100, you are at the same resolution that you now have with the full map. Throwing away pixels because you have too many to display is much simpler than inventing non-existing information.

Even then, you likely want to limit zoom to some point, but the end point is after more zoom.

Edit: Engineering this goes the other way around. Decide the maximum zoom that you need, and the resolution (the dpi) that you want there. Then unzoom back to 1x1 by raising the density, and compute how many pixels the entire map will need to have (at least).

Finally, you can switch from bitmap to a vector-based format, like SVG. Vector-based formats approach the problem differently. They are not a collection of pixels at some density, they are a bunch of drawing instructions for drawing figures. Draw a rectangle between these coordinates, and a line from here to there.

You can draw a sharp line at any zoom level. The geometry of a figure is well defined for every zoom level. A point at the screen is either in or out of the figure. (With anti-aliasing, it can also be partly inside the figure, but let's skip that here.) For this reason, vector-based format give you a sharp image at every zoom level.

The cost is of course that they have to compute what to display by executing the draw commands.

You can of course combine techniques here. Have a number of different resolution pictures ready, so you can just draw the one that fits instead of having to compute which pixel to skip drawing. You can render the vector-based image to a bitmap at various resolutions beforehand, or cache results, or so, so save on drawing the picture every time.

Alberth, has a good point, however there is a simple way of fixing this that he didn't mention, a texture LOD. Texture LODs is how most games that give you world view, then allows you to zoom works.

First you have your max zoomed out level, let's say a 1000m*1000m at 1024*1204 pixels. Now your 1000m zone is divided in ten for 10*(100m*100m) zones, each of these 10 zones have a texture of 1024*1024 and when zooming to the point where it gets blurry you swap the textures of the zones on screen; you can do a blending function to get a smooth transition.

When zoomed at any given time there will be a max of nine zones on screen.

The advantage of doing it this way is that you won't need to load a huge texture and then only render a small part of it, this way each zone can be divided into more zones and you can keep repeating the steps for a infinite zoom.

Or you can just do it the easy way and make some detail maps, the problem with this is that you are basically using noise to create details where there isn't any, this will be fine for grass and earthy terrain however cities and landmarks will not benefit from this.

Thanks for the replies guys! :) I think I'll do something like get different high-resolution maps of individual countries instead of a map of an entire continent then just render them separately.