UI Overhaul: Groessere Elemente, bessere InfoBox-Platzierung
PANEL (links): - 240px breit (war 200px) - Checkboxen 16x16px (war 12x12) - Dots 10px (war 8px) - Layer-Namen 13px (war 11px) - Counts 12px (war 10px) - Mehr Padding pro Toggle-Zeile INFOBOX (bei Klick): - Links neben dem Panel platziert (254px vom Rand) - 420px breit, max 60vh hoch, scrollbar - Kollidiert nicht mit Panel oder Sidebar - Groesserer Titel (14px), mehr Padding PUNKTE AUF DEM GLOBUS: - Flugzeuge: 3/4/5px (war 2/2.5/3) - Schiffe: 3/4/5px (war 2/2.5/3) - Militaer: 6px (war 4) - Katastrophen: 10px (war 8) - Erdbeben: 6-15px (war 4-10) - GDELT: 7px (war 5) - ISS: 14px (war 10) - Cluster: +30% groesser HEADER + FOOTER: - Header 48px (war 44px) - Footer 32px (war 28px) - Titel 15px, Stats 12px - Lage-Select + Suche groesser
Dieser Commit ist enthalten in:
@@ -119,7 +119,7 @@ const DisastersLayer = {
|
||||
name: icon.label + ': ' + (evt.title || '?'),
|
||||
position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 0),
|
||||
point: {
|
||||
pixelSize: 8,
|
||||
pixelSize: 10,
|
||||
color: Cesium.Color.fromCssColorString(icon.color),
|
||||
outlineColor: Cesium.Color.fromCssColorString(icon.color).withAlpha(0.4),
|
||||
outlineWidth: 3,
|
||||
@@ -160,7 +160,7 @@ const DisastersLayer = {
|
||||
name: 'Erdbeben M' + mag.toFixed(1) + ' ' + (p.place || ''),
|
||||
position: Cesium.Cartesian3.fromDegrees(c[0], c[1], 0),
|
||||
point: {
|
||||
pixelSize: Math.max(mag * 2.5, 4),
|
||||
pixelSize: Math.max(mag * 3, 6),
|
||||
color: Cesium.Color.fromCssColorString(color),
|
||||
outlineColor: Cesium.Color.fromCssColorString(color).withAlpha(0.4),
|
||||
outlineWidth: 2,
|
||||
|
||||
@@ -100,7 +100,7 @@ const FlightsLayer = {
|
||||
var c = clusters[keys[j]];
|
||||
var avgLat = c.sumLat / c.count;
|
||||
var avgLon = c.sumLon / c.count;
|
||||
var size = Math.min(Math.max(Math.sqrt(c.count) * 1.5, 4), 20);
|
||||
var size = Math.min(Math.max(Math.sqrt(c.count) * 2, 6), 24);
|
||||
|
||||
this._points.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 50000),
|
||||
@@ -114,7 +114,7 @@ const FlightsLayer = {
|
||||
this._labels.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 50000),
|
||||
text: c.count.toString(),
|
||||
font: '11px sans-serif',
|
||||
font: '13px sans-serif bold',
|
||||
fillColor: Cesium.Color.WHITE,
|
||||
outlineColor: Cesium.Color.BLACK,
|
||||
outlineWidth: 3,
|
||||
|
||||
@@ -47,7 +47,7 @@ const GdeltLayer = {
|
||||
self._dataSource.entities.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(c[0], c[1]),
|
||||
point: {
|
||||
pixelSize: 5,
|
||||
pixelSize: 7,
|
||||
color: Cesium.Color.fromCssColorString('#ff8800'),
|
||||
outlineColor: Cesium.Color.fromCssColorString('#663300'),
|
||||
outlineWidth: 1,
|
||||
|
||||
@@ -23,7 +23,7 @@ const InfraLayer = {
|
||||
.then(function(data) {
|
||||
var yellow = Cesium.Color.fromCssColorString('#ffdd00');
|
||||
(data.plants || []).forEach(function(p) {
|
||||
self._points.add({ position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), pixelSize: 5, color: yellow,
|
||||
self._points.add({ position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), pixelSize: 7, color: yellow,
|
||||
outlineColor: Cesium.Color.fromCssColorString('#ff8800'), outlineWidth: 2 });
|
||||
self._labels.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), text: p.name,
|
||||
@@ -47,7 +47,7 @@ const InfraLayer = {
|
||||
.then(function(data) {
|
||||
var red = Cesium.Color.fromCssColorString('#ff4444');
|
||||
(data.bases || []).forEach(function(b) {
|
||||
self._points.add({ position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), pixelSize: 4, color: red,
|
||||
self._points.add({ position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), pixelSize: 6, color: red,
|
||||
outlineColor: Cesium.Color.fromCssColorString('#aa0000'), outlineWidth: 1 });
|
||||
self._labels.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), text: b.name,
|
||||
|
||||
@@ -7,7 +7,7 @@ const ISSLayer = {
|
||||
this._entity = viewer.entities.add({
|
||||
name: 'ISS - International Space Station',
|
||||
position: Cesium.Cartesian3.fromDegrees(0, 0, 420000),
|
||||
point: { pixelSize: 10, color: Cesium.Color.fromCssColorString('#ff4444'),
|
||||
point: { pixelSize: 14, color: Cesium.Color.fromCssColorString('#ff4444'),
|
||||
outlineColor: Cesium.Color.WHITE, outlineWidth: 2 },
|
||||
label: { text: 'ISS', font: '12px monospace bold',
|
||||
fillColor: Cesium.Color.fromCssColorString('#ff4444'),
|
||||
|
||||
@@ -71,7 +71,7 @@ const MilitaryLayer = {
|
||||
for (var i = 0; i < this._data.length; i++) {
|
||||
var a = this._data[i];
|
||||
var altM = (a.alt_baro || 10000) * 0.3048;
|
||||
this._points.add({ position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM), pixelSize: 4, color: red });
|
||||
this._points.add({ position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM), pixelSize: 6, color: red });
|
||||
var cs = a.flight || a.reg || '';
|
||||
if (cs) {
|
||||
this._labels.add({
|
||||
|
||||
@@ -126,7 +126,7 @@ const MonitorLayer = {
|
||||
var p = f.properties;
|
||||
var color = colors[p.category] || colors.mentioned;
|
||||
var count = p.article_count || 1;
|
||||
var size = Math.min(Math.max(Math.sqrt(count) * 2.5, 4), 14);
|
||||
var size = Math.min(Math.max(Math.sqrt(count) * 3, 6), 18);
|
||||
this._points.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 1000),
|
||||
pixelSize: size, color: color,
|
||||
|
||||
@@ -120,7 +120,7 @@ const ShipsLayer = {
|
||||
count++;
|
||||
var colorStr = this._getColor(cat);
|
||||
var color = Cesium.Color.fromCssColorString(colorStr);
|
||||
var r = level === 'close' ? 3 : level === 'medium' ? 2.5 : 2;
|
||||
var r = level === 'close' ? 5 : level === 'medium' ? 4 : 3;
|
||||
|
||||
this._points.add({
|
||||
position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0),
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren