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.
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;
`
Summary
Now that Corona has dawned and inbound traffic is returning. Multilingualisation appears to be becoming increasingly important.
This website may be of some help.
