What technologies are best used to make interactive geographic maps for web games?

Question

Game development

You need to make an interactive game map. Basic functionality: the player can move, change the scale, get information by clicking on the cities (blue circles).
The first thing that comes to mind is to make a map on d3.js. Get the coordinates of cities from the api and display them in the appropriate places, and when the player moves around the map, send new coordinates to the backend. The only thing that looks like d3.js will not be to paint the map in the colors of the landscape, as in the screenshot. Is it realizable?
And it's still unclear how best to implement impassable places on the map?

I didn’t find similar examples made in JS, but if you throw it in, I’ll be grateful

Answer 1

The landscape can be generated like this, for example https://www.playfuljs.com/realistic-terrain-in-130...
And for maps there is a leaflet.js framework
But I would still generate maps in advance in any three-dimensional editor, there more possibilities. https://www.blendernation.com/2019/04/01/generatin...
And then - cut into tiles and show through Leaflet.

Answer 2

Pathfinding and Obstacle Avoidance - Algorithm A* (AStar) and its modifications. In this case, the world is supposed to be divided into zones.
As for the map, it is impossible to answer unambiguously.
First you need to decide - procedural generation or level design. Both that, and another has the pluses and minuses. The generation makes the game more diverse, but it is more difficult to make the gameplay interesting, and it is almost impossible to stick the plot. Manual maps, on the contrary, can be very thoughtful and beautiful, contain unique locations, cities, heroes, but require additional man-hours.
Further, you can take some ready-made engine and finish it to your needs, at the same time pull unnecessary functionality with you, but it may be that it lacks something important and you will have to finish it a lot, or it may turn out to be easier to write from scratch. Depends on your gameplay and specific features of your game.
In general, if I were you, I would not look for a ready-made solution, but would make my own, and would make up the functionality of the game from smaller bricks - a separate generation algorithm (plus my Wishlist, such as generating city coordinates), separately zoom the map (your own or google), separately the cities themselves, etc. Map generation, respectively, is also compiled purely for your game from even smaller bricks. There are many generation algorithms, you will not have problems finding them.

Answer 3

I found two interesting articles on the topic
. And although a simple picture map turned out to be enough for my case, I think it can be useful to someone
https://blog.patricktriest.com/game-of-thrones-map...
https:// blog.patricktriest.com/game-of-thrones-lea...

Answer 4

Well, in the simplest case, it may be enough to just take a bitmap image of the map and use it as a background. Accordingly, it remains to learn how to scroll and scale it (+ it is possible to rotate it).
Apparently, this obvious approach for some reason did not suit you. Expand your requirements:
1) what is the minimum and maximum zoom?
2) the estimated size of the card?
3) maybe it should be animated?
4) 2D or 3D map?
5) how interactive should it be? whether it is possible to move along it (ala Fallout)
, etc.
All this will help to find a solution.

Answer 5

to output the leaflet map. impassable places can be made a separate layer, like a bit mask. and it is enough to make it with a low resolution simply (check the color of the pixel).

Answer 6

masonry

Answer 7

g.zeos.in/?q=image%20grid

Answer 8

flexbox?