Initial commit of new map
Signed-off-by: fly <merspieler@airmail.cc>
This commit is contained in:
parent
fccef75347
commit
0a8f428651
9 changed files with 967 additions and 139 deletions
|
|
@ -1,4 +1,5 @@
|
|||
<?php
|
||||
session_start();
|
||||
include("config.php");
|
||||
$API_VERSION = 0.2;
|
||||
|
||||
|
|
@ -16,9 +17,16 @@ $ret->success = True;
|
|||
$ret->version = $API_VERSION;
|
||||
|
||||
// Make sure we've got at least auth and an action in the request
|
||||
if (isset($_POST['auth']) && $_POST['auth'] != "" && isset($_POST['action']) && $_POST['action'] != "")
|
||||
if (((isset($_POST['auth']) && $_POST['auth'] != "") || (isset($_SESSION['token']) && $_SESSION['token'] != "")) && isset($_POST['action']) && $_POST['action'] != "")
|
||||
{
|
||||
$auth = $_POST['auth'];
|
||||
if(isset($_POST['auth']))
|
||||
{
|
||||
$auth = $_POST['auth'];
|
||||
}
|
||||
else
|
||||
{
|
||||
$auth = $_SESSION['token'];
|
||||
}
|
||||
$action = $_POST['action'];
|
||||
}
|
||||
else
|
||||
|
|
@ -45,6 +53,8 @@ if ($res == Null)
|
|||
quit();
|
||||
}
|
||||
|
||||
$_SESSION['token'] = $auth;
|
||||
|
||||
// Setup helper functions
|
||||
function get_lock($con)
|
||||
{
|
||||
|
|
|
|||
64
managment/www/download-links.php
Normal file
64
managment/www/download-links.php
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
{
|
||||
<?php
|
||||
include("config.php");
|
||||
// Returns numbers in string format as needed for file names
|
||||
function clipNumber($number, $length)
|
||||
{
|
||||
$number = abs($number) . "";
|
||||
while (strlen($number) < $length)
|
||||
{
|
||||
$number = "0" . $number;
|
||||
}
|
||||
return $number;
|
||||
}
|
||||
$con = new mysqli($SQL_SERVER, $SQL_USER, $SQL_PASSWORD, $SQL_DATABASE, $SQL_PORT);
|
||||
if ($con->connect_error)
|
||||
{
|
||||
quit();
|
||||
}
|
||||
$sql = "SELECT secondLevel.name AS name, status.color AS color FROM secondLevel JOIN status ON secondLevel.status_id = status.id";
|
||||
$ret = $con->query($sql)->fetch_all(MYSQLI_ASSOC);
|
||||
if ($ret != False)
|
||||
{
|
||||
$tiles = [];
|
||||
foreach($ret as $row)
|
||||
{
|
||||
$tiles[$row["name"]] = $row["color"];
|
||||
}
|
||||
}
|
||||
$first = true;
|
||||
for ($i = 80; $i >= -90; $i -= 1)
|
||||
{
|
||||
if ($i >= 0)
|
||||
{
|
||||
$ns = "n";
|
||||
}
|
||||
else
|
||||
{
|
||||
$ns = "s";
|
||||
}
|
||||
$y = (abs($i - 80) / 10) * 25;
|
||||
for ($j = -180; $j < 180; $j += 1)
|
||||
{
|
||||
if ($first)
|
||||
{
|
||||
$first = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
echo ",";
|
||||
}
|
||||
if ($j < 0)
|
||||
{
|
||||
$ew = "w";
|
||||
}
|
||||
else
|
||||
{
|
||||
$ew = "e";
|
||||
}
|
||||
$name = $ew . clipNumber($j, 3) . $ns . clipNumber($i, 2);
|
||||
echo '"' . $name . '": {"name": "' . $name . '", "color": "' . $tiles[$name] . '"}';
|
||||
}
|
||||
}
|
||||
?>
|
||||
}
|
||||
|
|
@ -19,11 +19,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Worldbuild Progress</title>
|
||||
<title>Worldbuild Status</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css"/>
|
||||
<link rel="stylesheet" href="leaflet.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Worldbuild Progress</h2>
|
||||
<h2>Worldbuild Status</h2>
|
||||
Colors:
|
||||
<table border="0">
|
||||
<?php
|
||||
|
|
@ -41,53 +42,13 @@
|
|||
Click on a tile to see it's detailed status.<br/>
|
||||
<ul id="container">
|
||||
<li>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="720" height="450" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<image width="720" height="450" href="map.png"/>
|
||||
<?php
|
||||
$sql = "SELECT topLevel.name AS name, status.color AS color FROM topLevel JOIN status ON topLevel.status_id = status.id";
|
||||
$ret = $con->query($sql)->fetch_all(MYSQLI_ASSOC);
|
||||
if ($ret != False)
|
||||
{
|
||||
$tiles = [];
|
||||
foreach($ret as $row)
|
||||
{
|
||||
$tiles[$row["name"]] = $row["color"];
|
||||
}
|
||||
}
|
||||
for ($i = 80; $i >= -90; $i -= 10)
|
||||
{
|
||||
if ($i >= 0)
|
||||
{
|
||||
$ns = "n";
|
||||
}
|
||||
else
|
||||
{
|
||||
$ns = "s";
|
||||
}
|
||||
$y = (abs($i - 80) / 10) * 25;
|
||||
for ($j = -180; $j <= 170; $j += 10)
|
||||
{
|
||||
if ($j < 0)
|
||||
{
|
||||
$ew = "w";
|
||||
}
|
||||
else
|
||||
{
|
||||
$ew = "e";
|
||||
}
|
||||
$x = 700 - (abs($j - 170) / 10) * 20;
|
||||
$name = $ew . clipNumber($j, 3) . $ns . clipNumber($i, 2);
|
||||
echo '<a href="progressinfo.php?tile=' . $name . '" target="progressinfo"><rect x="' . $x . '" y="' . $y . '" width="20" height="25" style="fill: ' . $tiles[$name] . '; opacity: 0.5;"/></a>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</svg>
|
||||
<div id="map">[Map not available]</div>
|
||||
</li>
|
||||
<li>
|
||||
<iframe name="progressinfo" style="border: 0px; height: 454px; width: 750px;" src="progressinfo.php"></iframe>
|
||||
<iframe id="progressinfo" name="progressinfo" style="border: 0px; height: 454px; width: 750px;" src="progressinfo.php"></iframe>
|
||||
</li>
|
||||
</ul>
|
||||
<footer>Maps: © OpenStreetMap contributors</footer>
|
||||
<script src="leaflet.js"></script>
|
||||
<script src="map.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
656
managment/www/leaflet.css
Normal file
656
managment/www/leaflet.css
Normal file
|
|
@ -0,0 +1,656 @@
|
|||
/* required styles */
|
||||
|
||||
.leaflet-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-container,
|
||||
.leaflet-pane > svg,
|
||||
.leaflet-pane > canvas,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
/* Prevents IE11 from highlighting tiles in blue */
|
||||
.leaflet-tile::selection {
|
||||
background: transparent;
|
||||
}
|
||||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
|
||||
.leaflet-safari .leaflet-tile {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
/* hack that prevents hw layers "stretching" when loading new tiles */
|
||||
.leaflet-safari .leaflet-tile-container {
|
||||
width: 1600px;
|
||||
height: 1600px;
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
|
||||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
|
||||
.leaflet-container .leaflet-overlay-pane svg {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
.leaflet-container .leaflet-marker-pane img,
|
||||
.leaflet-container .leaflet-shadow-pane img,
|
||||
.leaflet-container .leaflet-tile-pane img,
|
||||
.leaflet-container img.leaflet-image-layer,
|
||||
.leaflet-container .leaflet-tile {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-zoom {
|
||||
-ms-touch-action: pan-x pan-y;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag {
|
||||
-ms-touch-action: pinch-zoom;
|
||||
/* Fallback for FF which doesn't support pinch-zoom */
|
||||
touch-action: none;
|
||||
touch-action: pinch-zoom;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.leaflet-container {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.leaflet-container a {
|
||||
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
|
||||
}
|
||||
.leaflet-tile {
|
||||
filter: inherit;
|
||||
visibility: hidden;
|
||||
}
|
||||
.leaflet-tile-loaded {
|
||||
visibility: inherit;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
width: 0;
|
||||
height: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 800;
|
||||
}
|
||||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
|
||||
.leaflet-overlay-pane svg {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.leaflet-pane { z-index: 400; }
|
||||
|
||||
.leaflet-tile-pane { z-index: 200; }
|
||||
.leaflet-overlay-pane { z-index: 400; }
|
||||
.leaflet-shadow-pane { z-index: 500; }
|
||||
.leaflet-marker-pane { z-index: 600; }
|
||||
.leaflet-tooltip-pane { z-index: 650; }
|
||||
.leaflet-popup-pane { z-index: 700; }
|
||||
|
||||
.leaflet-map-pane canvas { z-index: 100; }
|
||||
.leaflet-map-pane svg { z-index: 200; }
|
||||
|
||||
.leaflet-vml-shape {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
.lvml {
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.leaflet-control {
|
||||
position: relative;
|
||||
z-index: 800;
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-top,
|
||||
.leaflet-bottom {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-top {
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-right {
|
||||
right: 0;
|
||||
}
|
||||
.leaflet-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
.leaflet-left {
|
||||
left: 0;
|
||||
}
|
||||
.leaflet-control {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
float: right;
|
||||
}
|
||||
.leaflet-top .leaflet-control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom and fade animations */
|
||||
|
||||
.leaflet-fade-anim .leaflet-popup {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
|
||||
opacity: 1;
|
||||
}
|
||||
.leaflet-zoom-animated {
|
||||
-webkit-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
svg.leaflet-zoom-animated {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-tile,
|
||||
.leaflet-pan-anim .leaflet-tile {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* cursors */
|
||||
|
||||
.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-grab {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
.leaflet-crosshair,
|
||||
.leaflet-crosshair .leaflet-interactive {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-control {
|
||||
cursor: auto;
|
||||
}
|
||||
.leaflet-dragging .leaflet-grab,
|
||||
.leaflet-dragging .leaflet-grab .leaflet-interactive,
|
||||
.leaflet-dragging .leaflet-marker-draggable {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* marker & overlays interactivity */
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-pane > svg path,
|
||||
.leaflet-tile-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-marker-icon.leaflet-interactive,
|
||||
.leaflet-image-layer.leaflet-interactive,
|
||||
.leaflet-pane > svg path.leaflet-interactive,
|
||||
svg.leaflet-image-layer.leaflet-interactive path {
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* visual tweaks */
|
||||
|
||||
.leaflet-container {
|
||||
background: #ddd;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.leaflet-container a {
|
||||
color: #0078A8;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
border: 2px dotted #38f;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
|
||||
/* general typography */
|
||||
.leaflet-container {
|
||||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
/* general toolbar styles */
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-control-layers-toggle {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-bar a:hover,
|
||||
.leaflet-bar a:focus {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.leaflet-bar a:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.leaflet-bar a.leaflet-disabled {
|
||||
cursor: default;
|
||||
background-color: #f4f4f4;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
/* zoom control */
|
||||
|
||||
.leaflet-control-zoom-in,
|
||||
.leaflet-control-zoom-out {
|
||||
font: bold 18px 'Lucida Console', Monaco, monospace;
|
||||
text-indent: 1px;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
|
||||
/* layers control */
|
||||
|
||||
.leaflet-control-layers {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-retina .leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers-2x.png);
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers-toggle {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.leaflet-control-layers .leaflet-control-layers-list,
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 6px 10px 6px 6px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
.leaflet-control-layers-scrollbar {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.leaflet-control-layers-selector {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-size: 1.08333em;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
|
||||
/* Default icon URLs */
|
||||
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
|
||||
background-image: url(images/marker-icon.png);
|
||||
}
|
||||
|
||||
|
||||
/* attribution and scale controls */
|
||||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
margin: 0;
|
||||
}
|
||||
.leaflet-control-attribution,
|
||||
.leaflet-control-scale-line {
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.leaflet-control-attribution a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.leaflet-control-attribution a:hover,
|
||||
.leaflet-control-attribution a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.leaflet-attribution-flag {
|
||||
display: inline !important;
|
||||
vertical-align: baseline !important;
|
||||
width: 1em;
|
||||
height: 0.6669em;
|
||||
}
|
||||
.leaflet-left .leaflet-control-scale {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control-scale {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.leaflet-control-scale-line {
|
||||
border: 2px solid #777;
|
||||
border-top: none;
|
||||
line-height: 1.1;
|
||||
padding: 2px 5px 1px;
|
||||
white-space: nowrap;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
text-shadow: 1px 1px #fff;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
border-bottom: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
|
||||
border-bottom: 2px solid #777;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-attribution,
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
border: 2px solid rgba(0,0,0,0.2);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
/* popup */
|
||||
|
||||
.leaflet-popup {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 13px 24px 13px 20px;
|
||||
line-height: 1.3;
|
||||
font-size: 13px;
|
||||
font-size: 1.08333em;
|
||||
min-height: 1px;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 17px 0;
|
||||
margin: 1.3em 0;
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-top: -1px;
|
||||
margin-left: -20px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
padding: 1px;
|
||||
|
||||
margin: -10px auto 0;
|
||||
pointer-events: auto;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.leaflet-popup-content-wrapper,
|
||||
.leaflet-popup-tip {
|
||||
background: white;
|
||||
color: #333;
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font: 16px/24px Tahoma, Verdana, sans-serif;
|
||||
color: #757575;
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover,
|
||||
.leaflet-container a.leaflet-popup-close-button:focus {
|
||||
color: #585858;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper {
|
||||
-ms-zoom: 1;
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
width: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-control-zoom,
|
||||
.leaflet-oldie .leaflet-control-layers,
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper,
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
|
||||
/* div icon */
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: #fff;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
|
||||
/* Tooltip */
|
||||
/* Base styles for the element that has a tooltip */
|
||||
.leaflet-tooltip {
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-tooltip.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-tooltip-top:before,
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Directions */
|
||||
|
||||
.leaflet-tooltip-bottom {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.leaflet-tooltip-top {
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-top:before {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-top:before {
|
||||
bottom: 0;
|
||||
margin-bottom: -12px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before {
|
||||
top: 0;
|
||||
margin-top: -12px;
|
||||
margin-left: -6px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-left {
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before {
|
||||
right: 0;
|
||||
margin-right: -12px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-right:before {
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
|
||||
/* Printing */
|
||||
|
||||
@media print {
|
||||
/* Prevent printers from removing background-images of controls. */
|
||||
.leaflet-control {
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
6
managment/www/leaflet.js
Normal file
6
managment/www/leaflet.js
Normal file
File diff suppressed because one or more lines are too long
93
managment/www/legacy.php
Normal file
93
managment/www/legacy.php
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<?php
|
||||
include("config.php");
|
||||
// Returns numbers in string format as needed for file names
|
||||
function clipNumber($number, $length)
|
||||
{
|
||||
$number = abs($number) . "";
|
||||
while (strlen($number) < $length)
|
||||
{
|
||||
$number = "0" . $number;
|
||||
}
|
||||
return $number;
|
||||
}
|
||||
$con = new mysqli($SQL_SERVER, $SQL_USER, $SQL_PASSWORD, $SQL_DATABASE, $SQL_PORT);
|
||||
if ($con->connect_error)
|
||||
{
|
||||
quit();
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Osm2City Worldbuild Progress</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Osm2City Worldbuild Progress</h2>
|
||||
Colors:
|
||||
<table border="0">
|
||||
<?php
|
||||
$sql = "SELECT id, name, color FROM status ORDER BY priority";
|
||||
$ret = $con->query($sql)->fetch_all(MYSQLI_ASSOC);
|
||||
if ($ret != False)
|
||||
{
|
||||
foreach($ret as $row)
|
||||
{
|
||||
echo '<tr style="background-color: ' . $row["color"] . '"><td>' . $row["name"] . '</td></tr>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</table>
|
||||
Click on a tile to see it's detailed status.<br/>
|
||||
<ul id="container">
|
||||
<li>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="720" height="450" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<image width="720" height="450" href="map.png"/>
|
||||
<?php
|
||||
$sql = "SELECT topLevel.name AS name, status.color AS color FROM topLevel JOIN status ON topLevel.status_id = status.id";
|
||||
$ret = $con->query($sql)->fetch_all(MYSQLI_ASSOC);
|
||||
if ($ret != False)
|
||||
{
|
||||
$tiles = [];
|
||||
foreach($ret as $row)
|
||||
{
|
||||
$tiles[$row["name"]] = $row["color"];
|
||||
}
|
||||
}
|
||||
for ($i = 80; $i >= -90; $i -= 10)
|
||||
{
|
||||
if ($i >= 0)
|
||||
{
|
||||
$ns = "n";
|
||||
}
|
||||
else
|
||||
{
|
||||
$ns = "s";
|
||||
}
|
||||
$y = (abs($i - 80) / 10) * 25;
|
||||
for ($j = -180; $j <= 170; $j += 10)
|
||||
{
|
||||
if ($j < 0)
|
||||
{
|
||||
$ew = "w";
|
||||
}
|
||||
else
|
||||
{
|
||||
$ew = "e";
|
||||
}
|
||||
$x = 700 - (abs($j - 170) / 10) * 20;
|
||||
$name = $ew . clipNumber($j, 3) . $ns . clipNumber($i, 2);
|
||||
echo '<a href="progressinfo.php?tile=' . $name . '" target="progressinfo"><rect x="' . $x . '" y="' . $y . '" width="20" height="25" style="fill: ' . $tiles[$name] . '; opacity: 0.5;"/></a>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</svg>
|
||||
</li>
|
||||
<li>
|
||||
<iframe name="progressinfo" style="border: 0px; height: 454px; width: 750px;" src="progressinfo.php"></iframe>
|
||||
</li>
|
||||
</ul>
|
||||
<footer>Maps: © OpenStreetMap contributors</footer>
|
||||
</body>
|
||||
</html>
|
||||
91
managment/www/map.js
Normal file
91
managment/www/map.js
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
/**
|
||||
* Set up the download map for FlightGear Canada/US scenery.
|
||||
*
|
||||
* Uses Leaflet.
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Create interactive map.
|
||||
*/
|
||||
function setup_map (config) {
|
||||
|
||||
/**
|
||||
* Parse a bucket name to get the lat/lon
|
||||
*/
|
||||
function parse_bucket_name(name) {
|
||||
let lon = parseInt(name.substr(1, 3));
|
||||
let lat = parseInt(name.substr(5, 2));
|
||||
if (name.substr(0, 1).toLowerCase() == 'w') {
|
||||
lon *= -1;
|
||||
}
|
||||
if (name.substr(4, 1).toLowerCase() == 's') {
|
||||
lat *= -1;
|
||||
}
|
||||
return [lat, lon];
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Start a download in the user's browser
|
||||
*/
|
||||
function download(tile) {
|
||||
var a = document.getElementById("progressinfo");
|
||||
a.setAttribute("src", "progressinfo.php?minor=" + tile);
|
||||
}
|
||||
|
||||
|
||||
// the Leaflet map object
|
||||
let map = L.map('map').setView([45, -100], 4);
|
||||
|
||||
// add OpenStreetMap tiles
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 15,
|
||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
|
||||
// feature group to hold the scenery-bucket rectangles
|
||||
let rectangle_layer = L.featureGroup();
|
||||
|
||||
// Create a rectangle for each bucket
|
||||
for (const [bucket_name, props] of Object.entries(config)) {
|
||||
const [lat, lon] = parse_bucket_name(bucket_name);
|
||||
const bounds = [[lat, lon], [lat+1, lon+1]];
|
||||
const style = { color: props.color, weight: 1};
|
||||
const rect = L.rectangle(bounds, style);
|
||||
|
||||
// add the bucket name to the rect
|
||||
rect.bucket_name = bucket_name;
|
||||
|
||||
// show the bucket name on mouseover
|
||||
rect.bindTooltip(bucket_name);
|
||||
|
||||
// Download when the user clicks on an area
|
||||
rect.on('click', (e) => {
|
||||
console.log(props);
|
||||
download(props.name);
|
||||
})
|
||||
|
||||
// add to the bucket group (for now, skip unavailable buckets)
|
||||
rectangle_layer.addLayer(rect);
|
||||
}
|
||||
|
||||
// add the bucket group to the map
|
||||
map.addLayer(rectangle_layer);
|
||||
|
||||
// set the map's zoom
|
||||
map.fitBounds(rectangle_layer.getBounds());
|
||||
}
|
||||
|
||||
//
|
||||
// Start here
|
||||
//
|
||||
window.onload = async function () {
|
||||
|
||||
// download the config file
|
||||
response = await fetch('download-links.php');
|
||||
config = await response.json();
|
||||
|
||||
// draw the map
|
||||
setup_map(config);
|
||||
};
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<?php
|
||||
session_start();
|
||||
include("config.php");
|
||||
// Returns numbers in string format as needed for file names
|
||||
function clipNumber($number, $length)
|
||||
|
|
@ -10,14 +11,6 @@
|
|||
}
|
||||
return $number;
|
||||
}
|
||||
if (isset($_GET['tile']))
|
||||
{
|
||||
$tile = $_GET['tile'];
|
||||
}
|
||||
else
|
||||
{
|
||||
$tile = "None";
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
|
@ -26,12 +19,13 @@
|
|||
</head>
|
||||
<body id="infobody">
|
||||
<?php
|
||||
if ($tile == "None")
|
||||
if (!isset($_GET['minor']))
|
||||
{
|
||||
echo "No tile selected";
|
||||
}
|
||||
else
|
||||
{
|
||||
$tile = $_GET['minor'];
|
||||
preg_match_all('/([we])(\d{3})([sn])(\d{2})/m', $tile, $matches, PREG_SET_ORDER, 0);
|
||||
$we = $matches[0][1];
|
||||
$lon = (int)$matches[0][2];
|
||||
|
|
@ -45,102 +39,49 @@
|
|||
{
|
||||
$lat *= -1;
|
||||
}
|
||||
echo '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="450" height="450" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<image width="450" height="450" href="https://ows.terrestris.de/osm/service?VERSION=1.3.0&SERVICE=WMS&REQUEST=GetMap&LAYERS=OSM-WMS&STYLES=&CRS=EPSG:4326&BBOX=' . (string)$lat . ',' . (string)$lon . ',' . (string)($lat + 10) . ',' . (string)($lon + 10) . '&WIDTH=450&HEIGHT=450&FORMAT=image/png"/>';
|
||||
// Connect to DB
|
||||
$con = new mysqli($SQL_SERVER, $SQL_USER, $SQL_PASSWORD, $SQL_DATABASE, $SQL_PORT);
|
||||
if ($con->connect_error)
|
||||
{
|
||||
quit();
|
||||
}
|
||||
$sql = 'SELECT * FROM information_schema.tables WHERE table_name = "tile" AND table_schema = "' . $SQL_DATABASE . '"';
|
||||
$ret = $con->query($sql)->fetch_all(MYSQLI_ASSOC);
|
||||
if (!empty($ret))
|
||||
{
|
||||
$tilesAvail = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
$tilesAvail = false;
|
||||
}
|
||||
$stmt = $con->prepare("SELECT secondLevel.name AS name, status.color AS color FROM secondLevel JOIN status ON secondLevel.status_id = status.id WHERE secondLevel.parent_id = (SELECT id FROM topLevel WHERE name = ?)");
|
||||
echo '<div id="tablecontainer">';
|
||||
$stmt = $con->prepare("SELECT status.name AS status FROM secondLevel JOIN status ON secondLevel.status_id = status.id WHERE secondLevel.name = ?");
|
||||
$stmt->bind_param("s", $tile);
|
||||
$stmt->execute();
|
||||
$result = $stmt->get_result();
|
||||
$ret = $result->fetch_all(MYSQLI_ASSOC);
|
||||
if ($ret != False)
|
||||
{
|
||||
$tiles = [];
|
||||
foreach($ret as $row)
|
||||
{
|
||||
$tiles[$row["name"]] = $row["color"];
|
||||
}
|
||||
$y = 405;
|
||||
for ($i = $lat; $i < $lat + 10; $i++)
|
||||
{
|
||||
$x = 0;
|
||||
for ($j = $lon; $j < $lon + 10; $j++)
|
||||
{
|
||||
$name = $we . clipNumber($j, 3) . $sn . clipNumber($i, 2);
|
||||
echo '<a href="progressinfo.php?tile=' . $tile . '&minor=' . $name . '" target="progressinfo"><rect x="' . $x . '" y="' . $y . '" width="45" height="45" style="fill: ' . $tiles[$name] . '; opacity: 0.5;"/></a>';
|
||||
$x += 45;
|
||||
}
|
||||
$y -= 45;
|
||||
}
|
||||
}
|
||||
for ($i = 45; $i < 450; $i += 45)
|
||||
{
|
||||
echo '<line x1="' . $i . '" y1="0" x2="' . $i . '" y2="450" style="stroke:rgb(0,255,0); stroke-width:1" />';
|
||||
echo '<line x1="0" y1="' . $i . '" x2="450" y2="' . $i . '" style="stroke:rgb(0,255,0); stroke-width:1" />';
|
||||
}
|
||||
echo '</svg>';
|
||||
$stmt = $con->prepare("SELECT status.name AS status, COUNT(*) AS sCount, status.color AS color FROM secondLevel JOIN status ON secondLevel.status_id = status.id WHERE secondLevel.parent_id = (SELECT id FROM topLevel WHERE name = ?) GROUP BY status.id ORDER BY priority");
|
||||
$stmt->bind_param("s", $tile);
|
||||
$stmt->execute();
|
||||
$result = $stmt->get_result();
|
||||
$ret = $result->fetch_all(MYSQLI_ASSOC);
|
||||
echo '<div id="tablecontainer"><table border="1"><tr><td>Area Name</td><td>' . $tile . '</td></tr>';
|
||||
$curStatus = Null;
|
||||
foreach ($ret as $row)
|
||||
{
|
||||
echo '<tr style="background-color: ' . $row["color"] . '"><td>' . $row["status"] . '</td><td>' . $row["sCount"] . '</td></tr>';
|
||||
$curStatus = $row["status"];
|
||||
}
|
||||
if (isset($_GET["minor"]))
|
||||
echo '<form method="post" action="api.php" target="_blank">
|
||||
<label>Update Area</label> ' . $_GET['minor'] . '<br/>';
|
||||
if(!isset($_SESSION["token"]))
|
||||
{
|
||||
if ($tilesAvail)
|
||||
{
|
||||
$stmt = $con->prepare("SELECT status.name AS status, COUNT(*) AS sCount, status.color AS color FROM tile JOIN status ON tile.status_id = status.id WHERE tile.parent_id = (SELECT id FROM secondLevel WHERE name = ?) GROUP BY status.id ORDER BY priority");
|
||||
$stmt->bind_param("s", $_GET["minor"]);
|
||||
$stmt->execute();
|
||||
$result = $stmt->get_result();
|
||||
$ret = $result->fetch_all(MYSQLI_ASSOC);
|
||||
echo '</table>';
|
||||
echo '<table border="1"><tr><td>Area Name</td><td>' . $_GET["minor"] . '</td></tr>';
|
||||
foreach ($ret as $row)
|
||||
{
|
||||
echo '<tr style="background-color: ' . $row["color"] . '"><td>' . $row["status"] . '</td><td>' . $row["sCount"] . '</td></tr>';
|
||||
}
|
||||
}
|
||||
echo '</table>';
|
||||
echo '<form method="post" action="api.php" target="_blank">
|
||||
<label>Update Area ' . $_GET["minor"] . '</label>
|
||||
<input type="text" name="auth" placeholder="Token"/><br/>
|
||||
<input type="hidden" name="action" value="set"/>
|
||||
<input type="hidden" name="area" value="' . $_GET["minor"] . '"/>
|
||||
<select name="status">';
|
||||
$sql = "SELECT name FROM status ORDER BY priority";
|
||||
$ret = $con->query($sql)->fetch_all(MYSQLI_ASSOC);
|
||||
if ($ret != False)
|
||||
{
|
||||
foreach($ret as $row)
|
||||
{
|
||||
echo '<option value="' . $row["name"] . '">' . $row["name"] . '</option>';
|
||||
}
|
||||
}
|
||||
echo '</select>
|
||||
<input type="submit" value="Update"/>
|
||||
</form><br/>';
|
||||
echo '<input type="text" name="auth" placeholder="Token"/><br/>';
|
||||
}
|
||||
echo '<input type="hidden" name="action" value="set"/>
|
||||
<input type="hidden" name="area" value="' . $_GET["minor"] . '"/>
|
||||
<select name="status">';
|
||||
$sql = "SELECT name FROM status ORDER BY priority";
|
||||
$ret = $con->query($sql)->fetch_all(MYSQLI_ASSOC);
|
||||
if ($ret != False)
|
||||
{
|
||||
foreach($ret as $row)
|
||||
{
|
||||
echo '<option value="' . $row["name"] . '"';
|
||||
if ($row["name"] == $curStatus)
|
||||
{
|
||||
echo ' selected';
|
||||
}
|
||||
echo '>' . $row["name"] . '</option>';
|
||||
}
|
||||
}
|
||||
echo '</select>
|
||||
<input type="submit" value="Update"/>
|
||||
</form>';
|
||||
echo '</div>';
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 457px;
|
||||
left: 6px;
|
||||
}
|
||||
table
|
||||
{
|
||||
|
|
@ -24,3 +24,9 @@ svg
|
|||
{
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
||||
#map
|
||||
{
|
||||
height: 450px;
|
||||
width: 720px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue