simplifying the displayed place name

src/sources/position.js

@@ -14,11 +14,9 @@ export const getPosition = async () => {
     const res = await fetchOk(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}`);
     const json = await res.json();
 
-    const city = json.city;
-    const administrative = json.localityInfo.administrative.sort((a, b) => a.adminLevel - b.adminLevel || a.order - b.order).pop().name;
-    const informative = json.localityInfo.informative.sort((a, b) => a.order - b.order).pop().name;
+    const { locality, city } = json;
 
-    Object.assign(data, { city, administrative, informative });
+    Object.assign(data, { city, locality });
   } catch (e) {};
 
   console.log('🎯', data);

src/ui/location.js

@@ -11,15 +11,9 @@ export const Location = () => {
       margin: 1rem 0;
     }
 
-    $ h1 {
-      padding: 0;
-      margin: 0.5rem 0;
-      font-size: 2rem;
-    }
-
     $ h2 {
-      padding: 0;
       margin: 0.2rem 0;
+      line-height: 2;
       font-size: 1.5rem;
     }
 
@@ -33,16 +27,13 @@ export const Location = () => {
     return;
   }
 
-  const { latitude, longitude, informative, administrative, city } = location.value;
+  const { latitude, longitude, city, locality } = location.value;
   const { elevation } = weather.value || {};
 
   return html`<div class="${classname}">
-    ${administrative ?
-      html`
-        <h2>${administrative}<//>
-        <h3>${city}, ${informative}<//>
-      ` :
-      html`<h1>Unknown location<//>`
+    ${locality ?
+      html`<h2>${locality}, ${city}<//>` :
+      html`<h2>Unknown location<//>`
     }
     <div class="dim">${latitude}, ${longitude}<//>
     <div class="dim">Elevation: ${elevation} meters<//>