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 a7e907c Add style selector (#33)
a7e907c is described below
commit a7e907c0c5f1f0cc2c0cc73d941869212218403c
Author: Leonard <[email protected]>
AuthorDate: Tue Jul 4 12:39:30 2023 +0200
Add style selector (#33)
* Add map page
* Add style selector
---
public/mapStyles/achromatomaly.json | 1 +
public/mapStyles/achromatopsia.json | 1 +
public/mapStyles/dark.json | 1 +
public/mapStyles/default.json | 1 +
public/mapStyles/deuteranomaly.json | 1 +
public/mapStyles/deuteranopia.json | 1 +
public/mapStyles/light.json | 1 +
public/mapStyles/protanomaly.json | 1 +
public/mapStyles/protanopia.json | 1 +
public/mapStyles/tritanomaly.json | 1 +
public/mapStyles/tritanopia.json | 1 +
src/components/GeocoderSearch/style.module.css | 2 +-
src/components/MapStyleSelect/index.tsx | 45 +++++++++++++++++++++++
src/components/MapStyleSelect/style.module.css | 45 +++++++++++++++++++++++
src/components/map/index.tsx | 22 +++++++++--
src/components/map/mapStyles.ts | 51 ++++++++++++++++++++++++++
src/components/map/style.module.css | 7 +++-
src/pages/_meta.json | 9 +++++
src/pages/index.mdx | 2 +-
src/pages/map.mdx | 15 ++++++++
20 files changed, 202 insertions(+), 7 deletions(-)
diff --git a/public/mapStyles/achromatomaly.json
b/public/mapStyles/achromatomaly.json
new file mode 100644
index 0000000..a0c2fdb
--- /dev/null
+++ b/public/mapStyles/achromatomaly.json
@@ -0,0 +1 @@
+{"version":8,"name":"OpenStreetMapVecto","sources":{"baremaps":{"type":"vector","url":"https://demo.baremaps.com/tiles.json"}},"sprite":"https://tiles.baremaps.com/sprites/osm/sprite","glyphs":"https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf","layers":[{"id":"background","type":"background","source":"baremaps","layout":{"visibility":"visible"},"minzoom":0,"maxzoom":24,"paint":{"background-color":"rgb(240.482,239.117,236.154)"}},{"id":"power_plant","type":"fill","filter":["any",[
[...]
\ No newline at end of file
diff --git a/public/mapStyles/achromatopsia.json
b/public/mapStyles/achromatopsia.json
new file mode 100644
index 0000000..7e7670a
--- /dev/null
+++ b/public/mapStyles/achromatopsia.json
@@ -0,0 +1 @@
+{"version":8,"name":"OpenStreetMapVecto","sources":{"baremaps":{"type":"vector","url":"https://demo.baremaps.com/tiles.json"}},"sprite":"https://tiles.baremaps.com/sprites/osm/sprite","glyphs":"https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf","layers":[{"id":"background","type":"background","source":"baremaps","layout":{"visibility":"visible"},"minzoom":0,"maxzoom":24,"paint":{"background-color":"rgb(239.213,239.213,239.213)"}},{"id":"power_plant","type":"fill","filter":["any",[
[...]
\ No newline at end of file
diff --git a/public/mapStyles/dark.json b/public/mapStyles/dark.json
new file mode 100644
index 0000000..64d4e21
--- /dev/null
+++ b/public/mapStyles/dark.json
@@ -0,0 +1 @@
+{"version":8,"name":"OpenStreetMapVecto","sources":{"baremaps":{"type":"vector","url":"https://demo.baremaps.com/tiles.json"}},"sprite":"https://tiles.baremaps.com/sprites/osm/sprite","glyphs":"https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf","layers":[{"id":"background","type":"background","source":"baremaps","layout":{"visibility":"visible"},"minzoom":0,"maxzoom":24,"paint":{"background-color":"rgb(0,0,0)"}},{"id":"power_plant","type":"fill","filter":["any",["==","power","plan
[...]
\ No newline at end of file
diff --git a/public/mapStyles/default.json b/public/mapStyles/default.json
new file mode 100644
index 0000000..9073860
--- /dev/null
+++ b/public/mapStyles/default.json
@@ -0,0 +1 @@
+{"version":8,"name":"OpenStreetMapVecto","sources":{"baremaps":{"type":"vector","url":"https://demo.baremaps.com/tiles.json"}},"sprite":"https://tiles.baremaps.com/sprites/osm/sprite","glyphs":"https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf","layers":[{"id":"background","type":"background","source":"baremaps","layout":{"visibility":"visible"},"minzoom":0,"maxzoom":24,"paint":{"background-color":"rgb(242,
239, 233)"}},{"id":"power_plant","type":"fill","filter":["any",["==","powe
[...]
\ No newline at end of file
diff --git a/public/mapStyles/deuteranomaly.json
b/public/mapStyles/deuteranomaly.json
new file mode 100644
index 0000000..42d745e
--- /dev/null
+++ b/public/mapStyles/deuteranomaly.json
@@ -0,0 +1 @@
+{"version":8,"name":"OpenStreetMapVecto","sources":{"baremaps":{"type":"vector","url":"https://demo.baremaps.com/tiles.json"}},"sprite":"https://tiles.baremaps.com/sprites/osm/sprite","glyphs":"https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf","layers":[{"id":"background","type":"background","source":"baremaps","layout":{"visibility":"visible"},"minzoom":0,"maxzoom":24,"paint":{"background-color":"rgb(241.40000000000003,239.774,233.85199999999998)"}},{"id":"power_plant","type":"f
[...]
\ No newline at end of file
diff --git a/public/mapStyles/deuteranopia.json
b/public/mapStyles/deuteranopia.json
new file mode 100644
index 0000000..47e1cb8
--- /dev/null
+++ b/public/mapStyles/deuteranopia.json
@@ -0,0 +1 @@
+{"version":8,"name":"OpenStreetMapVecto","sources":{"baremaps":{"type":"vector","url":"https://demo.baremaps.com/tiles.json"}},"sprite":"https://tiles.baremaps.com/sprites/osm/sprite","glyphs":"https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf","layers":[{"id":"background","type":"background","source":"baremaps","layout":{"visibility":"visible"},"minzoom":0,"maxzoom":24,"paint":{"background-color":"rgb(240.875,241.09999999999997,234.8)"}},{"id":"power_plant","type":"fill","filter"
[...]
\ No newline at end of file
diff --git a/public/mapStyles/light.json b/public/mapStyles/light.json
new file mode 100644
index 0000000..cfe5720
--- /dev/null
+++ b/public/mapStyles/light.json
@@ -0,0 +1 @@
+{"version":8,"name":"OpenStreetMapVecto","sources":{"baremaps":{"type":"vector","url":"https://demo.baremaps.com/tiles.json"}},"sprite":"https://tiles.baremaps.com/sprites/osm/sprite","glyphs":"https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf","layers":[{"id":"background","type":"background","source":"baremaps","layout":{"visibility":"visible"},"minzoom":0,"maxzoom":24,"paint":{"background-color":"rgb(255,255,255)"}},{"id":"power_plant","type":"fill","filter":["any",["==","power"
[...]
\ No newline at end of file
diff --git a/public/mapStyles/protanomaly.json
b/public/mapStyles/protanomaly.json
new file mode 100644
index 0000000..fc47018
--- /dev/null
+++ b/public/mapStyles/protanomaly.json
@@ -0,0 +1 @@
+{"version":8,"name":"OpenStreetMapVecto","sources":{"baremaps":{"type":"vector","url":"https://demo.baremaps.com/tiles.json"}},"sprite":"https://tiles.baremaps.com/sprites/osm/sprite","glyphs":"https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf","layers":[{"id":"background","type":"background","source":"baremaps","layout":{"visibility":"visible"},"minzoom":0,"maxzoom":24,"paint":{"background-color":"rgb(241.451,239.99900000000002,233.75)"}},{"id":"power_plant","type":"fill","filter
[...]
\ No newline at end of file
diff --git a/public/mapStyles/protanopia.json b/public/mapStyles/protanopia.json
new file mode 100644
index 0000000..4c7339b
--- /dev/null
+++ b/public/mapStyles/protanopia.json
@@ -0,0 +1 @@
+{"version":8,"name":"OpenStreetMapVecto","sources":{"baremaps":{"type":"vector","url":"https://demo.baremaps.com/tiles.json"}},"sprite":"https://tiles.baremaps.com/sprites/osm/sprite","glyphs":"https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf","layers":[{"id":"background","type":"background","source":"baremaps","layout":{"visibility":"visible"},"minzoom":0,"maxzoom":24,"paint":{"background-color":"rgb(240.701,240.674,234.452)"}},{"id":"power_plant","type":"fill","filter":["any",[
[...]
\ No newline at end of file
diff --git a/public/mapStyles/tritanomaly.json
b/public/mapStyles/tritanomaly.json
new file mode 100644
index 0000000..6f3ce54
--- /dev/null
+++ b/public/mapStyles/tritanomaly.json
@@ -0,0 +1 @@
+{"version":8,"name":"OpenStreetMapVecto","sources":{"baremaps":{"type":"vector","url":"https://demo.baremaps.com/tiles.json"}},"sprite":"https://tiles.baremaps.com/sprites/osm/sprite","glyphs":"https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf","layers":[{"id":"background","type":"background","source":"baremaps","layout":{"visibility":"visible"},"minzoom":0,"maxzoom":24,"paint":{"background-color":"rgb(241.90099999999998,237.398,234.09799999999998)"}},{"id":"power_plant","type":"f
[...]
\ No newline at end of file
diff --git a/public/mapStyles/tritanopia.json b/public/mapStyles/tritanopia.json
new file mode 100644
index 0000000..5868adb
--- /dev/null
+++ b/public/mapStyles/tritanopia.json
@@ -0,0 +1 @@
+{"version":8,"name":"OpenStreetMapVecto","sources":{"baremaps":{"type":"vector","url":"https://demo.baremaps.com/tiles.json"}},"sprite":"https://tiles.baremaps.com/sprites/osm/sprite","glyphs":"https://tiles.baremaps.com/fonts/{fontstack}/{range}.pbf","layers":[{"id":"background","type":"background","source":"baremaps","layout":{"visibility":"visible"},"minzoom":0,"maxzoom":24,"paint":{"background-color":"rgb(241.84999999999997,235.59799999999998,235.85)"}},{"id":"power_plant","type":"fi
[...]
\ No newline at end of file
diff --git a/src/components/GeocoderSearch/style.module.css
b/src/components/GeocoderSearch/style.module.css
index a519823..9a757e9 100644
--- a/src/components/GeocoderSearch/style.module.css
+++ b/src/components/GeocoderSearch/style.module.css
@@ -6,7 +6,7 @@
/* Responsive width for small screens */
@media screen and (max-width: 768px) {
.ctrl-container {
- width: 85%;
+ width: 70%;
}
}
diff --git a/src/components/MapStyleSelect/index.tsx
b/src/components/MapStyleSelect/index.tsx
new file mode 100644
index 0000000..2c82ff9
--- /dev/null
+++ b/src/components/MapStyleSelect/index.tsx
@@ -0,0 +1,45 @@
+import cn from 'clsx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFillDrip } from '@fortawesome/free-solid-svg-icons';
+import { MapStyle } from '../map/mapStyles';
+import styles from './style.module.css';
+
+interface MapStyleSelectProps {
+ map: maplibregl.Map;
+ mapStyles: MapStyle[];
+}
+
+export const MapStyleSelect: React.FC<MapStyleSelectProps> = ({
+ map,
+ mapStyles
+}) => {
+ return (
+ <div className={cn(styles['ctrl-container'], 'maplibregl-ctrl-top-left')}>
+ <div
+ className={cn(
+ styles['select-container'],
+ 'maplibregl-ctrl maplibregl-ctrl-group'
+ )}
+ >
+ <FontAwesomeIcon icon={faFillDrip} className={styles.icon} />
+ <select
+ className={styles['style-select']}
+ onChange={e => {
+ const style = mapStyles.find(
+ style => style.name === e.target.value
+ );
+ if (style) {
+ map.setStyle(style.styleUrl);
+ }
+ }}
+ >
+ {mapStyles.map(style => (
+ <option key={style.name} value={style.name}>
+ {style.name}
+ </option>
+ ))}
+ </select>
+ </div>
+ </div>
+ );
+};
diff --git a/src/components/MapStyleSelect/style.module.css
b/src/components/MapStyleSelect/style.module.css
new file mode 100644
index 0000000..63aece0
--- /dev/null
+++ b/src/components/MapStyleSelect/style.module.css
@@ -0,0 +1,45 @@
+.ctrl-container {
+ left: 465px;
+ 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 054731f..3b9ca55 100644
--- a/src/components/map/index.tsx
+++ b/src/components/map/index.tsx
@@ -1,10 +1,13 @@
import React, { useRef, useEffect, useState } from 'react';
+import cn from 'clsx';
import maplibregl from 'maplibre-gl';
import MaplibreInspect from
'@/lib/maplibre/dist/maplibre-gl-inspect/maplibre-gl-inspect';
import MaplibreTileBoundaries from
'@/lib/maplibre/dist/maplibre-gl-tile-boundaries/maplibre-gl-tile-boundaries';
import styles from './style.module.css';
import { GeocoderSearch } from '../GeocoderSearch';
+import { STYLES } from './mapStyles';
+import { MapStyleSelect } from '../MapStyleSelect';
interface MapProps {
longitude?: number;
@@ -25,6 +28,10 @@ interface MapProps {
getControls?: () => maplibregl.IControl[];
geocoder?: boolean;
ipToLoc?: boolean;
+ styleSelect?: boolean;
+ /** Map CSS styles */
+ rounded?: boolean;
+ style?: React.CSSProperties;
}
export const getDefaultControls = (): maplibregl.IControl[] => [
@@ -55,7 +62,10 @@ export default function Map({
mapOptions = {} as maplibregl.MapOptions,
getControls = getDefaultControls,
geocoder = true,
- ipToLoc = true
+ ipToLoc = true,
+ styleSelect = false,
+ rounded = true,
+ style = {}
}: MapProps) {
const mapContainer = useRef(null);
const [map, setMap] = useState(null);
@@ -97,17 +107,23 @@ export default function Map({
setMap(newMap);
};
- initMap();
+ if (!map) {
+ initMap();
+ }
}, []);
return (
- <div className={styles.wrap}>
+ <div
+ className={cn(styles.wrap, rounded ? styles.rounded : '')}
+ style={style}
+ >
{geocoder && (
<GeocoderSearch
url="https://demo.baremaps.com/api/geocoder";
map={map}
/>
)}
+ {styleSelect && <MapStyleSelect map={map} mapStyles={STYLES} />}
<div ref={mapContainer} className={styles.map} />
</div>
);
diff --git a/src/components/map/mapStyles.ts b/src/components/map/mapStyles.ts
new file mode 100644
index 0000000..81a42be
--- /dev/null
+++ b/src/components/map/mapStyles.ts
@@ -0,0 +1,51 @@
+export interface MapStyle {
+ name: string;
+ styleUrl: string;
+}
+
+export const STYLES: MapStyle[] = [
+ {
+ name: 'Default',
+ styleUrl: '/mapStyles/default.json'
+ },
+ {
+ name: 'Light',
+ styleUrl: '/mapStyles/light.json'
+ },
+ {
+ name: 'Dark',
+ styleUrl: '/mapStyles/dark.json'
+ },
+ {
+ name: 'Achromatomaly',
+ styleUrl: '/mapStyles/achromatomaly.json'
+ },
+ {
+ name: 'Achromatopsia',
+ styleUrl: '/mapStyles/achromatopsia.json'
+ },
+ {
+ name: 'Deuteranomaly',
+ styleUrl: '/mapStyles/deuteranomaly.json'
+ },
+ {
+ name: 'Deuteranopia',
+ styleUrl: '/mapStyles/deuteranopia.json'
+ },
+ {
+ name: 'Protanomaly',
+ styleUrl: '/mapStyles/protanomaly.json'
+ },
+ {
+ name: 'Protanopia',
+ styleUrl: '/mapStyles/protanopia.json'
+ },
+ {
+ name: 'Tritanomaly',
+ styleUrl: '/mapStyles/tritanomaly.json'
+ },
+ {
+ name: 'Tritanopia',
+ styleUrl: '/mapStyles/tritanopia.json'
+ }
+];
diff --git a/src/components/map/style.module.css
b/src/components/map/style.module.css
index 509f84c..2267eb7 100644
--- a/src/components/map/style.module.css
+++ b/src/components/map/style.module.css
@@ -8,11 +8,14 @@
.map {
position: absolute;
color: black;
- border: solid 1px lightgray;
- border-radius: 0.75rem;
width: 100%;
height: 100%;
overflow: hidden;
+}
+
+.rounded {
+ border: solid 1px lightgray;
+ border-radius: 0.75rem;
/* this fixes the overflow:hidden for canvas - corresponds to 1 black pixel
*/
-webkit-mask-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
diff --git a/src/pages/_meta.json b/src/pages/_meta.json
index 201da86..edc3447 100644
--- a/src/pages/_meta.json
+++ b/src/pages/_meta.json
@@ -7,6 +7,15 @@
"layout": "raw"
}
},
+ "map": {
+ "type": "page",
+ "title": "Map",
+ "display": "hidden",
+ "theme": {
+ "layout": "raw",
+ "footer": false
+ }
+ },
"download": {
"title": "Download",
"type": "page"
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index 542b2aa..f0a322a 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -34,7 +34,7 @@ import { IconTitle } from '@/components/titles/IconTitle';
<div className="content-container">
<Features>
<Feature index={0} plain large style={{ height: 600 }}>
- <Map />
+ <Map styleSelect />
</Feature>
<Feature index={0}>
<IconTitle icon={faListCheck}>
diff --git a/src/pages/map.mdx b/src/pages/map.mdx
new file mode 100644
index 0000000..de3ad4a
--- /dev/null
+++ b/src/pages/map.mdx
@@ -0,0 +1,15 @@
+---
+title: Apache Baremaps
+---
+
+import Map from '@/components/map';
+
+<div className="container">
+ <Map mapOptions={{ hash: true }} styleSelect rounded={false} />
+</div>
+
+<style jsx>{`
+ .container {
+ height: calc(100vh - 64px); /* 64px is the height of the navbar */
+ }
+`}</style>
