Switching language settings in Mapbox and i18n.

When the JA or EN button is clicked, the language setting of the site is switched and the language setting of Mapbox is switched accordingly.

Create a component like this.

This article assumes that the Nextjs version is “14.0.4″ and that react-map-gl and i18n have already been installed.

Please refer to this article for the introduction of mapbox language settings and i18n.

Tsukurue

[Mapbox]地図を日本語化する | Tsukurue Mapboxが公式に提供するmapbox-gl-languageパッケージでMapboxの地図表記を日本語化する手順を解説します。地図表示はこちらの記事を参考にしてください。本記事のNextjs…

Tsukurue

【Nextjs】i18nextを利用して多言語化する | Tsukurue Next.jsで日本語ページ、英語ページ、その他言語ページといったように同一ページで他言語を行います。 Next.jsでは、国際化(i18next)のサポートがデフォルトで行われていま…

Language type definitions

Switch between Japanese and English.
If you need other languages as well, add them to the type definition.

export const enum LOCALE {
  JA = 'ja',
  EN = 'en'
}

export type Locale = LOCALE.JA | LOCALE.EN

language switching component

Language switching is done in the function and involves the following two points.
Switching the language of i18n.
Switching the language of Mapbox

Switching i18n languages

Language switching in i18n can be achieved by calling changeLanguage.

The first argument is the language you want to switch to.

i18n.changeLanguage(LOCALE.JA)

https://www.i18next.com/overview/api#changelanguage

Switching Mapbox language

Mapbox can be switched by setting MapboxLanguage in setStyle.

map?.getMap().setStyle(new MapboxLanguage().setLanguage(map?.getMap().getStyle(), LOCALE.JA))

https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setstyle

Language switch button component

The entire code is here.

Clicking on the LangBtn calls handleLanguageChange to switch between i18n and Mapbox languages.

This allows for site-wide language switching.

import { LOCALE, Locale } from '@/types/Lang'
import MapboxLanguage from '@mapbox/mapbox-gl-language'
import { useRouter } from 'next/router'
import { useTranslation } from 'react-i18next'
import { useMap } from 'react-map-gl'
import styled from 'styled-components'

export function LangButtons() {
  const router = useRouter()
  const { locale } = useRouter()
  const { i18n } = useTranslation('translation', { lng: locale })
  const { map } = useMap()

  const handleLanguageChange = (lang: Locale) => {
    i18n.changeLanguage(lang)
    map?.getMap().setStyle(new MapboxLanguage().setLanguage(map?.getMap().getStyle(), lang))

    const newPath = `${lang === LOCALE.JA ? '' : `/${LOCALE.EN}`}${router.pathname}`
    const newUrl = { pathname: newPath, query: router.query }

    router.push(newUrl, undefined, { shallow: true, locale: lang })
  }

  return (
    <BtnBox>
      <LangBtn onClick={() => handleLanguageChange(LOCALE.JA)}>{LOCALE.JA.toUpperCase()}</LangBtn>
      <Slash>/</Slash>
      <LangBtn onClick={() => handleLanguageChange(LOCALE.EN)}>{LOCALE.EN.toUpperCase()}</LangBtn>
    </BtnBox>
  )
}

const BtnBox = styled.div`
  display: flex;
  gap: 0 8px;
  padding-bottom: 4px;
`

const LangBtn = styled.button`
  color: inherit;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  font-size: 16px;
  font-family: inherit;
`

const Slash = styled.span`
  font-size: 14px;
  font-weight: bold;
`