Created files
This commit is contained in:
Durvenson
parent
938db5fcfb
commit
560aa95d9b
5 changed files with 6288 additions and 0 deletions
BIN
blankmapthing.png
Normal file
BIN
blankmapthing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 335 KiB |
63
index.css
Normal file
63
index.css
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap");
|
||||
html {
|
||||
background-color: #111111;
|
||||
color: #DDDDDD;
|
||||
font-family: Balsamiq Sans, cursive;
|
||||
}
|
||||
#left {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
background-color: #333333;
|
||||
z-index: 10;
|
||||
}
|
||||
#right {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
background-color: #333333;
|
||||
overflow-y: auto;
|
||||
}
|
||||
h2, #coords, #coords2 {
|
||||
text-align: center;
|
||||
}
|
||||
#mapbg, #mapborders, #maptext, #mapbg2 {
|
||||
position: absolute;
|
||||
width: 1400px;
|
||||
height: 1400px;
|
||||
}
|
||||
#mapbg, #mapbg2 {
|
||||
z-index: -3;
|
||||
display: block;
|
||||
}
|
||||
#mapborders {
|
||||
z-index: -2;
|
||||
}
|
||||
#maptext {
|
||||
z-index: -1;
|
||||
}
|
||||
#map {
|
||||
position: relative;
|
||||
width: calc(100% - 400px);
|
||||
height: 100%;
|
||||
left: 200px;
|
||||
}
|
||||
#mainheader {
|
||||
position: fixed;
|
||||
width: calc(100% - 600px);
|
||||
background-color: #444444;
|
||||
left: 300px;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
button {
|
||||
font-family: Balsamiq Sans, cursive;
|
||||
font-size: 20px;
|
||||
margin: 4px;
|
||||
background-color: #222222AA;
|
||||
border: solid 5px #111111AA;
|
||||
border-radius: 5px;
|
||||
color: #DDDDDD;
|
||||
}
|
||||
51
index.html
Normal file
51
index.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>
|
||||
SGS
|
||||
</title>
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
</link>
|
||||
</head>
|
||||
<body>
|
||||
<div id="left">
|
||||
<h2>
|
||||
Instructions
|
||||
</h2>
|
||||
Use the scrollbars to navigate. You can also do CTRL+F to easily find areas.<br>
|
||||
However, do not zoom in/out; it breaks this website. However, if you refresh after you zoom, then it works fine.
|
||||
<button onclick="coords()">Go to Coords</button>
|
||||
<button onclick="geo()">Geographical Map</button>
|
||||
<button onclick="pol()">Political Map</button>
|
||||
</div>
|
||||
<div id="right">
|
||||
<h2>
|
||||
Key
|
||||
</h2>
|
||||
<h3 id ="coords">0,0</h3>
|
||||
<p>(x,z coords)</p>
|
||||
<p id ="coords2">0,0</p>
|
||||
<p>(for canvas editing)</p>
|
||||
<p>Stars: Capitals</p>
|
||||
<p>Filled Dots: Cities</p>
|
||||
<p>Hollow Dots: Towns</p>
|
||||
<p>Squares: Outposts</p>
|
||||
<p>Filled Areas: Claims</p>
|
||||
<p>Striped Areas: Joint Claims</p>
|
||||
<h2>
|
||||
Changelog
|
||||
</h2>
|
||||
<p>6/19/2020: Map's framework created.</p>
|
||||
<p>7/25/2020: Map has finally found a use.</p>
|
||||
</div>
|
||||
<h1 id="mainheader">
|
||||
Stranomegaium Cartography Service
|
||||
</h1>
|
||||
<div id="map" style="overflow: scroll;">
|
||||
<img id="mapbg" src="mapv1.svg"></img>
|
||||
<img id="mapbg2" src="blankmapthing.png"></img>
|
||||
<span style="position: fixed; left: calc(50% - 11px); top: calc(50% - 16px); z-index: 7;">+</span>
|
||||
</div>
|
||||
<script src="index.js">
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
36
index.js
Normal file
36
index.js
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
function coords() {
|
||||
var wantedcoords = prompt("Coords? (seperate with comma)","0,0");
|
||||
wantedcoords = wantedcoords.split(",")
|
||||
map.scrollTop = (parseInt(wantedcoords[1].replace(" ","")) + 7000)/10;
|
||||
map.scrollLeft = (parseInt(wantedcoords[0].replace(" ","")) + 7000)/10;
|
||||
}
|
||||
function geo() {
|
||||
map2.style.display = "none";
|
||||
map3.style.display = "initial";
|
||||
}
|
||||
function pol() {
|
||||
map3.style.display = "none";
|
||||
map2.style.display = "initial";
|
||||
}
|
||||
function update() {
|
||||
document.getElementById("coords").innerHTML = (Math.round(map.scrollLeft*10 - 7000)) + ',' + (Math.round(map.scrollTop*10 - 7000));
|
||||
document.getElementById("coords2").innerHTML = (Math.round(map.scrollLeft)) + ',' + (Math.round(map.scrollTop));
|
||||
}
|
||||
var wantedcoords = [];
|
||||
var map = document.getElementById("map");
|
||||
var map2 = document.getElementById("mapbg");
|
||||
var map3 = document.getElementById("mapbg2");
|
||||
var mapwidth = map.clientWidth;
|
||||
var mapheight = map.clientHeight;
|
||||
map2.style.paddingLeft = mapwidth/2;
|
||||
map2.style.paddingRight = mapwidth/2;
|
||||
map2.style.paddingTop = mapheight/2;
|
||||
map2.style.paddingBottom = mapheight/2;
|
||||
map3.style.paddingLeft = mapwidth/2;
|
||||
map3.style.paddingRight = mapwidth/2;
|
||||
map3.style.paddingTop = mapheight/2;
|
||||
map3.style.paddingBottom = mapheight/2;
|
||||
map.scrollTop = 700;
|
||||
map.scrollLeft = 700;
|
||||
pol();
|
||||
var test = setInterval(update,16);
|
||||
Loading…
Reference in a new issue