UI: Submenu eingerueckt + Punkte deutlich groesser
SUBMENU (Schiffstypen etc.): - Links eingerueckt (28px padding-left + 12px margin) - Gruene Linie am linken Rand zur Abgrenzung - Leicht dunklerer Hintergrund - Klar als Untermenue erkennbar PUNKTGROESSEN (alle Layer nochmals ~60% groesser): - Flugzeuge: 5/6/8px (war 3/4/5) - Schiffe: 4/5/7px (war 3/4/5) - Militaer: 8px (war 6) - Katastrophen: 14px (war 10) - Erdbeben: 8-20px (war 6-15) - GDELT: 10px (war 7) - ISS: 18px (war 14) - AKWs: 10px (war 7) - Satelliten: 3/5px (war 1.5/3) - Cluster: +40% groesser
Dieser Commit ist enthalten in:
@@ -581,8 +581,11 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
|
|||||||
.dot-terminator { background: #ff8800; }
|
.dot-terminator { background: #ff8800; }
|
||||||
.dot-timezones { background: #8888ff; }
|
.dot-timezones { background: #8888ff; }
|
||||||
|
|
||||||
/* === Ship Filters === */
|
/* === Ship Filters (Submenu) === */
|
||||||
.ship-filters {
|
.ship-filters {
|
||||||
padding: 4px 12px 6px;
|
padding: 6px 8px 8px 28px;
|
||||||
border-top: 1px solid rgba(255,255,255,0.04);
|
margin-left: 12px;
|
||||||
|
border-left: 2px solid rgba(0, 255, 136, 0.2);
|
||||||
|
background: rgba(255,255,255,0.02);
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -119,7 +119,7 @@ const DisastersLayer = {
|
|||||||
name: icon.label + ': ' + (evt.title || '?'),
|
name: icon.label + ': ' + (evt.title || '?'),
|
||||||
position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 0),
|
position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 0),
|
||||||
point: {
|
point: {
|
||||||
pixelSize: 10,
|
pixelSize: 14,
|
||||||
color: Cesium.Color.fromCssColorString(icon.color),
|
color: Cesium.Color.fromCssColorString(icon.color),
|
||||||
outlineColor: Cesium.Color.fromCssColorString(icon.color).withAlpha(0.4),
|
outlineColor: Cesium.Color.fromCssColorString(icon.color).withAlpha(0.4),
|
||||||
outlineWidth: 3,
|
outlineWidth: 3,
|
||||||
@@ -160,7 +160,7 @@ const DisastersLayer = {
|
|||||||
name: 'Erdbeben M' + mag.toFixed(1) + ' ' + (p.place || ''),
|
name: 'Erdbeben M' + mag.toFixed(1) + ' ' + (p.place || ''),
|
||||||
position: Cesium.Cartesian3.fromDegrees(c[0], c[1], 0),
|
position: Cesium.Cartesian3.fromDegrees(c[0], c[1], 0),
|
||||||
point: {
|
point: {
|
||||||
pixelSize: Math.max(mag * 3, 6),
|
pixelSize: Math.max(mag * 4, 8),
|
||||||
color: Cesium.Color.fromCssColorString(color),
|
color: Cesium.Color.fromCssColorString(color),
|
||||||
outlineColor: Cesium.Color.fromCssColorString(color).withAlpha(0.4),
|
outlineColor: Cesium.Color.fromCssColorString(color).withAlpha(0.4),
|
||||||
outlineWidth: 2,
|
outlineWidth: 2,
|
||||||
|
|||||||
@@ -100,7 +100,7 @@ const FlightsLayer = {
|
|||||||
var c = clusters[keys[j]];
|
var c = clusters[keys[j]];
|
||||||
var avgLat = c.sumLat / c.count;
|
var avgLat = c.sumLat / c.count;
|
||||||
var avgLon = c.sumLon / c.count;
|
var avgLon = c.sumLon / c.count;
|
||||||
var size = Math.min(Math.max(Math.sqrt(c.count) * 2, 6), 24);
|
var size = Math.min(Math.max(Math.sqrt(c.count) * 3, 8), 30);
|
||||||
|
|
||||||
this._points.add({
|
this._points.add({
|
||||||
position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 50000),
|
position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 50000),
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ const GdeltLayer = {
|
|||||||
self._dataSource.entities.add({
|
self._dataSource.entities.add({
|
||||||
position: Cesium.Cartesian3.fromDegrees(c[0], c[1]),
|
position: Cesium.Cartesian3.fromDegrees(c[0], c[1]),
|
||||||
point: {
|
point: {
|
||||||
pixelSize: 7,
|
pixelSize: 10,
|
||||||
color: Cesium.Color.fromCssColorString('#ff8800'),
|
color: Cesium.Color.fromCssColorString('#ff8800'),
|
||||||
outlineColor: Cesium.Color.fromCssColorString('#663300'),
|
outlineColor: Cesium.Color.fromCssColorString('#663300'),
|
||||||
outlineWidth: 1,
|
outlineWidth: 1,
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ const InfraLayer = {
|
|||||||
.then(function(data) {
|
.then(function(data) {
|
||||||
var yellow = Cesium.Color.fromCssColorString('#ffdd00');
|
var yellow = Cesium.Color.fromCssColorString('#ffdd00');
|
||||||
(data.plants || []).forEach(function(p) {
|
(data.plants || []).forEach(function(p) {
|
||||||
self._points.add({ position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), pixelSize: 7, color: yellow,
|
self._points.add({ position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), pixelSize: 10, color: yellow,
|
||||||
outlineColor: Cesium.Color.fromCssColorString('#ff8800'), outlineWidth: 2 });
|
outlineColor: Cesium.Color.fromCssColorString('#ff8800'), outlineWidth: 2 });
|
||||||
self._labels.add({
|
self._labels.add({
|
||||||
position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), text: p.name,
|
position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), text: p.name,
|
||||||
@@ -47,7 +47,7 @@ const InfraLayer = {
|
|||||||
.then(function(data) {
|
.then(function(data) {
|
||||||
var red = Cesium.Color.fromCssColorString('#ff4444');
|
var red = Cesium.Color.fromCssColorString('#ff4444');
|
||||||
(data.bases || []).forEach(function(b) {
|
(data.bases || []).forEach(function(b) {
|
||||||
self._points.add({ position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), pixelSize: 6, color: red,
|
self._points.add({ position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), pixelSize: 8, color: red,
|
||||||
outlineColor: Cesium.Color.fromCssColorString('#aa0000'), outlineWidth: 1 });
|
outlineColor: Cesium.Color.fromCssColorString('#aa0000'), outlineWidth: 1 });
|
||||||
self._labels.add({
|
self._labels.add({
|
||||||
position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), text: b.name,
|
position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), text: b.name,
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ const ISSLayer = {
|
|||||||
this._entity = viewer.entities.add({
|
this._entity = viewer.entities.add({
|
||||||
name: 'ISS - International Space Station',
|
name: 'ISS - International Space Station',
|
||||||
position: Cesium.Cartesian3.fromDegrees(0, 0, 420000),
|
position: Cesium.Cartesian3.fromDegrees(0, 0, 420000),
|
||||||
point: { pixelSize: 14, color: Cesium.Color.fromCssColorString('#ff4444'),
|
point: { pixelSize: 18, color: Cesium.Color.fromCssColorString('#ff4444'),
|
||||||
outlineColor: Cesium.Color.WHITE, outlineWidth: 2 },
|
outlineColor: Cesium.Color.WHITE, outlineWidth: 2 },
|
||||||
label: { text: 'ISS', font: '12px monospace bold',
|
label: { text: 'ISS', font: '12px monospace bold',
|
||||||
fillColor: Cesium.Color.fromCssColorString('#ff4444'),
|
fillColor: Cesium.Color.fromCssColorString('#ff4444'),
|
||||||
|
|||||||
@@ -71,7 +71,7 @@ const MilitaryLayer = {
|
|||||||
for (var i = 0; i < this._data.length; i++) {
|
for (var i = 0; i < this._data.length; i++) {
|
||||||
var a = this._data[i];
|
var a = this._data[i];
|
||||||
var altM = (a.alt_baro || 10000) * 0.3048;
|
var altM = (a.alt_baro || 10000) * 0.3048;
|
||||||
this._points.add({ position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM), pixelSize: 6, color: red });
|
this._points.add({ position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM), pixelSize: 8, color: red });
|
||||||
var cs = a.flight || a.reg || '';
|
var cs = a.flight || a.reg || '';
|
||||||
if (cs) {
|
if (cs) {
|
||||||
this._labels.add({
|
this._labels.add({
|
||||||
|
|||||||
@@ -126,7 +126,7 @@ const MonitorLayer = {
|
|||||||
var p = f.properties;
|
var p = f.properties;
|
||||||
var color = colors[p.category] || colors.mentioned;
|
var color = colors[p.category] || colors.mentioned;
|
||||||
var count = p.article_count || 1;
|
var count = p.article_count || 1;
|
||||||
var size = Math.min(Math.max(Math.sqrt(count) * 3, 6), 18);
|
var size = Math.min(Math.max(Math.sqrt(count) * 4, 8), 22);
|
||||||
this._points.add({
|
this._points.add({
|
||||||
position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 1000),
|
position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 1000),
|
||||||
pixelSize: size, color: color,
|
pixelSize: size, color: color,
|
||||||
|
|||||||
@@ -105,7 +105,7 @@ const SatellitesLayer = {
|
|||||||
var color = colors[this._data[i].group] || Cesium.Color.WHITE;
|
var color = colors[this._data[i].group] || Cesium.Color.WHITE;
|
||||||
this._points.add({
|
this._points.add({
|
||||||
position: Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, pos.alt),
|
position: Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, pos.alt),
|
||||||
pixelSize: this._data[i].group === 'starlink' ? 1.5 : 3,
|
pixelSize: this._data[i].group === 'starlink' ? 3 : 5,
|
||||||
color: color,
|
color: color,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -120,7 +120,7 @@ const ShipsLayer = {
|
|||||||
count++;
|
count++;
|
||||||
var colorStr = this._getColor(cat);
|
var colorStr = this._getColor(cat);
|
||||||
var color = Cesium.Color.fromCssColorString(colorStr);
|
var color = Cesium.Color.fromCssColorString(colorStr);
|
||||||
var r = level === 'close' ? 5 : level === 'medium' ? 4 : 3;
|
var r = level === 'close' ? 7 : level === 'medium' ? 5 : 4;
|
||||||
|
|
||||||
this._points.add({
|
this._points.add({
|
||||||
position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0),
|
position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0),
|
||||||
|
|||||||
In neuem Issue referenzieren
Einen Benutzer sperren