This is an automated email from the ASF dual-hosted git repository.
bchapuis pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
The following commit(s) were added to refs/heads/main by this push:
new c29e19a Add a language selector (#43)
c29e19a is described below
commit c29e19a56cd7779d35e1785fed85a61bf3117dfa
Author: Bertil Chapuis <[email protected]>
AuthorDate: Mon Aug 14 20:58:23 2023 +0200
Add a language selector (#43)
* Add a language selector and a demo link
---
src/components/MapLanguageSelect/index.tsx | 58 +++++++++++++++++++++++
src/components/MapLanguageSelect/style.module.css | 45 ++++++++++++++++++
src/components/map/index.tsx | 5 ++
src/pages/_app.mdx | 1 +
src/pages/_meta.json | 4 +-
src/pages/index.mdx | 2 +-
src/pages/map.mdx | 2 +-
7 files changed, 113 insertions(+), 4 deletions(-)
diff --git a/src/components/MapLanguageSelect/index.tsx
b/src/components/MapLanguageSelect/index.tsx
new file mode 100644
index 0000000..0ab5306
--- /dev/null
+++ b/src/components/MapLanguageSelect/index.tsx
@@ -0,0 +1,58 @@
+import cn from 'clsx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons';
+import styles from './style.module.css';
+
+interface MapLanguageSelectProps {
+ map: maplibregl.Map;
+}
+
+export const MapLanguageSelect: React.FC<MapLanguageSelectProps> = ({
+ map
+}) => {
+ let languages = [
+ { name: 'Default', code: 'name' },
+ { name: 'Arabic', code: 'name:ar' },
+ { name: 'Bengali', code: 'name:bn' },
+ { name: 'Chinese', code: 'name:zh' },
+ { name: 'English', code: 'name:en' },
+ { name: 'French', code: 'name:fr' },
+ { name: 'German', code: 'name:de' },
+ { name: 'Hindi', code: 'name:hi' },
+ { name: 'Italian', code: 'name:it' },
+ { name: 'Japanese', code: 'name:ja' },
+ { name: 'Korean', code: 'name:ko' },
+ { name: 'Portuguese', code: 'name:pt' },
+ { name: 'Russian', code: 'name:ru' },
+ { name: 'Spanish', code: 'name:es' }
+ ];
+
+ return (
+ <div className={cn(styles['ctrl-container'], 'maplibregl-ctrl-top-left')}>
+ <div
+ className={cn(
+ styles['select-container'],
+ 'maplibregl-ctrl maplibregl-ctrl-group'
+ )}
+ >
+ <FontAwesomeIcon icon={faLanguage} className={styles.icon} />
+ <select
+ className={styles['style-select']}
+ onChange={e => {
+ map.setLayoutProperty('point_label', 'text-field', [
+ 'coalesce',
+ ['get', e.target.value],
+ ['get', 'name']
+ ]);
+ }}
+ >
+ {languages.map(language => (
+ <option key={language.name} value={language.code}>
+ {language.name}
+ </option>
+ ))}
+ </select>
+ </div>
+ </div>
+ );
+};
diff --git a/src/components/MapLanguageSelect/style.module.css
b/src/components/MapLanguageSelect/style.module.css
new file mode 100644
index 0000000..380e51e
--- /dev/null
+++ b/src/components/MapLanguageSelect/style.module.css
@@ -0,0 +1,45 @@
+.ctrl-container {
+ left: 665px;
+ color: black;
+}
+
+/* Responsive width for small screens */
+@media screen and (max-width: 768px) {
+ .ctrl-container {
+ left: 72%;
+ }
+}
+
+.icon {
+ padding: 0 10px;
+}
+
+.select-container {
+ width: 100%;
+ height: 29px;
+ display: flex;
+ align-items: center;
+}
+
+.style-select {
+ appearance: none;
+ border: none;
+ background-color: white;
+ outline: none;
+ box-shadow: none;
+ padding-right: 20px;
+
+ background-image: linear-gradient(45deg, transparent 50%, gray 50%),
+ linear-gradient(135deg, gray 50%, transparent 50%);
+ background-position: calc(100% - 5px) calc(50% + 2px), 100% calc(50% + 2px);
+ background-size: 5px 5px, 5px 5px;
+ background-repeat: no-repeat;
+}
+
+.theme-select:focus {
+ background-image: linear-gradient(135deg, transparent 50%, gray 50%),
+ linear-gradient(45deg, gray 50%, transparent 50%);
+ background-position: calc(100% - 5px) 50%, 100% 50%;
+ background-size: 5px 5px, 5px 5px;
+ background-repeat: no-repeat;
+}
diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx
index 9cbe890..a7d06a7 100644
--- a/src/components/map/index.tsx
+++ b/src/components/map/index.tsx
@@ -8,6 +8,7 @@ import styles from './style.module.css';
import { GeocoderSearch } from '../GeocoderSearch';
import { STYLES } from './mapStyles';
import { MapStyleSelect } from '../MapStyleSelect';
+import { MapLanguageSelect } from '../MapLanguageSelect';
interface MapProps {
longitude?: number;
@@ -20,6 +21,7 @@ interface MapProps {
* Note: This precedes 'mapStyle' if both are defined
*/
getMapStyle?: () => Promise<string | maplibregl.StyleSpecification>;
+ mapLanguage?: string;
mapOptions?: Partial<maplibregl.MapOptions>;
/**
* 'getControls' a function because some controls access the window object
@@ -29,6 +31,7 @@ interface MapProps {
geocoder?: boolean;
ipToLoc?: boolean;
styleSelect?: boolean;
+ languageSelect?: boolean;
/** Map CSS styles */
rounded?: boolean;
style?: React.CSSProperties;
@@ -65,6 +68,7 @@ export default function Map({
geocoder = true,
ipToLoc = true,
styleSelect = false,
+ languageSelect = false,
rounded = true,
style = {}
}: MapProps) {
@@ -125,6 +129,7 @@ export default function Map({
/>
)}
{styleSelect && <MapStyleSelect map={map} mapStyles={STYLES} />}
+ {languageSelect && <MapLanguageSelect map={map} />}
<div ref={mapContainer} className={styles.map} />
</div>
);
diff --git a/src/pages/_app.mdx b/src/pages/_app.mdx
index 7dd5bdc..21d289c 100644
--- a/src/pages/_app.mdx
+++ b/src/pages/_app.mdx
@@ -6,5 +6,6 @@ import '@/styles/globals.css';
import '@fortawesome/fontawesome-svg-core/styles.css';
export default function App({ Component, pageProps }) {
+ console.log(pageProps);
return <Component {...pageProps} />;
}
diff --git a/src/pages/_meta.json b/src/pages/_meta.json
index b470cd1..436efdb 100644
--- a/src/pages/_meta.json
+++ b/src/pages/_meta.json
@@ -9,8 +9,8 @@
},
"map": {
"type": "page",
- "title": "Map",
- "display": "hidden",
+ "title": "Demo",
+ "href": "/map",
"theme": {
"layout": "raw",
"footer": false
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index 745ff4f..906b482 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -63,7 +63,7 @@ export function OSMCopyright() {
</Feature>
<Feature index={1} squareLarge>
<Link href="/map" className={styles['demo-link']}>
- <h3>Explore Map ↗</h3>
+ <h3>Explore the map ↗</h3>
<p>Click to view the map</p>
</Link>
<OSMCopyright />
diff --git a/src/pages/map.mdx b/src/pages/map.mdx
index de3ad4a..dee079b 100644
--- a/src/pages/map.mdx
+++ b/src/pages/map.mdx
@@ -5,7 +5,7 @@ title: Apache Baremaps
import Map from '@/components/map';
<div className="container">
- <Map mapOptions={{ hash: true }} styleSelect rounded={false} />
+ <Map mapOptions={{ hash: true }} styleSelect languageSelect rounded={false}
/>
</div>
<style jsx>{`
