mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 01:41:22 +01:00
Geodata (#291)
* added geographic data to burgs CSV export * fixed projection problems in export added cell -> geojson export added a QGIS example style * adding routes data * adding river data * added PHP script to add random details to cells.
This commit is contained in:
Tom
Azgaar
parent
e743735e57
commit
263c2d6a3c
12 changed files with 857 additions and 199 deletions
|
|
@ -21,7 +21,7 @@ function showOptions(event) {
|
|||
regenerate.style.display = "none";
|
||||
options.style.display = "block";
|
||||
optionsTrigger.style.display = "none";
|
||||
|
||||
|
||||
if (event) event.stopPropagation();
|
||||
}
|
||||
|
||||
|
|
@ -49,19 +49,19 @@ collapsible.addEventListener("mouseleave", function() {
|
|||
});
|
||||
|
||||
// Activate options tab on click
|
||||
options.querySelector("div.tab").addEventListener("click", function(event) {
|
||||
options.querySelector("div.tab").addEventListener("click", function(event) {
|
||||
if (event.target.tagName !== "BUTTON") return;
|
||||
const id = event.target.id;
|
||||
const active = options.querySelector(".tab > button.active");
|
||||
if (active && id === active.id) return; // already active tab is clicked
|
||||
|
||||
if (active) active.classList.remove("active");
|
||||
document.getElementById(id).classList.add("active");
|
||||
document.getElementById(id).classList.add("active");
|
||||
options.querySelectorAll(".tabcontent").forEach(e => e.style.display = "none");
|
||||
|
||||
if (id === "styleTab") styleContent.style.display = "block"; else
|
||||
if (id === "optionsTab") optionsContent.style.display = "block"; else
|
||||
if (id === "toolsTab" && (!customization || customization === 10)) toolsContent.style.display = "block"; else
|
||||
if (id === "styleTab") styleContent.style.display = "block"; else
|
||||
if (id === "optionsTab") optionsContent.style.display = "block"; else
|
||||
if (id === "toolsTab" && (!customization || customization === 10)) toolsContent.style.display = "block"; else
|
||||
if (id === "toolsTab" && customization && customization !== 10) customizationMenu.style.display = "block"; else
|
||||
if (id === "aboutTab") aboutContent.style.display = "block";
|
||||
});
|
||||
|
|
@ -86,7 +86,7 @@ function selectStyleElement() {
|
|||
const sel = styleElementSelect.value;
|
||||
let el = d3.select("#"+sel);
|
||||
|
||||
styleElements.querySelectorAll("tbody").forEach(e => e.style.display = "none"); // hide all sections
|
||||
styleElements.querySelectorAll("tbody").forEach(e => e.style.display = "none"); // hide all sections
|
||||
const off = el.style("display") === "none" || !el.selectAll("*").size(); // check if layer is off
|
||||
if (off) {
|
||||
styleIsOff.style.display = "block";
|
||||
|
|
@ -98,7 +98,7 @@ function selectStyleElement() {
|
|||
if (sel == "ocean") el = oceanLayers.select("rect");
|
||||
else if (sel == "routes" || sel == "labels" || sel == "lakes" || sel == "anchors" || sel == "burgIcons" || sel == "borders") {
|
||||
el = d3.select("#"+sel).select("g#"+group).size()
|
||||
? d3.select("#"+sel).select("g#"+group)
|
||||
? d3.select("#"+sel).select("g#"+group)
|
||||
: d3.select("#"+sel).select("g");
|
||||
}
|
||||
|
||||
|
|
@ -161,7 +161,7 @@ function selectStyleElement() {
|
|||
styleCompassShiftY.value = tr[1];
|
||||
styleCompassSizeInput.value = styleCompassSizeOutput.value = tr[2];
|
||||
}
|
||||
|
||||
|
||||
// show specific sections
|
||||
if (sel === "terrs") styleHeightmap.style.display = "block";
|
||||
if (sel === "gridOverlay") styleGrid.style.display = "block";
|
||||
|
|
@ -169,7 +169,7 @@ function selectStyleElement() {
|
|||
if (sel === "texture") styleTexture.style.display = "block";
|
||||
if (sel === "routes" || sel === "labels" || sel == "anchors" || sel == "burgIcons" || sel === "lakes" || sel === "borders") styleGroup.style.display = "block";
|
||||
if (sel === "markers") styleMarkers.style.display = "block";
|
||||
|
||||
|
||||
if (sel === "population") {
|
||||
stylePopulation.style.display = "block";
|
||||
stylePopulationRuralStrokeInput.value = stylePopulationRuralStrokeOutput.value = population.select("#rural").attr("stroke");
|
||||
|
|
@ -256,7 +256,7 @@ function selectStyleElement() {
|
|||
if (sel === "temperature") {
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleTemperature.style.display = "block";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
|
||||
styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
|
||||
styleTemperatureFillOpacityInput.value = styleTemperatureFillOpacityOutput.value = el.attr("fill-opacity") || .1;
|
||||
styleTemperatureFillInput.value = styleTemperatureFillOutput.value = el.attr("fill") || "#000";
|
||||
styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px";;
|
||||
|
|
@ -363,7 +363,7 @@ styleShiftY.addEventListener("input", shiftElement);
|
|||
function shiftElement() {
|
||||
const x = styleShiftX.value || 0;
|
||||
const y = styleShiftY.value || 0;
|
||||
getEl().attr("transform", `translate(${x},${y})`);
|
||||
getEl().attr("transform", `translate(${x},${y})`);
|
||||
}
|
||||
|
||||
styleOceanBack.addEventListener("input", function() {
|
||||
|
|
@ -386,7 +386,7 @@ outlineLayersInput.addEventListener("change", function() {
|
|||
});
|
||||
|
||||
styleReliefSet.addEventListener("change", function() {
|
||||
ReliefIcons();
|
||||
ReliefIcons();
|
||||
if (!layerIsOn("toggleRelief")) toggleRelief();
|
||||
});
|
||||
|
||||
|
|
@ -447,7 +447,7 @@ styleCompassShiftY.addEventListener("input", shiftCompass);
|
|||
|
||||
function shiftCompass() {
|
||||
const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`;
|
||||
d3.select("#rose").attr("transform", tr);
|
||||
d3.select("#rose").attr("transform", tr);
|
||||
}
|
||||
|
||||
styleLegendColItems.addEventListener("input", function() {
|
||||
|
|
@ -636,7 +636,7 @@ function setBase64Texture(url) {
|
|||
};
|
||||
|
||||
function fetchTextureURL(url) {
|
||||
console.log("Provided URL is", url);
|
||||
console.log("Provided URL is", url);
|
||||
const img = new Image();
|
||||
img.onload = function () {
|
||||
const canvas = document.getElementById("preview");
|
||||
|
|
@ -744,7 +744,7 @@ function toggleFullscreen() {
|
|||
|
||||
function generateMapWithSeed() {
|
||||
if (optionsSeed.value == seed) {
|
||||
tip("The current map already has this seed", false, "error");
|
||||
tip("The current map already has this seed", false, "error");
|
||||
return;
|
||||
}
|
||||
regeneratePrompt();
|
||||
|
|
@ -766,7 +766,7 @@ function showSeedHistoryDialog() {
|
|||
// generate map with historycal seed
|
||||
function restoreSeed(id) {
|
||||
if (mapHistory[id].seed == seed) {
|
||||
tip("The current map is already generated with this seed", null, "error");
|
||||
tip("The current map is already generated with this seed", null, "error");
|
||||
return;
|
||||
}
|
||||
optionsSeed.value = mapHistory[id].seed;
|
||||
|
|
@ -803,7 +803,7 @@ function changeBurgsNumberSlider(value) {
|
|||
function changeUIsize(value) {
|
||||
uiSizeInput.value = uiSizeOutput.value = value;
|
||||
document.getElementsByTagName("body")[0].style.fontSize = value * 11 + "px";
|
||||
document.getElementById("options").style.width = (value - 1) * 300 / 2 + 300 + "px";
|
||||
document.getElementById("options").style.width = (value - 1) * 300 / 2 + 300 + "px";
|
||||
}
|
||||
|
||||
function changeTooltipSize(value) {
|
||||
|
|
@ -992,8 +992,9 @@ document.getElementById("sticked").addEventListener("click", function(event) {
|
|||
else if (id === "saveMap") saveMap();
|
||||
else if (id === "saveSVG") saveAsImage("svg");
|
||||
else if (id === "savePNG") saveAsImage("png");
|
||||
else if (id === "saveGeo") saveGeoJSON();
|
||||
else if (id === "saveDropbox") saveDropbox();
|
||||
if (id === "quickSave" || id === "saveMap" || id === "saveSVG" || id === "savePNG" || id === "saveDropbox") toggleSavePane();
|
||||
if (id === "quickSave" || id === "saveMap" || id === "saveSVG" || id === "savePNG" || id === "saveGeo" || id === "saveDropbox") toggleSavePane();
|
||||
if (id === "loadMap") mapToLoad.click();
|
||||
else if (id === "quickLoad") quickLoad();
|
||||
else if (id === "loadURL") loadURL();
|
||||
|
|
@ -1021,7 +1022,7 @@ function toggleSavePane() {
|
|||
|
||||
// ask users to allow popups
|
||||
if (!localStorage.getItem("dns_allow_popup_message")) {
|
||||
alertMessage.innerHTML = `Generator uses pop-up window to download files.
|
||||
alertMessage.innerHTML = `Generator uses pop-up window to download files.
|
||||
<br>Please ensure your browser does not block popups.
|
||||
<br>Please check browser settings and turn off adBlocker if it is enabled`;
|
||||
|
||||
|
|
@ -1059,7 +1060,7 @@ function toggleLoadPane() {
|
|||
|
||||
function loadURL() {
|
||||
const pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
|
||||
const inner = `Provide URL to a .map file:
|
||||
const inner = `Provide URL to a .map file:
|
||||
<input id="mapURL" type="url" style="width: 254px" placeholder="https://e-cloud.com/test.map">
|
||||
<br><i>Please note server should allow CORS for file to be loaded. If CORS is not allowed, save file to Dropbox and provide a direct link</i>`;
|
||||
alertMessage.innerHTML = inner;
|
||||
|
|
@ -1103,4 +1104,4 @@ document.getElementById("mapToLoad").addEventListener("change", function() {
|
|||
this.value = "";
|
||||
closeDialogs();
|
||||
uploadFile(fileToLoad);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue