Азгар фэнтези мап генератор

Cant save map as anything other than .map #61


TheFamtan commented May 19, 2018 •


I cant save anything other than a .map file for this map. Works for other maps but this one just goes wonky and I cant get to the menu any time I click save for it.

Generator version

Browser version

Google Chrome Version 66.0.3359.181

Steps to reproduce

Should just be able to click Save and try to Save anything other than .map with this map

.map file

Expected behaviour

Should Lock up the page and not let you use the menu until page reload

The text was updated successfully, but these errors were encountered:

We are unable to convert the task to an issue at this time. Please try again.

The issue was successfully created but we are unable to update the comment at this time.

Azgaar commented May 20, 2018

Thanks for the report. The route cause of the issue is used font «Georgia». For some reason system cannot fetch some fonts. To fix it just change the used fonts to default. Meanwhile I will check all fonts and remove the ones that cause problems.

TheFamtan commented May 20, 2018

Did some resetting like you said and that seems to have worked. Even the original one works now due to your work so thanks much

Azgaar commented May 20, 2018

I have deployed a hotfix, thanks for the report.

Austin71402 commented Feb 12, 2019

Hi, I am having this same issue with version 0.61b. when I click the download button to make it .PNG file it tells me I must make sure pop-ups are not turned off. thinking that maybe I had ad block on I went into my settings to turn it off but I found that pop ups were already allowed. Its unfortunate because I really enjoy the way your map generator works and I hope we can resolve this issue so I can use it properly in the future.

Azgaar commented Feb 13, 2019

Hi @Austin71402, the message is getting displayed in any case, there is no way to check whether popups are blocked or now from the code. Was the file saved?


Азгар фэнтези мап генератор

Azgaar’s Fantasy Map Generator is a free web application generating interactive and highly customizable svg maps based on voronoi diagram.

Project is under development, the current version is available on Github Pages.

Refer to the project wiki for guidance. The current progress is tracked in Trello. Some details are covered in my old blog Fantasy Maps for fun and glory.

Join our Discord server and Reddit community to share your creations, discuss the Generator, suggest ideas and get the most recent updates.

Contact me via email if you have non-public suggestions. For bug reports please use GitHub issues or #bugs channel on Discord. If you are facing performance issues, please read the tips.

Electron desktop application is available in releases. Download archive for your architecture, unzip and run.

Pull requests are highly welcomed. The codebase is messy and requires re-design, but I will appreciate if you start with minor changes. Check out the data model before contributing.


Находка: генератор карт фэнтези-миров

Наша непостоянная рубрика «Находка» возвращается! Сегодня в выпуске масштабный генератор карт фэнтезийных миров Azgaar’s Fantasy Map Generator с множеством полезных функций. Программа основана на процедурной генерации, которая позволяет создавать каждый раз новую карту на определённых параметрах.

В окне настроек пользователь может выбрать вид карты (рельеф, политическая карта, культурная карта или карта глубины) и настройки отображения (выводить ли названия городов и стран, показывать ли реки, отмечать ли границы и т.д.). Каждый элемент на карте можно настроить на свой вкус, например, поменять цвета для границ государств или надписей.

Кроме того, при генерации можно выбрать конфигурацию континентов: один континент или несколько, архипелаг, кольцевой континент и тому подобное.

Настройки открываются на кнопку со стрелочкой слева вверху

Самое примечательное, что у генератора есть возможность сохранять и открывать карты по уникальному seed-идентификатору. Если вы создали карту мира, где планируете играть в D&D, то можете скинуть код своим друзьям, и те смогут изучить карту.

Генератор связан с другим похожим алгоритмом, который создаёт карты городов, — мы о нём рассказывали. Если вы зайдёте в меню города, то сможете открыть и его карту!


Fantasy Maps for fun and glory

javascript, mapmaking, procedural generation

Map scale

One of the core elements of any map is a map scale. Map scale is the ratio of a distance on the map to the corresponding distance on the ground. In terms of fantasy maps scale shows how big the world is and allows to calculate a distance between two points. A plausible world cannot be built without a … Continue reading Map scale

Styling the map

There are quite a lot of possibilities to manually style a generated map. I’m not going to describe them all and not going to make a tutorial, there will be a lot of changes in the future and current UI is in a draft version. Here just a quick presentation on how map can be styled … Continue reading Styling the map

Читайте также:  Empyrion galactic survival как установить генератор

Image to Heightmap converter

Two weeks ago I mentioned one more feature I want to add to make heightmap truly customizable — “get Heightmap from the image” function. I found the idea promising and now I want to describe the way it was implemented. Let’s start from the idea I had. Currently there are 2 options for a heightmap customization: … Continue reading Image to Heightmap converter

Polygonal rivers and river editor

Even I’ve already wrote two posts about rivers and got a positive feedback, rivers are still a weak point and need to be re-worked. First thing you notice when you start to edit maps in vector graphics editor is that rivers are just a bunch of separate curved segments with different width. I had to use this … Continue reading Polygonal rivers and river editor

Templates implementation and Heightmap editor UI

In one of the previous posts I covered a concept of heightmap templates. Now I want to describe how it was implemented and aligned with a new Heightmap editor. The Heightmap is a core element of the map generation and I want to give users ways to control over it. By default map is getting generated in … Continue reading Templates implementation and Heightmap editor UI

Settlements, Regions, Routes and Labels

It’s time to cover some stuff not related to a heightmap or biomes. This is a first narration of this kind and I’m going to cover most of them right in this post. These topics are settlements, regions, routes and labels. It’s not like I don’t want to describe every topic separately, but I spent months to … Continue reading Settlements, Regions, Routes and Labels

Coastline extension and Heightmap templates

Three months passed since the previous post. Too much time and too less done for the period, but the work had never stopped. Going with the baby steps I have reworked some basic functional, including a heightmap generation I want to cover in this post. I was quite happy with the heightmap and coastlines I got, but there … Continue reading Coastline extension and Heightmap templates

Biomes generation and rendering

We have already generated and rendered a heightmap, and now it’s time to add the next map layer — vegetation map based on biomes definition. The theme is boundless, but I’m going to cover both biomes generation and rending in a single post. The first reason that I’m a bit tired of it, the second … Continue reading Biomes generation and rendering

Heightmap rendering

One of my first posts was devoted to a heightmap generation and now it’s time to talk about heightmap rendering. Most map generators consider heightmap as a technical thing only, but I believe it’s beautiful as is and with some improvements could be used as one of the main map layers. As of now I’ve added 5 different heightmap … Continue reading Heightmap rendering


The previous post was mostly devoted to the Fluvial Network calculation and rivers rendering was not covered enough. I stayed on the straightforward and even unexpected solution: draw rivers based on their length only. It’s rather elegant, but tributaries don’t increase the main stem volume and this may be a problem. In real world tributaries … Continue reading Confluences


Biomes generation and rendering

We have already generated and rendered a heightmap, and now it’s time to add the next map layer — vegetation map based on biomes definition. The theme is boundless, but I’m going to cover both biomes generation and rending in a single post. The first reason that I’m a bit tired of it, the second — there are already some good tutorials available. From the procedural generation perspective theme was covered by Jon Gallant, Scott Turner, Amit Patel, Tommy Waters and Miguel Cepero. There are also a lot of materials prepared by Cartographers Guild members.

As you may notice, in all of the articles linked above biome generation is based on a the same principle. A well-known Whittaker diagram shows the distribution of vegetation types as a function of mean annual temperature and precipitation and hence very convent to use in a procedural generation. All that we need is to define precipitation and temperature for each polygon, prepare our own diagram and define the biomes based on these three components.

» data-medium-file=»https://azgaar.files.wordpress.com/2017/06/temperatures-ireland.gif?w=273″ data-large-file=»https://azgaar.files.wordpress.com/2017/06/temperatures-ireland.gif?w=400″ src=»https://azgaar.files.wordpress.com/2017/06/temperatures-ireland.gif?w=273&h=300″ alt=»temperatures Ireland» width=»273″ height=»300″/> Mean temperature in Ireland

The precipitation model was already prepared for a river systems generation. As of temperature, I decided to use the model based on annual average sea temperature and land elevation. We create Islands, and even I’m still not sure, but our Islands seems to be about 100k square kilometers (

40 sq mi) in area. Like real-world Ireland or Iceland. What we know about the island is that their climate is profoundly impacted by ocean temperature, not by the latitude. And it is so even for a such a big islands like Ireland, having insignificant regional temperature variation. Generally it’s not “a warm South and a colt North” as in continental Europe, but “a bit warmer coastline and cooler inland areas”. So the sea temperature is the first key value.

One more observation is that we, unintentionally, create high, or volcanic islands. These island are based on one or more mountains and have an easily recognizable conical profile. Volcanoes could be really height, like Hawaiian Mauna Kea, standing 4,207 m (

Читайте также:  Усиленный генератор в машину

14k ft) above sea level. But, as long as Ireland is selected as a model, I decided to define the highest altitude as 1 kilometer (

3,4k ft). The land elevation is the second key value.

Let’s take a look on a sea temperature. I don’t want to over-complicate the maps handling seasonal climate changes, so we should think in an average annual temperature direction (AAT). Keeping it easy, the AAT at sea level equals to a temperature at the coastline, so on the height = 0.2 in our case. Using the data from climatemps.com I’ve prepared a list of AATs for some places on European coastline. I selected one city to represent each Celsius degree. The place altitude and precipitation are also added:

City Temperature, °C Altitude, m Precipitation, mm
Messina 19 54 830
Seville 18 31 610
Athens 18 28 375
Lisbon 17 95 750
Dubrovnik 16 49 1300
Barcelona 15 5 660
Marseille 14 32 545
Venice 13 6 800
Constanta 12 14 395
Antwerp 11 16 850
Dublin 10 85 730
Hannover 9 59 655
Gdansk 8 12 500
Stockholm 7 52 540
Riga 6 9 635
Trondheim 5 115 860
Reykjavik 4 61 800
Tromso 3 9 1000
Ust-Tsilma 2 79 565
Arkhangelsk 1 4 560
Murmansk 51 490

As you can see the temperature range is 0-19 °C. I didn’t find any significant European cities with AAT greater than 19 or sub-zero temperatures. I consider the 10 °C (50 °F) as a standard value (wow, it’s a Dublin, what a coincidence), 5 °C as a normal deviation (Trondheim-Barcelona range) and 10 °C as an extreme deviation (Murmansk-Messina range). Using this ranges we can get a semi-random temperature for each map.

We know that temperatures decrease with altitude and in mountainous regions altitudinal zonation is used to describe the ecosystems. Moreover, we now the rate of decreasing, which is approximately 6.5 °C/km. It means that with highest elevation equals to 1 km, the temperature delta across the map will be about 6.5 °C. From my point of view it’s too low for a fantasy world. We can either increase the lapse rate or the land elevation. As I don’t want to break the basic laws of nature, I increased the peaks up to 2 km height, so the temperature delta is doubled. So with a standard 10 °C temperature at the coast the annual average temperature on the mountain tops will be about -3 °C. On this temperature we can expect peaks to be above the snow line and some beautiful snowcaps should be there.

Knowing a coastal temperature and a cell heights we can calculate temperature for each cell. The general formula is coastal_temperature – (cell_height – sea_level) * 20 , where sea level is always 0.2, coastal_temperature is user defined value in a range 0-20 and cell_height is in range 0.2-0.8 (upper bound may vary from map to map). So, a minimal 0.01 point height change will shift the actual temperature to 0.2 °C (0.36 °F). The maximum temperature delta, as was mentioned above, is 13 °C.

The formula to get land elevation is cell_height * (cell_height – 0.195) * 4000 . The result is an altitude in meters. The minimum elevation above the sea level is 4 meters (

13 ft), maximum — 1936 meters (

6350 ft). As you can see the function is quadratic, but it’s just a trick to change the altitude more drastically on the mountains. I use elevation values in meters only for a reference as they more user friendly, while system always considers raw cell_height or point_height values. Formula for depths calculation is (cell_height – 0.2) * 70 / cell_height , just for your reference, it is not used for a biomes definition.

As of precipitation, I decided to fit the values I already have into a 0-9 range scale. The most arid cells get moisture level 9, while the wettest get level 0. For a user friendly value I just multiply the initial raw precipitation by 500. So, the minimum non-zero precipitation (0.01) is considered as 5 centimeters (

2 in) of precipitation. The highest value is about 700 cm (

Whittaker diagram

Having both temperature and precipitation key values defined, we can start to think over the biomes. Classical Whittaker diagram defines about 8-10 biomes and looks as a right-angled triangle. This number is too low for me and triangle shape is not very convenient for programming. So, let’s consider the intermediate ones to get about 20 biomes and create a rectangular array instead of Whittaker’s triangular matrix. I could safe some time using more appropriate Holdridge life zones classification, but I noticed it too late.

The y axis is our 10 precipitation levels. The x axis, that defines temperature based on cell height value, contains 100 elements. This is bigger than actual height delta, which is 60 points (0.2-0.8 range), and hence allows us to shift the scale left or right to maintain different coastal temperatures. The shift formula is cell_height * 100 – (coastal_temperature – modifier) / 0.2. Modifier is a customizable value controlling the shift, as of now I set it to 12 to get snow at sub-zero temperatures and hot deserts at highest values.

Biomes matrix implementation is pretty straightforward. Initially I reproduced Whittaker’s diagram in a rectangular form as 100×10 Excel table. Then I added some new intermediate biomes and changed the biomes for actual usage. The main problem is to define good colors for each biome. I was guided by both real-world colors from satellite Earth photos and standard colors used by mapmakers. The general idea is that cells with more moisture should be more saturated than arid ones. One more idea is to define a snow-white layer with some rocky-grey colors for low temperatures.

Читайте также:  Почему сгорел предохранитель генератора

The next step is to turn the matrix into a JavaScript code. I made a separate jsfiddle as a biomes workshop. It’s not well-done, but has some useful functions to operate with colors and visualize the matrix. It also can interpolate colors in a selected range or smooth the entire axes. I have some ideas on how to turn this fiddle into a built-in custom color-schemes creation module, but it’s not a high-priority plan as of now.

Basic biomes matrix. Numbers show biomes IDs

Let’s take a look on the defined biomes. The classification I made is messy and illogical, detailed in some places and too general in others. I was focused mostly on colors than on correct biomes representation. Please note that I use the term temperature as a synonym of average annual temperature. For example you may thing that 20 °C is a comfort temperature, but in real-word we have this AAT in Marrakech, the city sometimes called “the Daughter of the Desert”.

Initially I planned to describe each biome in a separate paragraph and include some bio-geographical information, but I don’t thing it’s really necessary. We all know what is savanna and what is tundra, so here is just a summary table:

ID Name Temperature Precipitation Color
Hot desert hottest-hot superarid #fbfaae
1 Savanna hottest arid #eef586
2 Tropical dry forest hottest humid #b6d95d
3 Tropical wet forest hottest superhumid #7dcb35
4 Xeric srubland temperate-cold superarid #d6dd7f
5 Temperate dry grassland hot-temperate arid #bdde82
6 Temperate wet grassland hot-temperate subhumid #a1d77a
7 Temperate deciduous forest hot-temperate humid #29bc56
8 Subtropical rain forest hot superhumid #76bd32
9 Cold desert temperate-cold superarid #e1df9b
10 Temperate rain forest temperate superhumid #45b348
11 Coniferous wet forest temperate superhumid #52a444
12 Temperate coniferous forest temperate humid #6fb252
13 Subtaiga cold superhumid #567c2c
14 Boreal wet forest cold humid #618a38
15 Boreal dry forest cold subhumid #a4b36d
16 Subpolar scrub cold arid #acb076
17 Subpolar desert cold-coldest superarid-arid #b5ad8b
18 Tundra coldest humid #d5d59d
19 Rocky desert coldest-frosty superarid #bfbfbf
20 Polar desert frosty any #f2f2f2
21 Glacier frosty any #fafeff

The basic scheme is ready and now we can apply it to a map. I added a separate function that assign biome ID and associated color to each polygon, so it’s easy to render it in polygonal style described in the previous post:

Hm, it could be worse. The temperature is set to default 10 °C, the precipitation level is height. Most of the land is covered with Temperate deciduous (biome 7; 7-8 °C) and Coniferous wet (11; 7-4 °C) forests. The 2000-meters peak in the center has a glacier (biome 21; -1 °C) and slopes with Boreal dry and wet forests (biomes 14-15; 1-2 °C). The right slope is in rain shadow, so there is not too much precipitation and it’s covered mostly with shrubs and grass (biomes 4-5; 3-6 °C). You can also see that rivers tend to spread precipitation and usually river cells have better vegetation that surroundings.

Map looks a bit messy. Too make it better I can smooth the matrix using the linear color interpolation. Color of each element should be the average of its neighbors. After 2-3 cycles I got the updated matrix:

Not let’s apply it to the polygonal map:

Yes, just slightly better and still a bit messy. It’s not a real issue as I don’t plan to use biomes as a main layer, but I’m still want to try some styles already developed for a heightmap. I shouldn’t add shadows for a biomes, but I can render the map in a plain contours style:

Not sure this style is better. Let’s relax the contours shapes by taking into account just every fourth control point and then smooth it using D3 line interpolation:

Wow, it’s a super-messiness. I definitely need to reduce the layers count:

Not bad, I like the organic forms, but there are some rudiments. Maybe I will use this idea with contours simplification for something different. I don’t want to even try the pixel style, so the last one is triangled style:

Much better! It gives a lot of details, maybe even more than expected and completely change the map look.

Now let’s check the map in a temperature dynamic. Global warming model based on gradual average annual temperature increase from 0 to 25 °C (refresh the page to restart animation or check the video on YouTube):

Looks good, I suppose. Of course, temperature should affect the rivers, ocean could be covered with ice floes et cetera, but I’m quite happy with the current result as of now.

As usual, I will appreciate you comments and ideas. You are welcome to play with the generator jsfiddle, point me on mistakes and so on.