Add location/hash to Tokyo municipality type

components/Legend/Tokyo.js

@@ -12,7 +12,7 @@ const { div } = van.tags;
 export const TokyoElm = div({ id: 'legend-tokyo' }, Object.values(municipalityType).map((type, index) => (
   LegendItem(type, colorsTokyo[index], state.municipalityType, {
     onclick: () => {
-      setMunicipality(null);
+      setMunicipality(null, false);
       setMunicipalityType(type);
     },
   }))));

components/Title.js

@@ -10,7 +10,7 @@ import { getTitle } from '../js/title.js';
 import { replaceSpecialChars } from '../js/utils.js';
 import { state } from '../js/state.js';
 
-const { div, h1, h2, h3, h4 } = van.tags;
+const { div, h1, h2, h3, h4, h5 } = van.tags;
 
 const getPageTitle = () => {
   const title = getTitle().filter(title => title);
@@ -19,12 +19,15 @@ const getPageTitle = () => {
 
 const getHash = () => {
   const isTokyo = state.layer.val === layers.tokyo;
-  const title = getTitle().slice(isTokyo ? 2 : 1).filter(title => title);
-  return title.map(title => replaceSpecialChars(title.en)).join('/');
+  const title = getTitle().slice(isTokyo ? 2 : 1);
+  if (isTokyo && state.municipality.val) {
+    delete title[1];
+  }
+  return title.filter(title => title).map(title => replaceSpecialChars(title.en)).join('/');
 }
 
 export const TitleElm = () => {
-  const [title1, title2, title3, title4] = getTitle();
+  const [title1, title2, title3, title4, title5] = getTitle();
 
   document.title = getPageTitle();
   if (state.init.val) {
@@ -63,5 +66,10 @@ export const TitleElm = () => {
       {},
       furigana(title4),
     ),
+    title5 && div({ class: 'h5 title-separator' }, '/'),
+    title5 && h5(
+      {},
+      furigana(title5),
+    ),
   )
 };

css/mobile.css

@@ -16,7 +16,8 @@
   #title h1,
   #title h2,
   #title h3,
-  #title h4 {
+  #title h4,
+  #title h5 {
     margin: 0 0 0.5em;
     font-size: 4em !important;
   }

css/title.css

@@ -15,7 +15,8 @@
 #title h1,
 #title h2,
 #title h3,
-#title h4 {
+#title h4,
+#title h5 {
   margin: 0 0 0.4em;
   font-size: 5vh;
 }
@@ -29,6 +30,11 @@ body:has(h3) #title .h2.title-separator {
   display: none;
 }
 
+body:has(h5) #title h4,
+body:has(h5) #title .h4.title-separator {
+  display: none;
+}
+
 .title-separator {
   font-size: 5vh;
   margin: 0.4em 0.5em 0;

data/dict.js

@@ -27,7 +27,7 @@ export const dict = {
   },
   reportAnIssue: {
     ja: '問題を報告する',
-    furigana: ['もん', 'だい', '', 'ほう', 'こく', '', '', ''],
+    furigana: ['もん', 'だい', '', 'ほう', 'こく', '', ''],
     en: 'Report an Issue',
   },
 }

js/init.js

@@ -5,46 +5,61 @@ import { setRegion, setPrefecture, setCity, centerPosition } from './map/index.j
 import { debounce, parseHash } from './utils.js';
 import { setLayer } from './layers.js';
 import { createInlineSVG } from './svg.js';
-import { centerTokyo, findMunicipality, setMunicipality } from './tokyo.js';
+import { centerTokyo, findMunicipality, setMunicipality, setMunicipalityType } from './tokyo.js';
 import { Root } from '../components/index.js';
 import { layers } from '../data/dict.js';
 import van from '../lib/van.js';
 import { findRegion, findPrefecture, findCity } from './regions.js';
+import { municipalityType } from '../data/tokyo.js';
 
 google.charts.load('current', { 'packages': ['geochart'], 'mapsApiKey': 'AIzaSyDWQEGh9S63LVWJOVzUX9lZqlTDWMe1nvk' });
 google.charts.setOnLoadCallback(async () => {
   van.add(document.body, Root);
   createInlineSVG();
-  setActiveData();
+  setData();
   initPosition();
 });
 
-function setActiveData() {
-  const { region, prefecture, city, municipality } = parseHash();
+function setData() {
+  const hash = parseHash();
+  if (hash.region === 'Tokyo') {
+    setTokyo(hash);
+    return;
+  }
+  setJapan(hash);
+}
 
-  if (region === 'Tokyo') {
-    setLayer(layers.tokyo);
-    if (municipality) {
-      const municipalityData = findMunicipality(municipality);
-      if (municipalityData) {
-        setMunicipality(municipalityData);
-      }
+function setTokyo(hash) {
+  setLayer(layers.tokyo);
+  if (hash.municipality) {
+    const municipalityData = findMunicipality(hash.municipality);
+    if (municipalityData) {
+      setMunicipality(municipalityData);
+      return;
     }
-    return;
   }
+  if (hash.municipalityType) {
+    const municipalityTypeData = Object.values(municipalityType).find(type => type.name.en === hash.municipalityType);
+    if (municipalityTypeData) {
+      setMunicipalityType(municipalityTypeData);
+      return;
+    }
+  }
+}
 
-  const regionData = findRegion(region);
-  const prefectureData = prefecture && findPrefecture(prefecture);
-  const cityData = city && findCity(city);
+function setJapan(hash) {
+  const region = findRegion(hash.region);
+  const prefecture = hash.prefecture && findPrefecture(hash.prefecture);
+  const city = hash.city && findCity(hash.city);
 
-  setRegion(regionData, () => {
+  setRegion(region, () => {
     setTimeout(() => {
-      if (cityData) {
+      if (city) {
         setLayer(layers.capital);
-        setCity(cityData);
-      } else if (prefectureData) {
+        setCity(city);
+      } else if (prefecture) {
         setLayer(layers.prefecture);
-        setPrefecture(prefectureData);
+        setPrefecture(prefecture);
       }
     }, 1);
   });

js/title.js

@@ -5,7 +5,7 @@ import { findCity, findRegion } from './regions.js';
 import { state } from './state.js';
 
 export const getTitle = () => {
-  const { layer, region, prefecture, city, municipality } = state;
+  const { layer, region, prefecture, city, municipality, municipalityType } = state;
 
   if (layer.val === layers.tokyo || municipality.val) {
     const tokyo = findCity('Tokyo');
@@ -14,6 +14,7 @@ export const getTitle = () => {
       dict.japan,
       kanto?.name,
       tokyo?.name,
+      municipalityType.val?.name,
       municipality.val?.name,
     ]
   }

js/tokyo.js

@@ -49,7 +49,7 @@ export function initTokyo() {
 /**
  * @param {Municipality | null} municipality
  */
-export function setMunicipality(municipality) {
+export function setMunicipality(municipality, resetType = true) {
   const id = municipality && replaceSpecialChars(municipality.name.en);
 
   tokyo.forEach(item => {
@@ -61,7 +61,7 @@ export function setMunicipality(municipality) {
   });
 
   state.municipality.val = municipality;
-  state.municipalityType.val = municipality?.type;
+  resetType && (state.municipalityType.val = municipality?.type);
 }
 
 export function setMunicipalityType(type, force = false) {

js/utils.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-import van from '../lib/van.js';
+import { municipalityType } from '../data/tokyo.js';
 
 /**
  * @typedef {import('../data/regions.js').Region} Region
@@ -183,6 +183,14 @@ export function parseHash() {
   const filters = decodeURI(hash).split('/');
 
   if (filters[0] === 'Tokyo') {
+    const municipalityTypeData = Object.values(municipalityType).find((type) => type.name.en === filters[1]);
+    if (municipalityTypeData) {
+      return {
+        region: 'Tokyo',
+        municipalityType: filters[1],
+      };
+    }
+
     return {
       region: 'Tokyo',
       municipality: filters[1],