You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@baremaps.apache.org by le...@apache.org on 2023/07/04 09:35:12 UTC
[incubator-baremaps-site] branch feature/styles created (now 509cdb2)
This is an automated email from the ASF dual-hosted git repository.
leonardcs pushed a change to branch feature/styles
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
at 509cdb2 Add map page
This branch includes the following new commits:
new 51305a0 Add styles
new 56bdb36 Add map style select
new 509cdb2 Add map page
The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-baremaps-site] 01/03: Add styles
Posted by le...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
leonardcs pushed a commit to branch feature/styles
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit 51305a0d32e33ef4021ad48e6a30ae9772003537
Author: Leonard <le...@gmail.com>
AuthorDate: Tue Jul 4 10:41:31 2023 +0200
Add styles
---
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 +
11 files changed, 11 insertions(+)
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
[incubator-baremaps-site] 02/03: Add map style select
Posted by le...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
leonardcs pushed a commit to branch feature/styles
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit 56bdb3653309b9b41f2ca592f6965652337fb2f6
Author: Leonard <le...@gmail.com>
AuthorDate: Tue Jul 4 10:47:10 2023 +0200
Add map style select
---
src/components/GeocoderSearch/style.module.css | 2 +-
src/components/MapStyleSelect/index.tsx | 43 ++++++++++++++++++++++
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/index.mdx | 2 +-
7 files changed, 165 insertions(+), 7 deletions(-)
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..1c59044
--- /dev/null
+++ b/src/components/MapStyleSelect/index.tsx
@@ -0,0 +1,43 @@
+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/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}>
[incubator-baremaps-site] 03/03: Add map page
Posted by le...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
leonardcs pushed a commit to branch feature/styles
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit 509cdb2eeaa2e12868c0a5b9693081123b67b033
Author: Leonard <le...@gmail.com>
AuthorDate: Tue Jul 4 10:47:19 2023 +0200
Add map page
---
src/pages/_meta.json | 9 +++++++++
src/pages/map.mdx | 15 +++++++++++++++
2 files changed, 24 insertions(+)
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/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>