Merge branch 'zoom-out-map-and-remove-labels'

5 files changed, 13 insertions, 88 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 58243ce22a..b7e4e2e998 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -23,7 +23,7 @@ import userInterfaceActions from './redux/userinterface/actions';
 import versionActions from './redux/version/actions';
 
 import { IAppUpgradeInfo, ICurrentAppVersionInfo } from '../main';
-import { cities, countries, loadTranslations, messages, relayLocations } from '../shared/gettext';
+import { loadTranslations, messages, relayLocations } from '../shared/gettext';
 import { IGuiSettingsState, SYSTEM_PREFERRED_LOCALE_KEY } from '../shared/gui-settings-state';
 import { IpcRendererEventChannel, IRelayListPair } from '../shared/ipc-event-channel';
 import { getRendererLogFile, setupLogging } from '../shared/logging';
@@ -403,7 +403,7 @@ export default class AppRenderer {
   }
 
   private loadTranslations(locale: string) {
-    for (const catalogue of [messages, countries, cities, relayLocations]) {
+    for (const catalogue of [messages, relayLocations]) {
       loadTranslations(locale, catalogue);
     }
   }
@@ -637,13 +637,13 @@ export default class AppRenderer {
     if (location.city) {
       const city = location.city;
 
-      location.city = relayLocations.gettext(city) || cities.gettext(city) || city;
+      location.city = relayLocations.gettext(city) || city;
     }
 
     if (location.country) {
       const country = location.country;
 
-      location.country = relayLocations.gettext(country) || countries.gettext(country) || country;
+      location.country = relayLocations.gettext(country) || country;
     }
 
     return location;
diff --git a/gui/src/renderer/components/Connect.tsx b/gui/src/renderer/components/Connect.tsx
index 2308a91dff..4cdf0c75a9 100644
--- a/gui/src/renderer/components/Connect.tsx
+++ b/gui/src/renderer/components/Connect.tsx
@@ -237,7 +237,7 @@ export default class Connect extends Component<IProps, IState> {
         showMarker: this.showMarkerOrSpinner() === 'marker',
         markerStyle: this.getMarkerStyle(),
         // zoom in when connected
-        zoomLevel: state === 'connected' ? ZoomLevel.low : ZoomLevel.medium,
+        zoomLevel: state === 'connected' ? ZoomLevel.high : ZoomLevel.medium,
         // a magic offset to align marker with spinner
         offset: [0, 123],
       };
@@ -247,7 +247,7 @@ export default class Connect extends Component<IProps, IState> {
         showMarker: false,
         markerStyle: MarkerStyle.unsecure,
         // show the world when user location is not known
-        zoomLevel: ZoomLevel.high,
+        zoomLevel: ZoomLevel.low,
         // remove the offset since the marker is hidden
         offset: [0, 0],
       };
diff --git a/gui/src/renderer/components/Map.tsx b/gui/src/renderer/components/Map.tsx
index 4fc77cb739..c22085c8be 100644
--- a/gui/src/renderer/components/Map.tsx
+++ b/gui/src/renderer/components/Map.tsx
@@ -3,6 +3,7 @@ import { Component, Types, View } from 'reactxp';
 
 import SvgMap from './SvgMap';
 
+// Higher zoom level is more zoomed in
 export enum ZoomLevel {
   high,
   medium,
@@ -84,14 +85,15 @@ export default class Map extends Component<IProps, IState> {
   };
 
   // TODO: Remove zoom level in favor of center + coordinate span
+  // TODO: Zoomlevels below 2.22 makes australia invisible
   private zoomLevel(variant: ZoomLevel) {
     switch (variant) {
-      case ZoomLevel.high:
+      case ZoomLevel.low:
         return 1;
       case ZoomLevel.medium:
-        return 20;
-      case ZoomLevel.low:
-        return 40;
+        return 2.22;
+      case ZoomLevel.high:
+        return 5;
     }
   }
 
diff --git a/gui/src/renderer/components/SvgMap.tsx b/gui/src/renderer/components/SvgMap.tsx
index aae8e151b7..3f715a434e 100644
--- a/gui/src/renderer/components/SvgMap.tsx
+++ b/gui/src/renderer/components/SvgMap.tsx
@@ -9,44 +9,16 @@ import {
   Markers,
   ZoomableGroup,
 } from 'react-simple-maps';
-import { cities, countries } from '../../shared/gettext';
 
 import geographyData from '../../../assets/geo/geometry.json';
 import statesProvincesLinesData from '../../../assets/geo/states-provinces-lines.json';
 
-import cityTreeData from '../../../assets/geo/cities.rbush.json';
-import countryTreeData from '../../../assets/geo/countries.rbush.json';
 import geometryTreeData from '../../../assets/geo/geometry.rbush.json';
 import statesProvincesLinesTreeData from '../../../assets/geo/states-provinces-lines.rbush.json';
 
 // Infer the GeoProjection type from the `geoTimes()` return value
 type GeoProjection = ReturnType<typeof geoTimes>;
 
-interface ICountryLeaf extends rbush.BBox {
-  id: string;
-  properties: {
-    name: string;
-  };
-  geometry: {
-    type: string;
-    coordinates: [number, number];
-  };
-}
-
-interface ICityLeaf extends rbush.BBox {
-  id: string;
-  properties: {
-    scalerank: number;
-    name: string;
-    latitude: number;
-    longitude: number;
-  };
-  geometry: {
-    type: string;
-    coordinates: [number, number];
-  };
-}
-
 interface IGeometryLeaf extends rbush.BBox {
   id: string;
 }
@@ -55,8 +27,6 @@ interface IProvinceAndStateLineLeaf extends rbush.BBox {
   id: string;
 }
 
-const countryTree = rbush<ICountryLeaf>().fromJSON(countryTreeData);
-const cityTree = rbush<ICityLeaf>().fromJSON(cityTreeData);
 const geometryTree = rbush<IGeometryLeaf>().fromJSON(geometryTreeData);
 const provincesStatesLinesTree = rbush<IProvinceAndStateLineLeaf>().fromJSON(
   statesProvincesLinesTreeData,
@@ -77,8 +47,6 @@ export interface IProps {
 interface IState {
   zoomCenter: [number, number];
   zoomLevel: number;
-  visibleCities: ICityLeaf[];
-  visibleCountries: ICountryLeaf[];
   visibleGeometry: IGeometryLeaf[];
   visibleStatesProvincesLines: IProvinceAndStateLineLeaf[];
   viewportBbox: BBox;
@@ -91,8 +59,6 @@ export default class SvgMap extends React.Component<IProps, IState> {
   public state: IState = {
     zoomCenter: [0, 0],
     zoomLevel: 1,
-    visibleCities: [],
-    visibleCountries: [],
     visibleGeometry: [],
     visibleStatesProvincesLines: [],
     viewportBbox: [0, 0, 0, 0],
@@ -174,29 +140,6 @@ export default class SvgMap extends React.Component<IProps, IState> {
       </Marker>
     );
 
-    const countryMarkers = this.state.visibleCountries.map((item) => (
-      <Marker
-        key={`country-${item.id}`}
-        marker={{ coordinates: item.geometry.coordinates }}
-        style={markerStyle}>
-        <text fill="rgba(255,255,255,.6)" fontSize="22" textAnchor="middle">
-          {countries.gettext(item.properties.name)}
-        </text>
-      </Marker>
-    ));
-
-    const cityMarkers = this.state.visibleCities.map((item) => (
-      <Marker
-        key={`city-${item.id}`}
-        marker={{ coordinates: item.geometry.coordinates }}
-        style={markerStyle}>
-        <circle r="2" fill="rgba(255,255,255,.6)" />
-        <text x="0" y="-10" fill="rgba(255,255,255,.6)" fontSize="16" textAnchor="middle">
-          {cities.gettext(item.properties.name)}
-        </text>
-      </Marker>
-    ));
-
     return (
       <ComposableMap
         width={this.props.width}
@@ -233,7 +176,7 @@ export default class SvgMap extends React.Component<IProps, IState> {
               ));
             }}
           </Geographies>
-          <Markers>{[...countryMarkers, ...cityMarkers, userMarker]}</Markers>
+          <Markers>{[userMarker]}</Markers>
         </ZoomableGroup>
       </ComposableMap>
     );
@@ -331,13 +274,6 @@ export default class SvgMap extends React.Component<IProps, IState> {
       zoomLevel,
     );
 
-    const viewportBboxMatch = {
-      minX: viewportBbox[0],
-      minY: viewportBbox[1],
-      maxX: viewportBbox[2],
-      maxY: viewportBbox[3],
-    };
-
     // combine previous and current viewports to get the rough area of transition
     const combinedViewportBboxMatch = prevState
       ? {
@@ -353,17 +289,12 @@ export default class SvgMap extends React.Component<IProps, IState> {
           maxY: viewportBbox[3],
         };
 
-    const visibleCountries =
-      zoomLevel < 5 || zoomLevel > 20 ? [] : countryTree.search(viewportBboxMatch);
-    const visibleCities = zoomLevel >= 40 ? cityTree.search(viewportBboxMatch) : [];
     const visibleGeometry = geometryTree.search(combinedViewportBboxMatch);
     const visibleStatesProvincesLines = provincesStatesLinesTree.search(combinedViewportBboxMatch);
 
     return {
       zoomCenter,
       zoomLevel,
-      visibleCities,
-      visibleCountries,
       visibleGeometry,
       visibleStatesProvincesLines,
       viewportBbox,
diff --git a/gui/src/shared/gettext.ts b/gui/src/shared/gettext.ts
index 1f6af17aed..e98a38ac33 100644
--- a/gui/src/shared/gettext.ts
+++ b/gui/src/shared/gettext.ts
@@ -88,14 +88,6 @@ export const messages = new Gettext({ debug: false });
 messages.setTextDomain('messages');
 setErrorHandler(messages);
 
-export const countries = new Gettext({ debug: false });
-countries.setTextDomain('countries');
-setErrorHandler(countries);
-
-export const cities = new Gettext({ debug: false });
-cities.setTextDomain('cities');
-setErrorHandler(cities);
-
 export const relayLocations = new Gettext({ debug: false });
 relayLocations.setTextDomain('relay-locations');
 setErrorHandler(relayLocations);