mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-16 17:31:24 +01:00
1114 lines
83 KiB
HTML
1114 lines
83 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-116735150-1"></script>
|
||
<script>
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag(){dataLayer.push(arguments);}
|
||
gtag('js', new Date());
|
||
gtag('config', 'UA-116735150-1');
|
||
</script>
|
||
<title>Azgaar's Fantasy Map Generator</title>
|
||
<meta name="application-name" content="Azgaar's Fantasy Map Generator">
|
||
<meta name="author" content="Azgaar (Max Ganiev)">
|
||
<meta name="description" content="Azgaar's Fantasy Map Generator and Editor">
|
||
<meta name="google" content="notranslate">
|
||
<meta property="og:url" content="https://azgaar.github.io/Fantasy-Map-Generator/">
|
||
<meta property="og:title" content="Azgaar's Fantasy Map Generator">
|
||
<meta property="og:description" content="Based on Voronoi diagram rendered to svg">
|
||
<meta property="og:image" content="images/preview.png">
|
||
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32"/>
|
||
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16"/>
|
||
<link rel="canonical" href="https://azgaar.github.io/Fantasy-Map-Generator/">
|
||
<script src="libs/jquery-3.1.1.min.js"></script>
|
||
<script src="libs/d3.v4.min.js"></script>
|
||
<script src="libs/d3-scale-chromatic.v1.min.js"></script>
|
||
<script src="libs/priority-queue.min.js"></script>
|
||
<script src="libs/jquery-ui.min.js"></script>
|
||
<script src="libs/polylabel.min.js"></script>
|
||
<script src="libs/quantize.min.js" defer></script>
|
||
<script src="libs/d3-hexbin.v0.2.min.js" defer></script>
|
||
<script src="libs/jquery.ui.touch-punch.min.js" defer></script>
|
||
<link rel="stylesheet" type="text/css" href="index.css?version=0.58.15b"/>
|
||
<link rel="stylesheet" type="text/css" href="icons.css?version=0.58.15b"/>
|
||
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
|
||
</head>
|
||
<body>
|
||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
|
||
<defs>
|
||
<g id="filters">
|
||
<filter id="blurFilter" x="-1" y="-1" width="100" height="100">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="0.2"/>
|
||
</filter>
|
||
<filter id="blur1" x="-1" y="-1" width="100" height="100">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
|
||
</filter>
|
||
<filter id="blur5" x="-1" y="-1" width="100" height="100">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
|
||
</filter>
|
||
<filter id="blur10" x="-1" y="-1" width="100" height="100">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
|
||
</filter>
|
||
<filter id="splotch">
|
||
<feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="4"/>
|
||
<feColorMatrix values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.9 1.2" result="texture"/>
|
||
<feComposite in="SourceGraphic" in2="texture" operator="in"/>
|
||
</filter>
|
||
<filter id="bluredSplotch">
|
||
<feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="4"/>
|
||
<feColorMatrix values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.9 1.2" result="texture"/>
|
||
<feComposite in="SourceGraphic" in2="texture" operator="in"/>
|
||
<feGaussianBlur stdDeviation="4"/>
|
||
</filter>
|
||
<filter id="dropShadow">
|
||
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
|
||
<feOffset dx="1" dy="2"/>
|
||
<feMerge>
|
||
<feMergeNode/>
|
||
<feMergeNode in="SourceGraphic"/>
|
||
</feMerge>
|
||
</filter>
|
||
<filter id="pencil">
|
||
<feTurbulence baseFrequency="0.03" numOctaves="6" type="fractalNoise"/>
|
||
<feDisplacementMap scale="3" in="SourceGraphic" xChannelSelector="R" yChannelSelector="G"/>
|
||
</filter>
|
||
<filter id="turbulence">
|
||
<feTurbulence baseFrequency="0.1" numOctaves="3" type="fractalNoise"/>
|
||
<feDisplacementMap scale="10" in="SourceGraphic" xChannelSelector="R" yChannelSelector="G"/>
|
||
</filter>
|
||
<filter id="filter-grayscale">
|
||
<feColorMatrix values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
|
||
</filter>
|
||
<filter id="filter-sepia">
|
||
<feColorMatrix values="0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0"/>
|
||
</filter>
|
||
<filter id="filter-dingy">
|
||
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0.3 0.3 0 0 0 0 0 1 0"/>
|
||
</filter>
|
||
<filter id="filter-tint">
|
||
<feColorMatrix values="1.1 0 0 0 0 0 1.1 0 0 0 0 0 0.9 0 0 0 0 0 1 0"/>
|
||
</filter>
|
||
</g>
|
||
<g id="deftemp"></g>
|
||
<g id="defs-icons">
|
||
<symbol id="icon-anchor" viewBox="0 0 30 29">
|
||
<title>Port</title>
|
||
<path d="M15 4c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM28 18.5v5.5c0 0.203-0.125 0.391-0.313 0.469-0.063 0.016-0.125 0.031-0.187 0.031-0.125 0-0.25-0.047-0.359-0.141l-1.453-1.453c-2.453 2.953-6.859 4.844-11.688 4.844s-9.234-1.891-11.688-4.844l-1.453 1.453c-0.094 0.094-0.234 0.141-0.359 0.141-0.063 0-0.125-0.016-0.187-0.031-0.187-0.078-0.313-0.266-0.313-0.469v-5.5c0-0.281 0.219-0.5 0.5-0.5h5.5c0.203 0 0.391 0.125 0.469 0.313s0.031 0.391-0.109 0.547l-1.563 1.563c1.406 1.891 4.109 3.266 7.203 3.687v-10.109h-3c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h3v-2.547c-1.188-0.688-2-1.969-2-3.453 0-2.203 1.797-4 4-4s4 1.797 4 4c0 1.484-0.812 2.766-2 3.453v2.547h3c0.547 0 1 0.453 1 1v2c0 0.547-0.453 1-1 1h-3v10.109c3.094-0.422 5.797-1.797 7.203-3.687l-1.563-1.563c-0.141-0.156-0.187-0.359-0.109-0.547s0.266-0.313 0.469-0.313h5.5c0.281 0 0.5 0.219 0.5 0.5z"></path>
|
||
</symbol>
|
||
</g>
|
||
<pattern id="oceanic" width="100" height="100" patternUnits="userSpaceOnUse">
|
||
<filter id='image'>
|
||
<feImage x="0" y="0" width="100" height="100" xlink:href="data:image/png;base64,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"/>
|
||
</filter>
|
||
<rect width='100' height='100' filter="url(#image)" opacity='0.2'/>
|
||
</pattern>
|
||
<pattern id="mottling" width="16" height="9" patternUnits="userSpaceOnUse">
|
||
<filter id='turb'>
|
||
<feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='10' stitchTiles='stitch'/>
|
||
</filter>
|
||
<rect width='16' height='9' filter="url(#turb)"/>
|
||
</pattern>
|
||
<g id="rose" stroke-width="1">
|
||
<g id="sL" stroke="#3f3f3f">
|
||
<line x1="0" y1="-10000" x2="0" y2="10000"/>
|
||
<line x1="-10000" y1="0" x2="10000" y2="0"/>
|
||
</g>
|
||
<use xlink:href="#sL" transform="rotate(45)"/>
|
||
<use xlink:href="#sL" transform="rotate(22.5)"/>
|
||
<use xlink:href="#sL" transform="rotate(-22.5)"/>
|
||
<use xlink:href="#sL" transform="rotate(11.25)"/>
|
||
<use xlink:href="#sL" transform="rotate(-11.25)"/>
|
||
<use xlink:href="#sL" transform="rotate(56.25)"/>
|
||
<use xlink:href="#sL" transform="rotate(-56.25)"/>
|
||
<g stroke-width="8">
|
||
<circle r="9" stroke="#000000" fill="#1b1b1b"/>
|
||
<circle r="75" stroke="#008000" fill="#ffffff" fill-opacity=".1"></circle>
|
||
<circle r="212" stroke="#1b1b1b"></circle>
|
||
<circle r="211" stroke="#008000" fill="#ffffff" fill-opacity=".1"></circle>
|
||
</g>
|
||
<g stroke="#1b1b1b">
|
||
<circle r="71"/>
|
||
<circle r="79"/>
|
||
<circle r="94"/>
|
||
<circle r="152"/>
|
||
<circle r="164"/>
|
||
<circle r="207"/>
|
||
</g>
|
||
<g id="s3">
|
||
<g id="s2">
|
||
<g id="s1" stroke="#1b1b1b">
|
||
<path d="M 39.416,95.16 C 33.65,103.95 30.76,110.5 28.93,117.18 C 15.24,113.43 13.54,127.15 23.04,131 C 13.71,145.8 7.84,173.93 0,212 L 0,103 A 103,103 0 0,0 39.416,95.16 z" fill="#47a3d1"/>
|
||
<path d="M 39.416,95.16 C 33.65,103.95 30.76,110.5 28.93,117.18 C 15.24,113.43 13.54,127.15 23.04,131 C 13.71,145.8 7.84,173.93 0,212 L 0,103 A 103,103 0 0,0 39.416,95.16 z" fill="black" transform="scale(-1,1)"/>
|
||
<path d="M -31.995,160.849 A 164,164 0 0,0 31.995,160.849 C 18.9,170.1 8.4,176.3 0,207 C -8.4,176.3 -18.9,170.1 -31.995,160.849 z" fill="#c2390f" transform="rotate(22.5)"/>
|
||
</g>
|
||
<use xlink:href="#s1" transform="rotate(45)"/>
|
||
</g>
|
||
<use xlink:href="#s2" transform="rotate(90)"/>
|
||
</g>
|
||
<use xlink:href="#s3" transform="scale(-1)"/>
|
||
</g>
|
||
</defs>
|
||
<g id="initial">
|
||
<rect x="0" y="0" width="100%" height="100%" fill="url(#oceanic)"></rect>
|
||
<use xlink:href="#rose" id="init-rose"></use>
|
||
</g>
|
||
</svg>
|
||
<div id="loading">
|
||
<div id="title_name">Azgaar's</div>
|
||
<div id="title">Fantasy Map Generator</div>
|
||
<div id="version">v. 0.58b</div>
|
||
<p id="loading-text">LOADING<span>.</span><span>.</span><span>.</span></p>
|
||
</div>
|
||
<canvas id="canvas" style="opacity: 0"></canvas>
|
||
<div id="optionsContainer" class="hidden">
|
||
<div id="collapsible">
|
||
<button id="optionsTrigger" onmouseover="tip('Click to toggle options. Hotkey: O')" class="options icon-right-open glow"></button>
|
||
<button id="regenerate" onmouseover="tip('Click to generate a new map. Hotkey: F6')" class="options">New Map!</button>
|
||
</div>
|
||
<div id="options">
|
||
<div class="drag-trigger" onmouseover="tip('Drag to move options pane')"></div>
|
||
<div class="tab">
|
||
<button id="layoutTab" onmouseover="tip('Click to open layout menu')" class="options">Layout</button>
|
||
<button id="styleTab" onmouseover="tip('Click to style menu')" class="options">Style</button>
|
||
<button id="optionsTab" onmouseover="tip('Click to change generation options')" class="options">Options</button>
|
||
<button id="customizeTab" onmouseover="tip('Click to open customization menu')" class="options">Customize</button>
|
||
<button id="aboutTab" onmouseover="tip('Click to see Generator info')" class="options">?</button>
|
||
</div>
|
||
<div id="layoutContent" class="tabcontent">
|
||
<p style="display: inline-block;">Select preset:</p>
|
||
<select id="layoutPreset">
|
||
<option value="layoutPolitical" selected>Political map</option>
|
||
<option value="layoutCultural">Cultural map</option>
|
||
<!-- <option value="layoutEconomical">Economical map</option> -->
|
||
<option value="layoutHeightmap">Heightmap</option>
|
||
<option value="layoutLandmass">Pure landmass</option>
|
||
</select>
|
||
<p>Displayed layers. Drag to move, click to toggle</p>
|
||
<ul id="mapLayers">
|
||
<li onmouseover="tip('Toggle Ocean pattern')" id="toggleOcean" onclick="$('#oceanPattern').fadeToggle()" class="solid">Ocean</li>
|
||
<li onmouseover="tip('Toggle Heightmap')" id="toggleHeight" class="buttonoff">Heightmap</li>
|
||
<li onmouseover="tip('Toggle Grid')" id="toggleGrid" class="buttonoff" onclick="$('#grid').fadeToggle()">Grid</li>
|
||
<li onmouseover="tip('Toggle Overlay (overlay type can be set in Style tab)')" id="toggleOverlay" class="buttonoff">Overlay</li>
|
||
<li onmouseover="tip('Toggle Cultural map (does not work good when counties layer is on)')" id="toggleCultures" class="buttonoff">Cultures</li>
|
||
<li onmouseover="tip('Toggle Routes')" id="toggleRoutes" onclick="$('#routes').fadeToggle()">Routes</li>
|
||
<li onmouseover="tip('Toggle Rivers')" id="toggleRivers" onclick="$('#rivers').fadeToggle()">Rivers</li>
|
||
<li onmouseover="tip('Toggle Countries')" id="toggleCountries">Countries</li>
|
||
<li onmouseover="tip('Toggle Borders')" id="toggleBorders" onclick="$('#borders').fadeToggle()">Borders</li>
|
||
<li onmouseover="tip('Toggle Relief icons')" id="toggleRelief" onclick="$('#terrain').fadeToggle()">Relief</li>
|
||
<li onmouseover="tip('Toggle Labels')" id="toggleLabels" onclick="$('#labels').fadeToggle()">Labels</li>
|
||
<li onmouseover="tip('Toggle Icons')" id="toggleIcons" onclick="$('#icons').fadeToggle()">Icons</li>
|
||
</ul>
|
||
<div id="layoutCheckboxes">
|
||
<input id="hideLabels" class="checkbox" type="checkbox" checked>
|
||
<label for="hideLabels" onmouseover="tip('Hide small labels (zoom in to show)')" class="checkbox-label">Hide small labels</label>
|
||
<input id="toggleTooltips" class="checkbox" type="checkbox" checked onclick="$('#tooltip').fadeToggle()">
|
||
<label for="toggleTooltips" onmouseover="tip('Toogle tooltip line')" class="checkbox-label">Show tooltips</label>
|
||
</div>
|
||
</div>
|
||
<div id="styleContent" class="tabcontent">
|
||
<p style="display: inline-block;">Select element:</p>
|
||
<select id="styleElementSelect">
|
||
<option value="grid">Grid</option>
|
||
<option value="neutralBorders">Borders (neutral)</option>
|
||
<option value="stateBorders">Borders (state)</option>
|
||
<option value="coastline">Coastline</option>
|
||
<option value="regions">Countries</option>
|
||
<option value="cults">Cultures</option>
|
||
<option value="terrs">Heightmap</option>
|
||
<option value="icons">Icons</option>
|
||
<option value="labels">Labels</option>
|
||
<option value="lakes">Lakes</option>
|
||
<option value="landmass">Landmass</option>
|
||
<option value="ocean" selected>Ocean</option>
|
||
<option value="overlay">Overlay</option>
|
||
<option value="terrain">Relief</option>
|
||
<option value="rivers">Rivers</option>
|
||
<option value="roads">Roads</option>
|
||
<option value="ruler">Rulers</option>
|
||
<option value="trails">Trails</option>
|
||
<option value="searoutes">Searoutes</option>
|
||
<option value="scaleBar">Scale bar</option>
|
||
</select>
|
||
<i id="restoreStyle" onmouseover="tip('Restore default style')" class="icon-ccw"></i>
|
||
<div id="styleInputs">
|
||
<div id="styleOverlay">
|
||
<br><span>Ensure Overlay layer is active (see Layout tab)</span><br>
|
||
<br>Overlay type: <select id="styleOverlayType" class="pureInput">
|
||
<option value="hex" selected>Hex grid</option>
|
||
<option value="square">Square grid</option>
|
||
<option value="windrose">Wind rose</option>
|
||
</select><br>
|
||
<br>Size: <input id="styleOverlaySize" type="range" min="2" max="20" step="0.2" value="5">
|
||
<output id="styleOverlaySizeOutput">5</output>
|
||
</div>
|
||
<div id="styleOcean">
|
||
<br>Elements:
|
||
<input id="styleOceanPattern" class="checkbox" type="checkbox" checked>
|
||
<label for="styleOceanPattern" onmouseover="tip('Toggle ocean pattern')" class="checkbox-label">Pattern</label>
|
||
<input id="styleOceanLayers" class="checkbox" type="checkbox" checked>
|
||
<label for="styleOceanLayers" onmouseover="tip('Toggle ocean layers')" class="checkbox-label">Layers</label><br>
|
||
Background: <input id="styleOceanBack" type="color" value="#000000"/><output id="styleOceanBackOutput">#000000</output><br>
|
||
Foreground: <input id="styleOceanFore" type="color" value="#53679f"/><output id="styleOceanForeOutput">#53679f</output>
|
||
</div>
|
||
<div id="styleFill">
|
||
Fill: <input id="styleFillInput" type="color" value="#5E4FA2"/>
|
||
<output id="styleFillOutput">#5E4FA2</output>
|
||
</div>
|
||
<div id="styleStroke">
|
||
Stroke: <input id="styleStrokeInput" type="color" value="#5E4FA2"/>
|
||
<output id="styleStrokeOutput">#5E4FA2</output>
|
||
</div>
|
||
<div id="styleStrokeWidth">
|
||
<br>Stroke width: <input id="styleStrokeWidthInput" type="range" min="0" max="3" step="0.01" value="1">
|
||
<output id="styleStrokeWidthOutput">1</output>
|
||
</div>
|
||
<div id="styleStrokeDasharray">
|
||
<br>Stroke dasharray: <input id="styleStrokeDasharrayInput" class="pureInput" value="1 2">
|
||
</div>
|
||
<div id="styleStrokeLinecap">
|
||
<br>Stroke linecap: <select id="styleStrokeLinecapInput" class="pureInput">
|
||
<option value="inherit" selected>Inherit</option>
|
||
<option value="butt">Butt</option>
|
||
<option value="round">Round</option>
|
||
<option value="square">Square</option>
|
||
</select>
|
||
</div>
|
||
<div id="styleFontSize">
|
||
<br>Font size: <button onmouseover="tip('Multiply all Fonts size by 1.1')" id="styleFontPlus">+</button><button onmouseover="tip('Multiply all Fonts size by 0.9')" id="styleFontMinus">-</button>
|
||
</div>
|
||
<div id="styleSize">
|
||
<br>Radius: <button onmouseover="tip('Multiply Radius by 1.1')" id="styleFillPlus">+</button><button onmouseover="tip('Multiply Radius by 0.9')" id="styleFillMinus">-</button>
|
||
<span> Stroke: </span><button onmouseover="tip('Multiply Stroke-width by 1.1')" id="styleStrokePlus">+</button><button onmouseover="tip('Multiply Stroke-width by 0.9')" id="styleStrokeMinus">-</button>
|
||
</div>
|
||
<div id="styleOpacity">
|
||
<br>Opacity: <input id="styleOpacityInput" type="range" min="0" max="1" step="0.01" value="1">
|
||
<output id="styleOpacityOutput">1</output>
|
||
</div>
|
||
<div id="styleFilter">
|
||
<br>Filter: <select id="styleFilterInput" class="pureInput">
|
||
<option value="" selected>None</option>
|
||
<option value="url(#blurFilter)">Blur 0.2</option>
|
||
<option value="url(#blur1)">Blur 1</option>
|
||
<option value="url(#blur5)">Blur 5</option>
|
||
<option value="url(#blur10)">Blur 10</option>
|
||
<option value="url(#splotch)">Splotch</option>
|
||
<option value="url(#bluredSplotch)">Blured Splotch</option>
|
||
<option value="url(#dropShadow)">Shadow</option>
|
||
<option value="url(#pencil)">Pencil</option>
|
||
<option value="url(#turbulence)">Turbulence</option>
|
||
</select>
|
||
</div>
|
||
<div id="styleScheme">
|
||
<br>Color scheme: <select id="styleSchemeInput" class="pureInput">
|
||
<option value="bright" selected>Bright</option>
|
||
<option value="light">Light</option>
|
||
<option value="green">Green</option>
|
||
<option value="monochrome">Monochrome</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div id="mapFilters">
|
||
<p>Toggle filters:</p>
|
||
<button id="grayscale" class="radio">Grayscale</button>
|
||
<button id="sepia" class="radio">Sepia</button>
|
||
<button id="dingy" class="radio">Dingy</button>
|
||
<button id="tint" class="radio">Tint</button>
|
||
</div>
|
||
</div>
|
||
<div id="optionsContent" class="tabcontent">
|
||
<p onmouseover="tip('Map generation setting. Generate a new map to apply the settings')">Generation options (new map to apply):</p>
|
||
<table>
|
||
<tr>
|
||
<td></td>
|
||
<td onmouseover="tip('Map canvas height and width in pixels. Highly affects performance')">Map size</td>
|
||
<td style="width: 130px;">
|
||
<span onmouseover="tip('Map width')">w:</span>
|
||
<input class="pairedNumber" id="mapWidthInput" type="number" min="240" value="960">
|
||
<span onmouseover="tip('Map height')">h:</span>
|
||
<input class="pairedNumber" id="mapHeightInput" type="number" min="135" value="540">
|
||
</td>
|
||
<td>
|
||
<i onmouseover="tip('Fit map to screen size')" id="updateFullscreen" class="icon-resize-full-alt"></i>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td onmouseover="tip('Cells density controls underlying graph size and hightly affects performance')">Map cells density</td>
|
||
<td>
|
||
<input id="sizeInput" type="range" min="1" max="3" value="1">
|
||
</td>
|
||
<td>
|
||
<output id="sizeOutput">1</output>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockTemplateInput" class="icon-lock-open"></i>
|
||
</td>
|
||
<td onmouseover="tip('Select template to be used for a Heightmap generation')">Heightmap template</td>
|
||
<td>
|
||
<select id="templateInput">
|
||
<option value="Volcano">Volcano</option>
|
||
<option value="High Island">High Island</option>
|
||
<option value="Low Island">Low Island</option>
|
||
<option value="Continents">Continents</option>
|
||
<option value="Archipelago">Archipelago</option>
|
||
<option value="Atoll">Atoll</option>
|
||
</select>
|
||
</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockManorsInput" class="icon-lock-open"></i>
|
||
</td>
|
||
<td onmouseover="tip('Define how many Settlements should be placed')">Burgs count</td>
|
||
<td>
|
||
<input id="manorsInput" type="range" min="0" max="999" value="500">
|
||
</td>
|
||
<td>
|
||
<output id="manorsOutput">500</output>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockRegionsInput" class="icon-lock-open"></i>
|
||
</td>
|
||
<td onmouseover="tip('Define how many Countries should be created')">States count</td>
|
||
<td>
|
||
<input id="regionsInput" type="range" min="0" max="100" value="13">
|
||
</td>
|
||
<td>
|
||
<output id="regionsOutput">13</output>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockPowerInput" class="icon-lock-open"></i>
|
||
</td>
|
||
<td onmouseover="tip('Define Countries size variety. Set to 0 to have all countries sized the same')">States disbalance</td>
|
||
<td>
|
||
<input id="powerInput" type="range" min="0" max="10" step="0.2" value="5">
|
||
</td>
|
||
<td>
|
||
<output id="powerOutput">5</output><br>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<i onmouseover="tip('Unlock to allow option randomization on new map generation')" data-locked=1 id="lockNeutralInput" class="icon-lock"></i>
|
||
</td>
|
||
<td onmouseover="tip('Distance to a consider a land as neutral')">Neutral distance</td>
|
||
<td>
|
||
<input id="neutralInput" type="range" min="1" max="500" step="1" value="200">
|
||
</td>
|
||
<td>
|
||
<output id="neutralOutput">200</output>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockCulturesInput" class="icon-lock-open"></i>
|
||
</td>
|
||
<td onmouseover="tip('Define how many Cultures should be generated')">Cultures count</td>
|
||
<td>
|
||
<input id="culturesInput" type="range" min="1" max="13" value="7">
|
||
</td>
|
||
<td>
|
||
<output id="culturesOutput">7</output>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<i onmouseover="tip('Lock to restrict option randomization on new map generation')" data-locked=0 id="lockPrecInput" class="icon-lock-open"></i>
|
||
</td>
|
||
<td onmouseover="tip('Set precipitation level. Controls river quantity and power')">Precipitation</td>
|
||
<td>
|
||
<input id="precInput" type="range" min="0" max="50" value="15">
|
||
</td>
|
||
<td>
|
||
<output id="precOutput">15</output>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<i onmouseover="tip('Unlock to allow option randomization on new map generation')" data-locked=1 id="lockSwampinessInput" class="icon-lock"></i>
|
||
</td>
|
||
<td onmouseover="tip('Define the land swampiness. Increase to see more marshes on Relief map')">Swampiness</td>
|
||
<td>
|
||
<input id="swampinessInput" type="range" min="0" max="100" value="10">
|
||
</td>
|
||
<td>
|
||
<output id="swampinessOutput">10</output>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td onmouseover="tip('Define the coast outline contours scheme')">Ocean layers</td>
|
||
<td>
|
||
<select id="outlineLayersInput">
|
||
<option value="random">Random</option>
|
||
<option value="none">No outline</option>
|
||
<option value="-6,-3,-1" selected>Standard 3</option>
|
||
<option value="-6,-4,-2">Indented 3</option>
|
||
<option value="-9,-6,-3,-1">Standard 4</option>
|
||
<option value="-6,-5,-4,-3,-2,-1">Smooth 6</option>
|
||
<option value="-9,-8,-7,-6,-5,-4,-3,-2,-1">Smooth 9</option>
|
||
</select>
|
||
</td>
|
||
<td></td>
|
||
</tr>
|
||
</table>
|
||
<p onmouseover="tip('Generator settings. Getting applied immediately on change')">Generator settings:</p>
|
||
<table>
|
||
<tr>
|
||
<td></td>
|
||
<td onmouseover="tip('Define relative size of a saved png images. Consider saving big images is slow')">PNG resolution</td>
|
||
<td>
|
||
<input id="pngResolutionInput" type="range" min="1" max="10" value="5" oninput="pngResolutionOutput.value = this.value + 'x'">
|
||
</td>
|
||
<td>
|
||
<output id="pngResolutionOutput">5x</output>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td onmouseover="tip('Set mininum and maximum zoom level')">Zoom extent</td>
|
||
<td style="width: 130px;">
|
||
<span onmouseover="tip('Zoom out limit')">o:</span>
|
||
<input class="pairedNumber" id="zoomExtentMin" type="number" min="0.2" step="0.1" max="20" value="1">
|
||
<span onmouseover="tip('Zoom in limit')">i:</span>
|
||
<input class="pairedNumber" id="zoomExtentMax" type="number" min="1" max="50" value="20">
|
||
</td>
|
||
<td>
|
||
<i onmouseover="tip('Restore default [1, 20] zoom extent')" id="zoomExtentDefault" class="icon-ccw"></i>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<button id="optionsReset" onmouseover="tip('Click to restore default options')">Reset Defaults</button>
|
||
</div>
|
||
<div id="customizeContent" class="tabcontent" style="display: block;">
|
||
<div id="openEditor">
|
||
<p>Customize:</p>
|
||
<button id="editHeightmap" onmouseover="tip('Click to open Heightmap customization menu')">Heightmap</button>
|
||
<button id="editCountries" onmouseover="tip('Click to open Countries Editor')">Countries</button>
|
||
<button id="editCultures" onmouseover="tip('Click to open Cultures Editor')">Cultures</button>
|
||
<button id="editScale" onmouseover="tip('Click to open Scale Editor')">Scale</button>
|
||
</div>
|
||
<div id="customizeHeightmap" style="display: none;">
|
||
<p>Heightmap customization:</p>
|
||
<div>
|
||
<button onmouseover="tip('Edit the current Heightmap')" id="fromHeightmap">Edit</button>
|
||
<button onmouseover="tip('Remove all data and start from scratch')" id="fromScratch">Clear all</button>
|
||
<button class="buttonoff" onmouseover="tip('Finalize the Heightmap. Not allowed if landmass area is insufficient')" id="getMap">Complete</button>
|
||
</div>
|
||
<div id="customizationMenu" class="hidden">
|
||
<div id="customizeTools">
|
||
<label onmouseover="tip('Customization Tools')">Tools:</label><br>
|
||
<button onmouseover="tip('Display brushes panel')" id="paintBrushes">Paint Brushes</button>
|
||
<button onmouseover="tip('Open template editor')" id="applyTemplate">Template Editor</button>
|
||
<button onmouseover="tip('Open Image Converter')" id="convertImage">Image Converter</button>
|
||
<button onmouseover="tip('Show Heightmap in perspective')" id="perspectiveView">Perspective View</button>
|
||
</div>
|
||
<div id="customizeOptions">
|
||
<input id="renderOcean" class="checkbox" type="checkbox">
|
||
<label for="renderOcean" onmouseover="tip('Render cells below sea level')" class="checkbox-label">Render ocean cells</label>
|
||
<input id="changeHeights" class="checkbox" type="checkbox">
|
||
<label for="changeHeights" onmouseover="tip('Allow system to change custom heights and add lakes in depressed cells')" class="checkbox-label">Change heights</label>
|
||
</div>
|
||
<label onmouseover="tip('Number of Land cells and landmass/ocean ratio')">Land cells: <span id="landmassCounter">0</span></label><hr>
|
||
</div>
|
||
</div>
|
||
<div id="addFeature">
|
||
<p>Click to add:</p>
|
||
<button id="addBurg" onmouseover="tip('Click on map to place a burg')">Burg</button>
|
||
<button id="addLabel" onmouseover="tip('Click on map to place label')">Label</button>
|
||
<button id="addRelief" onmouseover="tip('Click on map to place a relief icon')">Relief Icon</button>
|
||
<button id="addRiver" onmouseover="tip('Click on map to place new river or extend an existing one')">River</button>
|
||
<button id="addRoute" onmouseover="tip('Click on map to place a route')">Route</button>
|
||
</div>
|
||
<div id="cellInfo">
|
||
<p>Cell info:</p>
|
||
<div>
|
||
Coord: <span id="infoX">0</span>/<span id="infoY">0</span><br>
|
||
Cell: <span id="infoCell">0</span><br>
|
||
Area: <span id="infoArea">0</span><br>
|
||
Height: <span id="infoHeight">0</span><br>
|
||
Flux: <span id="infoFlux">0</span>
|
||
</div>
|
||
<div>
|
||
Type: <span id="infoFeature">n/a</span><br>
|
||
Country: <span id="infoCountry">n/a</span><br>
|
||
Culture: <span id="infoCulture">n/a</span><br>
|
||
Population: <span id="infoPopulation">0</span><br>
|
||
Burg: <span id="infoBurg">n/a</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="aboutContent" class="tabcontent">
|
||
<p><a href="https://github.com/Azgaar/Fantasy-Map-Generator" target="_blank">Fantasy Map Generator</a> is an <a href="https://github.com/Azgaar/Fantasy-Map-Generator/blob/master/LICENSE" target="_blank">open source</a> tool which procedurally generates fantasy maps. You may use auto-generated maps as they are, edit them or even create a map from scratch. Check out the <a href="https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Quick-Start-Tutorial" target="_blank">quick start tutorial</a> and <a href="https://github.com/Azgaar/Fantasy-Map-Generator/wiki" target="_blank">project wiki</a> for guidance. Join our <a href="https://www.reddit.com/r/FantasyMapGenerator/" target="_blank">Reddit Community</a> if you have questions, need any help, have a suggestion or just want to share a created map.</p>
|
||
<p>The project is under active development. For older versions see the <a href="https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog" target="_blank">changelog</a>. Some details are covered in my <a href="https://azgaar.wordpress.com/" target="_blank">blog</a>. To track the current progress see the <a href="https://trello.com/b/7x832DG4/fantasy-map-generator" target="_blank">devboard</a>.</p>
|
||
<p>Please report bugs <a href="https://github.com/Azgaar/Fantasy-Map-Generator/issues" target="_blank">here</a>. You may also <a href="mailto:maxganiev@yandex.ru" target="_blank">send me</a> an email.</p>
|
||
<ul class="share-buttons">
|
||
<li><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator%2F"e=" onmouseover="tip('Share on Facebook')" target="_blank"><img alt="Share on Facebook" src="images/Facebook.png" /></a></li>
|
||
<li><a href="https://twitter.com/intent/tweet?source=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator&text=%23FantasyMapGenerator%0A%0Ahttps%3A//azgaar.github.io/Fantasy-Map-Generator" target="_blank" onmouseover="tip('Tweet')"><img alt="Tweet" src="images/Twitter.png" /></a></li>
|
||
<li><a href="http://www.tumblr.com/share?v=3&u=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator" target="_blank" onmouseover="tip('Post to Tumblr')"><img alt="Post to Tumblr" src="images/Tumblr.png" /></a></li>
|
||
<li><a href="http://pinterest.com/pin/create/button/?url=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator" target="_blank" onmouseover="tip('Pin it')"><img alt="Pin it" src="images/Pinterest.png" /></a></li>
|
||
<li><a href="http://www.reddit.com/submit?url=https%3A%2F%2Fazgaar.github.io%2FFantasy-Map-Generator" target="_blank" onmouseover="tip('Submit to Reddit')"><img alt="Submit to Reddit" src="images/Reddit.png" /></a></li>
|
||
</ul>
|
||
</div>
|
||
<div id="sticked">
|
||
<button id="randomMap" onmouseover="tip('Generate a new map based on options. May take about 1 minute. Hotkey: F6')" class="options">New Map</button>
|
||
<button id="saveButton" onmouseover="tip('Select file format to save map')" class="options">Save as</button>
|
||
<div id="saveDropdown">
|
||
<div id="saveMap" onmouseover="tip('Save as fully functional map in .map format. Hotkey: M')">.map</div>
|
||
<div id="saveSVG" onmouseover="tip('Download the map as .svg image (open in browser or in Inkscape. Hotkey: S)')">.svg</div>
|
||
<div id="savePNG" onmouseover="tip('Download the visible part of the map as 4K .png image. Please ensure popups are not blocked! Hotkey: P')">.png</div>
|
||
</div>
|
||
<button id="loadMap" onmouseover="tip('Load fully functional map in a .map format. Hotkey: L')" class="options">Load</button>
|
||
<button id="zoomReset" onmouseover="tip('Reset map zoom. Hotkey: 0')" class="options">Reset Zoom</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="labelEditor" class="dialog" style="display: none">
|
||
<button id="editGroupButton" onmouseover="tip('Edit label Group')" class="editButton icon-tags"></button>
|
||
<select id="editGroupSelect" onmouseover="tip('Select Group for this label')" class="editTrigger"></select>
|
||
<input id="editGroupInput" placeholder="new name" onmouseover="tip('Declare new Group for this label')" class="editTrigger"/>
|
||
<span id="editGroupNew" onmouseover="tip('Declare new Group for this label')" class="editButtonS icon-plus"></span>
|
||
<span id="editGroupRemove" onmouseover="tip('Remove the Group with all labels')" class="editButtonS icon-trash"></span>
|
||
<button id="editTextButton" onmouseover="tip('Edit label Text')" class="editButton icon-pencil"></button>
|
||
<input id="editText" class="editTrigger"/>
|
||
<span id="editTextRandom" onmouseover="tip('Generate random name')" class="editButtonS icon-shuffle"></span>
|
||
<button id="editFontButton" onmouseover="tip('Select Font for the entire Group')" class="editButton icon-font"></button>
|
||
<span id="editExternalFont" onmouseover="tip('Fetch fonts by linking @font-face declaration, just populate with font name if using Google font (fonts.google.com)')" class="editButtonS icon-link"></span>
|
||
<select id="editFontSelect" class="editTrigger" onmouseover="tip('Select one of the default Fonts')"></select>
|
||
<input id="editFontInput" placeholder="link to @font-face" onmouseover="tip('Fetch fonts by linking @font-face declaration')" class="editTrigger"/>
|
||
<i id="editSizeIcon" class="icon-text-height hidden"></i>
|
||
<input id="editSize" onmouseover="tip('Change Font size for the label Group')" class="editTrigger" value="14" type="number" min="1" max="100" step=".5"/>
|
||
<button id="editStyleButton" onmouseover="tip('Select text color and opacity for the label Group')" class="editButton icon-brush"></button>
|
||
<input id="editColor" type="color" class="editTrigger editColor" value="#3e3e4b">
|
||
<i id="editOpacityIcon" class="icon-adjust hidden"></i>
|
||
<input id="editOpacity" onmouseover="tip('Change Opacity for the entire Group')" class="editTrigger" value="1" type="number" min="0" max="1" step="0.02">
|
||
<i id="editShadowIcon" class="icon-clone hidden"></i>
|
||
<input id="editShadow" onmouseover="tip('Change Shadow for the entire Group')" class="editTrigger" value="1" type="number" min="0" max="1" step="0.02" disabled>
|
||
<button id="editAngleButton" onmouseover="tip('Rotate the label')" class="editButton icon-ccw"></button>
|
||
<input id="editAngle" class="editTrigger" value="0" type="range" min="-180" max="180" step="0.2">
|
||
<span id="editAngleValue" class="editValue">0°</span>
|
||
<button id="editCopy" onmouseover="tip('Copy the label')" class="editButton icon-clone"></button>
|
||
<button id="editRemoveSingle" onmouseover="tip('Remove the label')" class="editButton icon-trash"></button>
|
||
</div>
|
||
|
||
<div id="riverEditor" class="dialog" style="display: none">
|
||
<button id="riverWidth" onmouseover="tip('Change river width and widening')" class="icon-sort-alt-up" onclick='$("#riverEditor > *").not(this).not("#riverResizeButtons").toggle();'></button>
|
||
<div id="riverWidthButtons" style="display: none">
|
||
<i id="riverWidthIcon" onmouseover="tip('Change river width')" class="icon-w"></i>
|
||
<input id="riverWidthInput" onmouseover="tip('Change river width')" value="1" type="range" min="0.2" max="5" step="0.1">
|
||
<i id="riverIncrementIcon" onmouseover="tip('Change river bed increment (widening speed)')" class="icon-i"></i>
|
||
<input id="riverIncrement" onmouseover="tip('Change river bed increment (widening speed)')" value="1" type="range" min="0.02" max="2" step="0.02">
|
||
</div>
|
||
<button id="riverRegenerate" onmouseover="tip('Regenerate river')" class="icon-shuffle"></button>
|
||
<button id="riverResize" onmouseover="tip('Visually transform (rotate, rescale) river')" class="icon-arrows-cw" onclick='$("#riverEditor > *").not(this).not("#riverWidthButtons").toggle();'></button>
|
||
<div id="riverResizeButtons" style="display: none">
|
||
<i id="riverAngleIcon" onmouseover="tip('Rotate river (set angle)')" class="icon-a"></i>
|
||
<input id="riverAngle" onmouseover="tip('Rotate river (set angle)')" value="0" type="range" min="-180" max="180" step="0.2">
|
||
<span id="riverAngleValue">0°</span>
|
||
<i id="riverScaleIcon" onmouseover="tip('Change river scale')" class="icon-s"></i>
|
||
<input id="riverScale" onmouseover="tip('Change river scale')" value="1" type="number" min="0.1" max="3" step="0.01">
|
||
<span id="riverReset" onmouseover="tip('Reset transformation to default')" class="icon-cancel pointer"></span>
|
||
</div>
|
||
<button id="riverCopy" onmouseover="tip('Copy river')" class="icon-clone"></button>
|
||
<button id="riverNew" onmouseover="tip('Create new river clicking on map')" class="icon-map-pin"></button>
|
||
<button id="riverRemove" onmouseover="tip('Remove river')" class="icon-trash"></button>
|
||
</div>
|
||
|
||
<div id="routeEditor" class="dialog" style="display: none">
|
||
<button id="routeGroups" onmouseover="tip('Change path group')" class="icon-map-signs" onclick="$('#routeEditor').children().not(this).toggle()"></button>
|
||
<div id="routeGroupsSelection" style="display: none">
|
||
<select id="routeGroup" onmouseover="tip('Select a group for this route')">
|
||
<option value="roads" selected>roads</option>
|
||
</select>
|
||
</div>
|
||
<button id="routeLength">0</button>
|
||
<button id="routeSplit" onmouseover="tip('Click on a control point to split the route')" class="icon-unlink" onclick="$(this).toggleClass('pressed')"></button>
|
||
<button id="routeNew" onmouseover="tip('Create new route clicking on map')" class="icon-map-pin"></button>
|
||
<button id="routeRemove" onmouseover="tip('Remove route')" class="icon-trash"></button>
|
||
</div>
|
||
|
||
<div id="iconEditor" class="dialog" style="display: none">
|
||
<button id="iconGroups" onmouseover="tip('Change icon group')" class="icon-tags"></button>
|
||
<div id="iconGroupsSelection" style="display: none">
|
||
<select id="iconGroup" onmouseover="tip('Select a group for this icon')"></select>
|
||
<i id="iconRemoveGroup" onmouseover="tip('Remove selected icon group')" class="icon-trash pointer"></i>
|
||
</div>
|
||
<button id="iconColors" onmouseover="tip('Change icon colors')" class="editButton icon-brush"></button>
|
||
<div id="iconColorsSection" style="display: none">
|
||
<i onmouseover="tip('Change group fill color')" class="icon-f"></i>
|
||
<input id="iconFillColor" onmouseover="tip('Change group fill color')" type="color" class="editColor" value="#000000">
|
||
<i onmouseover="tip('Change group stroke color')" class="icon-s"></i>
|
||
<input id="iconStrokeColor" onmouseover="tip('Change group stroke color')" type="color" class="editColor" value="#000000">
|
||
</div>
|
||
<button id="iconSetSize" onmouseover="tip('Change group size')" class="icon-resize-full"></button>
|
||
<div id="iconSizeSection" style="display: none">
|
||
<i onmouseover="tip('Change size for group icon')" class="icon-s"></i>
|
||
<input id="iconSize" onmouseover="tip('Change size for group icon')" type="range" class="editRange" value="1" min=".5" max="10" step=".05"></select>
|
||
<i onmouseover="tip('Change group stroke-width')" class="icon-w"></i>
|
||
<input id="iconStrokeWidth" onmouseover="tip('Change group stroke-width')" type="number" class="editNumber" value="1" min="0" max="5" step=".02"></select>
|
||
</div>
|
||
<button id="iconCopy" onmouseover="tip('Copy the icon')" class="icon-clone"></button>
|
||
<button id="iconRemove" onmouseover="tip('Remove icon')" class="icon-trash"></button>
|
||
</div>
|
||
|
||
<div id="reliefEditor" class="dialog" style="display: none">
|
||
<button id="reliefGroups" onmouseover="tip('Change relief icon')" class="icon-tags"></button>
|
||
<div id="reliefGroupsSelection" style="display: none">
|
||
<select id="reliefGroup" onmouseover="tip('Change relief icon')">
|
||
<option value="mounts" selected>mounts</option>
|
||
<option value="hills">hills</option>
|
||
<option value="swamps">swamps</option>
|
||
<option value="forests">forests</option>
|
||
</select>
|
||
<i id="reliefRemoveGroup" onmouseover="tip('Remove all icons within selected group')" class="icon-trash pointer"></i>
|
||
</div>
|
||
<button id="reliefCopy" onmouseover="tip('Copy the relief icon')" class="icon-clone"></button>
|
||
<button id="reliefAddfromEditor" onmouseover="tip('Add relief Icon')" class="icon-plus"></button>
|
||
<button id="reliefRemove" onmouseover="tip('Remove the relief icon')" class="icon-trash"></button>
|
||
</div>
|
||
|
||
<div id="burgEditor" class="dialog" style="display: none">
|
||
<button id="burgGroup" onmouseover="tip('Change Burg Group')" class="icon-tags"></button>
|
||
<div id="burgGroupSection" style="display: none">
|
||
<select id="burgSelectGroup" onmouseover="tip('Select a Group for this Burg. Will not affect burg function (capital status etc.)')" style="width: 117px;"></select>
|
||
<input id="burgInputGroup" placeholder="type new Group name" onmouseover="tip('Create new Group for the Burg')" style="display: none; width: 113px;"/>
|
||
<i id="burgAddGroup" onmouseover="tip('Create new Group for the Burg')" class="icon-plus pointer"></i>
|
||
<i id="burgRemoveGroup" onmouseover="tip('Remove selected Burg Group')" class="icon-trash pointer"></i>
|
||
</div>
|
||
|
||
<button id="burgEditLabel" onmouseover="tip('Change label for the Burg Group')" class="icon-map-signs"></button>
|
||
<div id="burgEditLabelSection" style="display: none">
|
||
|
||
<button id="burgName" onmouseover="tip('Change Burg name')" class="icon-pencil"></button>
|
||
<div id="burgNameSection" style="display: none">
|
||
<input id="burgNameInput" onmouseover="tip('Populate to rename the Burg')" style="width: 117px"/>
|
||
<span id="burgNameReCulture" onmouseover="tip('Generate culture-specific name for the Burg')" class="icon-book pointer"></span>
|
||
<span id="burgNameReRandom" onmouseover="tip('Generate random name for the Burg')" class="icon-globe pointer"></span>
|
||
</div>
|
||
<button id="burgSelectFont" onmouseover="tip('Select font for the Burg Group label')" class="icon-font"></button>
|
||
<div id="burgSelectFontSection" style="display: none">
|
||
<i id="burgToggleExternalFont" onmouseover="tip('Fetch fonts by linking @font-face declaration, just populate with font name if using Google font (fonts.google.com)')" class="icon-link pointer"></i>
|
||
<input id="burgInputExternalFont" placeholder="link to @font-face" onmouseover="tip('Fetch fonts by linking @font-face declaration')" style="display: none; width: 113px;"/>
|
||
<select id="burgSelectDefaultFont" onmouseover="tip('Select a font for the Group')" style="width: 117px;"></select>
|
||
</div>
|
||
|
||
<button id="burgSetFontSize" onmouseover="tip('Set font size for the Burg Group label')" class="icon-text-height"></button>
|
||
<div id="burgFontSizeSection" style="display: none">
|
||
<input id="burgSetLabelSize" onmouseover="tip('Set font size for the Burg Group label')" value="14" type="number" min="1" max="100" step=".5" style="width: 117px"/>
|
||
</div>
|
||
|
||
<button id="burgLabelColor" onmouseover="tip('Set label color for the Burg Group')" class="icon-brush"></button>
|
||
<div id="burgLabelColorSection" style="display: none">
|
||
<input onmouseover="tip('Set label color for the Burg Group')" id="burgLabelColorInput" type="color" class="editColor" value="#3e3e4b">
|
||
<i onmouseover="tip('Set label opacity for the Burg Group')" class="icon-adjust"></i>
|
||
<input onmouseover="tip('Set label opacity for the Burg Group')" id="burgLabelOpacity" value="1" type="number" min="0" max="1" step="0.02">
|
||
</div>
|
||
|
||
<button id="burgLabelRotation" onmouseover="tip('Rotate the label')" class="icon-ccw"></button>
|
||
<div id="burgLabelRotationSection" style="display: none; width: 142px;">
|
||
<input id="burgLabelAngle" class="editTrigger" value="0" type="range" min="-180" max="180" step="0.2" style="width: 98px">
|
||
<output id="burgLabelAngleOutput">0°</output>
|
||
</div>
|
||
</div>
|
||
|
||
<button id="burgEditIcon" onmouseover="tip('Change icon for the Burg Group')" class="icon-fort-awesome"></button>
|
||
<div id="burgEditIconSection" style="display: none">
|
||
|
||
<button id="burgIconFill" onmouseover="tip('Change icon fill')" class="icon-dot-circled"></button>
|
||
<div id="burgIconFillSection" style="display: none;">
|
||
<i onmouseover="tip('Change icon size')" class="icon-resize-full"></i>
|
||
<input id="burgIconSize" onmouseover="tip('Change icon size')" type="range" class="editRange" value="1" min=".1" max="5" step=".05" style="width: 60px;"></select>
|
||
<i onmouseover="tip('Set icon fill opacity')" class="icon-adjust"></i>
|
||
<input id="burgIconFillOpacity" onmouseover="tip('Set icon fill opacity')" value="1" type="number" min="0" max="1" step="0.02" style="width: 40px;">
|
||
<input id="burgIconFillColor" onmouseover="tip('Change icon fill color')" type="color" class="editColor" value="#000000">
|
||
</div>
|
||
|
||
<button id="burgIconStroke" onmouseover="tip('Change icon stroke')" class="icon-circle-empty"></button>
|
||
<div id="burgIconStrokeSection" style="display: none;">
|
||
<i onmouseover="tip('Change icon stroke width')" class="icon-resize-horizontal"></i>
|
||
<input id="burgIconStrokeWidth" onmouseover="tip('Change icon stroke width')" type="number" value="1" min="0" max="2" step=".02" style="width: 40px;"></select>
|
||
<i onmouseover="tip('Set icon stroke opacity')" class="icon-adjust"></i>
|
||
<input id="burgIconStrokeOpacity" onmouseover="tip('Set icon stroke opacity')" value="1" type="number" min="0" max="1" step="0.02" style="width: 40px;">
|
||
<input id="burgIconStrokeColor" onmouseover="tip('Change icon stroke color')" type="color" class="editColor" value="#000000">
|
||
</div>
|
||
</div>
|
||
|
||
<button id="burgFeatures" onmouseover="tip('Change Burg features')" class="icon-cog-alt"></button>
|
||
<div id="burgFeaturesSection" style="display: none">
|
||
<button id="burgToggleCapital" onmouseover="tip('Mark the Burg as country capital. Neutral burg cannot be a capital')" class="icon-star"></button>
|
||
<button id="burgTogglePort" onmouseover="tip('Mark the Burg as port (toggle anchor icon)')" class="icon-anchor"></button>
|
||
<i onmouseover="tip('Set Burg population')" class="icon-users"></i>
|
||
<input id="burgPopulation" onmouseover="tip('Set Burg population (in population points)')" type="number" value="1" min="0" step="1" style="width: 50px;"></select>
|
||
<output id="burgPopulationFriendly" onmouseover="tip('Burg population (in people)')">1000</output>
|
||
</div>
|
||
|
||
<button id="burgRelocate" onmouseover="tip('Move burg to a different cell')" class="icon-target"></button>
|
||
<button id="burgAddfromEditor" onmouseover="tip('Add new Burg')" class="icon-plus"></button>
|
||
<button id="burgRemove" onmouseover="tip('Remove the Burg')" class="icon-trash"></button>
|
||
</div>
|
||
|
||
<div id="templateEditor" class="dialog stable" style="display: none">
|
||
<div id="templateTop">
|
||
Base template: <select id="templateSelect" data-prev="templateCustom" onmouseover="tip('Select base template')">
|
||
<option value="templateCustom" selected>Custom</option>
|
||
<option value="templateVolcano">Volcano</option>
|
||
<option value="templateHighIsland">High Island</option>
|
||
<option value="templateLowIsland">Low Island</option>
|
||
<option value="templateContinents">Continents</option>
|
||
<option value="templateArchipelago">Archipelago</option>
|
||
<option value="templateAtoll">Atoll</option>
|
||
</select>
|
||
</div>
|
||
<div id="templateTools">
|
||
<button id="templateMountain" onmouseover="tip('Mountain: high big blob. Can be placed only once and only as a first step')" class="noicon">M</button>
|
||
<button id="templateHill" onmouseover="tip('Hill: small blob')" class="noicon">H</button>
|
||
<button id="templatePit" onmouseover="tip('Pit: round depression')" class="noicon">P</button>
|
||
<button id="templateRange" onmouseover="tip('Range: elongated elevation')" class="noicon">R</button>
|
||
<button id="templateTrough" onmouseover="tip('Trough: elongated depression')" class="noicon">T</button>
|
||
<button id="templateStrait" onmouseover="tip('Strait: centered vertical depression')" class="noicon">S</button>
|
||
<button id="templateAdd" onmouseover="tip('Add or subtract value from all heights')" class="noicon">+</button>
|
||
<button id="templateMultiply" onmouseover="tip('Multiply all heights by factor')" class="noicon">*</button>
|
||
<button id="templateSmooth" onmouseover="tip('Smooth the map replacing cell heights by an average values of its neighbors')" class="noicon">~</button>
|
||
</div>
|
||
<div id="templateBody" data-changed=0>
|
||
<div data-type="Mountain">Mountain
|
||
<span onmouseover="tip('Remove step')" class="icon-trash-empty" onclick="this.parentNode.parentNode.removeChild(this.parentNode)"></span>
|
||
</div>
|
||
</div>
|
||
<div id="templateBottom">
|
||
<button id="templateRun" onmouseover="tip('Apply current template')" class="icon-play-circled2"></button>
|
||
<button id="templateUndo" onmouseover="tip('Undo the latest action')" class="icon-ccw" disabled></button>
|
||
<button id="templateRedo" onmouseover="tip('Redo the action')" class="icon-cw" disabled></button>
|
||
<button id="templateComplete" onmouseover="tip('Finalize the Heightmap. Not allowed if insufficient land area available')" class="icon-check"></button>
|
||
<button id="templateSave" onmouseover="tip('Save template')" class="icon-download"></button>
|
||
<button id="templateLoad" onmouseover="tip('Open previously saved template')" class="icon-upload"></button>
|
||
<button id="templateMail" onclick="window.open('mailto:maxganiev@yandex.com?Subject=Template%20suggestion', '_blank')" onmouseover="tip('Send a template suggestion to me')" class="icon-mail-alt"></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="imageConverter" class="dialog stable" style="display: none">
|
||
<div id="convertImageButtons">
|
||
<button id="convertImageLoad" onmouseover="tip('Load image to convert')" class="icon-upload"></button>
|
||
<button id="convertAutoLum" onmouseover="tip('Auto-assign colors based on liminosity')" class="icon-adjust"></button>
|
||
<button id="convertAutoHue" onmouseover="tip('Auto-assign colors based on hue')" class="icon-brush"></button>
|
||
<button id="convertColorsMinus" onmouseover="tip('Reduce the number of colors. Minimal number is 3')" class="icon-minus-squared"></button>
|
||
<button id="convertColorsPlus" onmouseover="tip('Increase the number of colors. Maximum number is 256')" class="icon-plus-squared"></button>
|
||
<input id="convertColors" value="12" style="display: none;"/>
|
||
<button id="convertImageGrid" onmouseover="tip('Toggle grid')" class="icon-eye"></button>
|
||
<button id="convertOverlayButton" onmouseover="tip('Change overlay opacity')" class="icon-clone"></button>
|
||
<input id="convertOverlay" onmouseover="tip('Change overlay opacity')" type="range" min="0" max="1" step="0.01" value="0" style="display: none;">
|
||
<span id="convertOverlayValue" onmouseover="tip('Overlay opacity')" style="display: none;">0</span>
|
||
<button id="convertComplete" onmouseover="tip('Complete conversion. All unassigned colors will be considered as ocean')" class="icon-check"></button>
|
||
</div>
|
||
<div id="colorsSelect">
|
||
<div id="colorScheme"></div>
|
||
<span id="colorsSelectValue">0</span>
|
||
</div>
|
||
<div id="colorsAssigned" style="display: none">
|
||
<label>Assigned colors: </label><br>
|
||
</div>
|
||
<div id="colorsUnassigned" style="display: none">
|
||
<label>Unassigned colors: </label><br>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="brushesPanel" class="dialog stable" style="display: none">
|
||
<div id="brushesButtons">
|
||
<button id="brushElevate" onmouseover="tip('Click and drag the map to increase cells elevation')" class="noicon">↥</button>
|
||
<button id="brushDepress" onmouseover="tip('Click and drag the map to decrease cells elevation')" class="noicon">↧</button>
|
||
<button id="brushAlign" onmouseover="tip('Click and drag the map to align cells elevation')" class="noicon">=</button>
|
||
<button id="brushSmooth" onmouseover="tip('Click and drag the map to smooth cells elevation')" class="noicon">~</button>
|
||
<button id="brushHill" onmouseover="tip('Click on the map to place a Hill')" class="feature noicon">H</button>
|
||
<button id="brushPit" onmouseover="tip('Click on the map to place a Pit')" class="feature noicon">P</button>
|
||
<button id="brushRange" onmouseover="tip('Select two points to place a Range')" class="feature noicon">R</button>
|
||
<button id="brushTrough" onmouseover="tip('Select two points to place a Trought')" class="feature noicon">T</button>
|
||
</div>
|
||
<div style="display: table;">
|
||
<label id="brushRadiusLabel" onmouseover="tip('Set the brush effective radius. Works only with 4 brushes above')" class="disabled italic">R:</label>
|
||
<input id="brushRadius" onchange="this.title = this.value" type="range" min="1" max="10" value="3" class="disabled" disabled>
|
||
<label onmouseover="tip('Set the brush power')" class="italic">H:</label>
|
||
<input id="brushPower" onchange="this.title = this.value" type="range" min="0.01" max="0.3" step="0.01" value="0.05">
|
||
</div>
|
||
<div id="modifyButtons">
|
||
<button id="undo" onmouseover="tip('Undo the latest action (Ctrl + Z)')" class="icon-ccw" disabled></button>
|
||
<button id="redo" onmouseover="tip('Redo the action (Ctrl + Y)')" class="icon-cw" disabled></button>
|
||
<button id="rescaleButton" onmouseover="tip('Show rescaler slider')" class="icon-exchange"></button>
|
||
<input id="rescaler" onmouseover="tip('Slide to change map height')" type="range" min="1" max="10" step="0.1" value="5" class="hidden">
|
||
<button id="rescaleCondButton" onmouseover="tip('Conditional rescaler')" class="icon-if"></button>
|
||
<label class="condition hidden">h ≥</label>
|
||
<input id="rescaleLower" class="condition hidden" onmouseover="tip('Set lower threshold')" value="0.2" type="number" min="0" max="1" step="0.01">
|
||
<label class="condition hidden">≤</label>
|
||
<input id="rescaleHigher" class="condition hidden" onmouseover="tip('Set higher threshold')" value="1" type="number" min="0.01" max="1" step="0.01">
|
||
<label class="condition hidden">⇒</label>
|
||
<select class="condition hidden" id="conditionSign">
|
||
<option value="×" selected>×</option>
|
||
<option value="÷">÷</option>
|
||
<option value="+">+</option>
|
||
<option value="-">-</option>
|
||
<option value="^">^</option>
|
||
</select>
|
||
<input id="rescaleModifier" onmouseover="tip('Set modifier value')" type="number" value="0.9" min="0" max="1.5" step="0.01" class="condition hidden">
|
||
<button id="rescaleExecute" onmouseover="tip('Run condition')" class="icon-play-circled2 condition hidden"></button>
|
||
<button id="smoothHeights" onmouseover="tip('Smooth all heights')" class="icon-smooth"></button>
|
||
<button id="disruptHeights" onmouseover="tip('Disrupt (randomize) heights')" class="icon-disrupt"></button>
|
||
<button id="brushClear" onmouseover="tip('Clear all height')" class="icon-eraser"></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="perspectivePanel" class="dialog stable" style="display: none">
|
||
<div id="lineSlider" class="slider">
|
||
<div id="lineHandle0" class="ui-slider-handle" data-value=240></div>
|
||
<div id="lineHandle1" class="ui-slider-handle" data-value=90></div>
|
||
</div><br>
|
||
<div id="ySlider" class="slider">
|
||
<div id="yHandle" class="ui-slider-handle" data-value=4></div>
|
||
</div><br>
|
||
<div id="scaleSlider" class="slider">
|
||
<div id="scaleHandle" class="ui-slider-handle" data-value=1></div>
|
||
</div><br>
|
||
<div id="heightSlider" class="slider">
|
||
<div id="heightHandle" class="ui-slider-handle" data-value=30></div>
|
||
</div><br>
|
||
<canvas id="perspective" width="480" height="200"></canvas>
|
||
</div>
|
||
|
||
<div id="countriesEditor" class="dialog stable" style="display: none" data-type="absolute">
|
||
<div id="countriesHeader">
|
||
<div style="margin-left: 14px" onmouseover="tip('Click to sort alphabetically by country name')" class="sortable alphabetically" data-sortby="country">Country </div>
|
||
<div style="margin-left: 30px" onmouseover="tip('Click to sort alphabetically by capital name')" class="sortable alphabetically" data-sortby="capital">Capital </div>
|
||
<div style="margin-left: 24px" onmouseover="tip('Click to sort by country expansion value')" class="sortable hidden" data-sortby="expansion">Expan. </div>
|
||
<div style="margin-left: 30px" onmouseover="tip('Click to sort by country cells count')" class="sortable" data-sortby="cells">Cells </div>
|
||
<div style="margin-left: 6px" onmouseover="tip('Click to sort by country burgs count')" class="sortable" data-sortby="burgs">Burgs </div>
|
||
<div style="margin-left: 20px" onmouseover="tip('Click to sort by country area')" class="sortable" data-sortby="area">Area </div>
|
||
<div style="margin-left: 22px" onmouseover="tip('Click to sort by country population')" class="sortable" data-sortby="population">Population </div>
|
||
</div>
|
||
<div id="countriesBody"></div>
|
||
<div id="countriesFooter" class="totalLine">
|
||
<div style="margin-left: 5px">Countries: <span id="countriesFooterCountries">0</span></div>
|
||
<div style="margin-left: 20px">Burgs: <span id="countriesFooterBurgs">0</span></div>
|
||
<div style="margin-left: 20px">Land Area: <span id="countriesFooterArea">0</span></div>
|
||
<div style="margin-left: 20px">Population: <span id="countriesFooterPopulation">0</span></div>
|
||
</div>
|
||
<div id="countriesBottom">
|
||
<button id="editScaleCountries" onmouseover="tip('Change demographical and geographical measurements')" class="icon-map-signs"></button>
|
||
<button id="countriesPercentage" onmouseover="tip('Toggle percentage / absolut values views')" class="icon-percent"></button>
|
||
<button id="countriesRegenerate" onmouseover="tip('Regenerate countries based on amended Expansion values')" class="icon-cog-alt"></button>
|
||
<button id="countriesManually" onmouseover="tip('Manually re-assign countries')" class="icon-brush"></button>
|
||
<div id="countriesManuallyButtons" style="display: none">
|
||
<button id="countriesManuallyComplete" onmouseover="tip('Apply assignment')" class="icon-check"></button>
|
||
<button id="countriesAddM" onmouseover="tip('Proclaim a new country')" class="icon-flag"></button>
|
||
<button id="countriesManuallyCancel" onmouseover="tip('Cancel assignment')" class="icon-cancel"></button>
|
||
<label onmouseover="tip('Set the brush power')" class="italic">Brush size:</label>
|
||
<input id="countriesManuallyBrush" onchange="this.title = this.value" type="range" min="1" max="7" value="3">
|
||
</div>
|
||
<div id="countriesRegenerateButtons" style="display: none">
|
||
<button id="countriesApply" onmouseover="tip('Apply assignment')" class="icon-check"></button>
|
||
<button id="countriesRandomize" onmouseover="tip('Randomize countries Expansion value')" class="icon-shuffle"></button>
|
||
<button id="countriesAddR" onmouseover="tip('Proclaim a new country')" class="icon-flag"></button>
|
||
<label onmouseover="tip('Distance to a consider a land as neutral')" class="italic">Neutral distance:</label>
|
||
<input id="countriesNeutral" onchange="this.title = this.value" type="range" min="1" max="500" value="200">
|
||
</div>
|
||
<button id="countriesAddG" onmouseover="tip('Proclaim a new country')" class="icon-flag"></button>
|
||
<button id="countriesRegenerateNames" onmouseover="tip('Regenerate countries names')" class="icon-arrows-cw"></button>
|
||
<button id="countriesExport" onmouseover="tip('Save country-related data as a text file (.csv)')" class="icon-download"></button>
|
||
<button id="burgNamesImport" onmouseover="tip('Load burg names from a text file. Each name should be on a new line!')" class="icon-upload"></button>
|
||
<button id="removeCountries" onmouseover="tip('Remove all countries')" class="icon-trash"></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="burgsEditor" class="dialog stable" style="display: none">
|
||
<div id="burgsHeader">
|
||
<div style="margin-left: 19px" onmouseover="tip('Click to sort alphabetically by burg name')" class="sortable alphabetically" data-sortby="burg">Burg </div>
|
||
<div style="margin-left: 29px" onmouseover="tip('Click to sort alphabetically by culture name')" class="sortable alphabetically" data-sortby="culture">Culture </div>
|
||
<div style="margin-left: 14px" onmouseover="tip('Click to sort by country population')" class="sortable" data-sortby="population">Population </div>
|
||
<div style="margin-left: 6px" onmouseover="tip('Click to sort by country burg type')" class="sortable alphabetically" data-sortby="type">Type </div>
|
||
</div>
|
||
<div id="burgsBody"></div>
|
||
<div id="burgsFooter" class="totalLine">
|
||
<div onmouseover="tip('Burgs number')" style="margin-left: 4px">Burgs: <span onmouseover="tip('Burgs number')" id="burgsFooterBurgs">0</span></div>
|
||
<div style="margin-left: 10px">Average burg:
|
||
<span onmouseover="tip('Dominant culture')" class="icon-book"></span>
|
||
<span onmouseover="tip('Dominant culture')" id="burgsFooterCulture">no</span>
|
||
<span onmouseover="tip('Average burg population')" class="icon-male"></span>
|
||
<input onmouseover="tip('Average burg population. Change to recalculate population for all burgs within country')" id="burgsFooterPopulation" type="number" min="1" max="1000000" step="100" value="0">
|
||
</div>
|
||
</div>
|
||
<div id="burgsBottom">
|
||
<button id="editScaleBurgs" onmouseover="tip('Change demographical and geographical measurements')" class="icon-map-signs"></button>
|
||
<button id="changeCapital" onmouseover="tip('Click on a burg line to make it a new capital')" class="icon-star"></button>
|
||
<button id="regenerateBurgNames" onmouseover="tip('Regenerate burg names based on assigned culture')" class="icon-arrows-cw"></button>
|
||
<button id="burgAdd" onmouseover="tip('Add new burg')" class="icon-fort-awesome"></button>
|
||
<button id="removeBurgs" onmouseover="tip('Remove all burgs')" class="icon-trash"></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="culturesEditor" class="dialog stable" style="display: none" data-type="absolute">
|
||
<div id="culturesHeader">
|
||
<div style="margin-left: 14px" onmouseover="tip('Click to sort by culture name')" class="sortable alphabetically" data-sortby="culture">Culture </div>
|
||
<div style="margin-left: 16px" onmouseover="tip('Click to sort by culture cells count')" class="sortable" data-sortby="cells">Cells </div>
|
||
<div style="margin-left: 18px" onmouseover="tip('Click to sort by culture area')" class="sortable" data-sortby="area">Area </div>
|
||
<div style="margin-left: 30px" onmouseover="tip('Click to sort by culture population')" class="sortable" data-sortby="population">Population </div>
|
||
<div style="margin-left: 3px" onmouseover="tip('Click to sort by culture namesbase')" class="sortable alphabetically" data-sortby="base">Namesbase </div>
|
||
</div>
|
||
<div id="culturesBody"></div>
|
||
|
||
<div id="culturesFooter" class="totalLine">
|
||
<div onmouseover="tip('Cultures number (active / total)')" style="margin-left: 7px">Cultures: <span id="culturesFooterCultures">0 / 7</span></div>
|
||
<div onmouseover="tip('Total Land cells number')" style="margin-left: 7px">Cells: <span id="culturesFooterCells">0</span></div>
|
||
<div onmouseover="tip('Total Land Area')" style="margin-left: 7px">Area: <span id="culturesFooterArea">0</span></div>
|
||
<div onmouseover="tip('Total Population')" style="margin-left: 7px">Population: <span id="culturesFooterPopulation">0</span></div>
|
||
</div>
|
||
|
||
<div id="culturesBottom">
|
||
<button id="culturesPercentage" onmouseover="tip('Toggle percentage / absolut values views')" class="icon-percent"></button>
|
||
<button id="culturesManually" onmouseover="tip('Manually re-assign cultures')" class="icon-brush"></button>
|
||
<div id="culturesManuallyButtons" style="display: none">
|
||
<button id="culturesManuallyComplete" onmouseover="tip('Apply assignment')" class="icon-check"></button>
|
||
<button id="culturesManuallyCancel" onmouseover="tip('Cancel assignment')" class="icon-cancel"></button>
|
||
<label onmouseover="tip('Set the brush power')" class="italic">Brush size:</label>
|
||
<input id="culturesManuallyBrush" onchange="this.title = this.value" type="range" min="1" max="7" value="3">
|
||
</div>
|
||
<button id="culturesRandomize" onmouseover="tip('Randomly re-distribute cultures')" class="icon-shuffle"></button>
|
||
<button id="culturesRegenerateNames" onmouseover="tip('Re-generate all Burg names based on assigned culture')" class="icon-arrows-cw"></button>
|
||
<button id="culturesEditNamesBase" onmouseover="tip('Edit a database used for names generation')" class="icon-list-bullet"></button>
|
||
<button id="culturesAdd" onmouseover="tip('Add a new culture')" class="icon-plus"></button>
|
||
<button id="culturesExport" onmouseover="tip('Save cultures-related data as a text file (.csv)')" class="icon-download"></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="namesbaseEditor" class="dialog stable" style="display: none">
|
||
<div id="namesbaseBasesTop">
|
||
<span>Select base: </span>
|
||
<select id="namesbaseSelect" onmouseover="tip('Select base to edit')" value="0"></select>
|
||
<span>Base name: </span>
|
||
<input id="namesbaseName" onmouseover="tip('Type to change a base name')" placeholder="Base name" autocorrect="off" spellcheck="false"/>
|
||
</div>
|
||
<div id="namesbaseBody">
|
||
<span>Names data:</span><br>
|
||
<textarea id="namesbaseTextarea" data-base="0" cols="70" rows="10" onmouseover="tip('Names data: a comma separated list of source names used for names generation')" placeholder="Provide a names data: a comma separated list of source names" autocorrect="off" spellcheck="false"></textarea>
|
||
<br>
|
||
<div>
|
||
<span>Method: </span><select onmouseover="tip('Select generation method')" id="namesbaseMethod">
|
||
<option value="let-to-let">Markov let-to-let</option>
|
||
<option value="let-to-syl">Markov let-to-syl</option>
|
||
<option value="syl-to-syl">Markov syl-to-syl</option>
|
||
<option value="selection">Random selection</option>
|
||
</select><span> Length: </span>
|
||
<input id="namesbaseMin" onmouseover="tip('Minimal name length recommendation')" type="number" min="2" max="100" value="4">
|
||
<input id="namesbaseMax" onmouseover="tip('Maximal name length recommendation')" type="number" min="2" value="10">
|
||
<span>Dublication: </span>
|
||
<input id="namesbaseDouble" onmouseover="tip('Populate with letters that can used twice in a row')" autocorrect="off" spellcheck="false" value="abc">
|
||
</div>
|
||
<fieldset>
|
||
<legend>Generated examples: </legend>
|
||
<div id="namesbaseExamples" onmouseover="tip('Generated examples. Click to re-gererate')"></div>
|
||
</fieldset>
|
||
</div>
|
||
<div id="namesbaseBottom">
|
||
<button id="namesbaseDefault" onmouseover="tip('Restore default namesbase')" class="icon-cancel"></button>
|
||
<button id="namesbaseAdd" onmouseover="tip('Add a new base')" class="icon-plus"></button>
|
||
<button id="namesbaseUpdateExamples" onmouseover="tip('Re-generate examples based on provided data and generation method')" class="icon-cw"></button>
|
||
<button id="namesbaseDownload" onmouseover="tip('Download namesbase to PC')" class="icon-download"></button>
|
||
<button id="namesbaseUpload" onmouseover="tip('Upload a namesbase from PC')" class="icon-upload"></button>
|
||
<button id="namesbaseMail" onclick="window.open('mailto:maxganiev@yandex.com?Subject=Namesbase%20suggestion', '_blank')" onmouseover="tip('Send a namesbase suggestion to me')" class="icon-mail-alt"></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="scaleEditor" class="dialog stable" style="display: none">
|
||
<div id="scaleBody">
|
||
<div class="scaleHeader">
|
||
<span class="icon-map-signs"></span>
|
||
<div>Distances: </div>
|
||
</div>
|
||
<div>
|
||
<div>Distance unit: </div>
|
||
<select onmouseover="tip('Select Distance unit')" id="distanceUnit">
|
||
<option value="mi" selected>Mile</option>
|
||
<option value="km">Kilometer</option>
|
||
<option value="lg">League</option>
|
||
<option value="vr">Versta</option>
|
||
<option value="custom_name">Custom name</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<div onmouseover="tip('Select how many distance unit are in one pixel')">1 map pixel =</div>
|
||
<input id="distanceScale" onmouseover="tip('Select how many distance unit are in one pixel')" type="range" min="0.1" max="10" value="3" step="0.1">
|
||
<input id="scaleOutput" onmouseover="tip('Enter how many distance unit are in one pixel')" type="text" class="output" value="3 mi">
|
||
</div>
|
||
<div>
|
||
<div onmouseover="tip('Type area unit name, leave `square` just to add ² to the distance unit selected above')">Area unit: </div>
|
||
<input id="areaUnit" onmouseover="tip('Type area unit name, leave `square` just to add ² to the distance unit selected above')" type="text" value="square">
|
||
</div>
|
||
<div class="scaleHeader">
|
||
<span class="icon-minus"></span>
|
||
<div>Scale bar: </div>
|
||
</div>
|
||
<div>
|
||
<div onmouseover="tip('Change scale bar size')">Scale bar size: </div>
|
||
<input id="barSize" onmouseover="tip('Set scale bar size')" type="range" min="0.5" max="4" value="2" step="0.1">
|
||
<output id="barSizeOutput">1</output>
|
||
</div>
|
||
<div>
|
||
<div onmouseover="tip('Change scale bar label, leave blank to hide label')">Scale bar label: </div>
|
||
<input id="barLabel" onmouseover="tip('Set scale bar label, leave blank to hide label')" type="text" placeholder="hidden" value="">
|
||
</div>
|
||
<div>
|
||
<div onmouseover="tip('Set background for Scale bar')">Background opacity: </div>
|
||
<input id="barBackOpacity" onmouseover="tip('Set Scale bar background opacity')" type="range" min="0" max="1" value="0.2" step="0.01">
|
||
<input id="barBackColor" onmouseover="tip('Set Scale bar background color')" type="color" value="#ffffff">
|
||
</div>
|
||
<div class="scaleHeader">
|
||
<span class="icon-male"></span>
|
||
<div>Population: </div>
|
||
</div>
|
||
<div>
|
||
<div onmouseover="tip('Set how many people are in one population point')">1 population point =</div>
|
||
<input id="populationRate" onmouseover="tip('Set how many people are in one population point, in Kilos')" type="range" min="0.1" max="10" value="1" step="0.1">
|
||
<input id="populationRateOutput" onmouseover="tip('Enter the population rate, in Kilos')" type="text" class="output" value="1K">
|
||
</div>
|
||
<div>
|
||
<div>Urbanization rate: </div>
|
||
<input id="urbanization" onmouseover="tip('Set the ubranization (burgs population relative to all population) rate')" type="range" min="0.01" max="5" value="1" step="0.01">
|
||
<input id="urbanizationOutput" onmouseover="tip('Enter the ubranization (burgs population relative to all population) rate')" type="text" class="output" value="1">
|
||
</div>
|
||
</div>
|
||
<div id="scaleBottom">
|
||
<button id="toggleScaleBar" onmouseover="tip('Click to toggle scale bar')" class="icon-align-center"></button>
|
||
<button onmouseover="tip('Click to toggle ruler')" class="icon-eye-off" onclick='$("#ruler").fadeToggle()'></button>
|
||
<button id="addOpisometer" onmouseover="tip('Drag the map to measure curve length with opisometer')" class="icon-brush"></button>
|
||
<button id="addRuler" onmouseover="tip('Click to place additional ruler on map')" class="icon-resize-horizontal"></button>
|
||
<button id="addPlanimeter" onmouseover="tip('Drag the map to determine a polygon area with planimeter')" class="icon-edit"></button>
|
||
<button id="removeAllRulers" onmouseover="tip('Remove all rulers from the map. Click on ruler label to remove ruler separately')" class="icon-trash"></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="map-dragged" style="display: none">
|
||
<p>Drop to upload</p>
|
||
</div>
|
||
|
||
<div id="alert" style="display: none">
|
||
<p id="alertMessage">Warning!</p>
|
||
</div>
|
||
|
||
<div id="tooltip" data-main="Сlick the arrow button to open options">Сlick the arrow button to open options</div>
|
||
|
||
<div id="fileInputs" class="hidden">
|
||
<input type="file" accept=".map" id="mapToLoad">
|
||
<input type="file" accept=".txt,.csv" id="burgsListToLoad">
|
||
<input type="file" accept="image/*" id="imageToLoad">
|
||
<input type="file" accept=".txt" id="templateToLoad">
|
||
<input type="file" accept=".txt" id="namesbaseToLoad">
|
||
</div>
|
||
|
||
<script src="script.js?version=0.58.15b"></script>
|
||
</body>
|