You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@baremaps.apache.org by bc...@apache.org on 2023/05/15 11:09:08 UTC
[incubator-baremaps-site] branch main updated: Add directory for maplibre experiments (#24)
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 2b172b9 Add directory for maplibre experiments (#24)
2b172b9 is described below
commit 2b172b95de44dcfe5a7c86227dff4b9f8559fd2c
Author: Leonard <73...@users.noreply.github.com>
AuthorDate: Mon May 15 13:09:02 2023 +0200
Add directory for maplibre experiments (#24)
---
src/components/map/index.tsx | 95 +++++++++++++---------
src/pages/_meta.json | 5 ++
src/pages/experiments/_meta.json | 5 ++
src/pages/experiments/basemap-raster-hillshade.mdx | 53 ++++++++++++
src/pages/experiments/raster-dem.mdx | 52 ++++++++++++
src/pages/experiments/raster-hillshade.mdx | 71 ++++++++++++++++
6 files changed, 243 insertions(+), 38 deletions(-)
diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx
index 62bda45..d98cdc4 100644
--- a/src/components/map/index.tsx
+++ b/src/components/map/index.tsx
@@ -10,13 +10,51 @@ interface MapProps {
longitude?: number;
latitude?: number;
zoom?: number;
+ mapStyle?: string | maplibregl.StyleSpecification;
+ /**
+ * 'getMapStyle' a function we might want to fetch the style from the server
+ *
+ * Note: This precedes 'mapStyle' if both are defined
+ */
+ getMapStyle?: () => Promise<string | maplibregl.StyleSpecification>;
+ mapOptions?: Partial<maplibregl.MapOptions>;
+ /**
+ * 'getControls' a function because some controls access the window object
+ * which is not available until the component is mounted
+ */
+ getControls?: () => maplibregl.IControl[];
+ geocoder?: boolean;
ipToLoc?: boolean;
}
+export const getDefaultControls = (): maplibregl.IControl[] => [
+ // Add navigation control (the +/- zoom and compass buttons)
+ new maplibregl.NavigationControl({}),
+ // Add the inspect control to the map.
+ new MaplibreInspect({
+ showMapPopup: true,
+ showMapPopupOnHover: false,
+ showInspectMapPopupOnHover: false,
+ popup: new maplibregl.Popup({
+ closeButton: true,
+ closeOnClick: true
+ })
+ }),
+ // Add the tile boundaries control to the map.
+ new MaplibreTileBoundaries({
+ showBoundaries: false
+ })
+];
+
export default function Map({
longitude = 6.625,
latitude = 46.51,
zoom = 14,
+ mapStyle = `https://demo.baremaps.com/style.json`,
+ getMapStyle,
+ mapOptions = {} as maplibregl.MapOptions,
+ getControls = getDefaultControls,
+ geocoder = true,
ipToLoc = true
}: MapProps) {
const mapContainer = useRef(null);
@@ -33,54 +71,35 @@ export default function Map({
longitude = results[0].longitude;
latitude = results[0].latitude;
}
- map.jumpTo({
- center: [longitude, latitude],
- zoom: zoom
- });
} catch (err) {
// For the moment, we fallback to the default values
}
}
- setMap(
- new maplibregl.Map({
- container: mapContainer.current,
- style: `https://demo.baremaps.com/style.json`,
- center: [longitude, latitude],
- zoom: zoom
- })
- );
+ const newMap = new maplibregl.Map({
+ container: mapContainer.current,
+ style: getMapStyle !== undefined ? await getMapStyle() : mapStyle,
+ center: [longitude, latitude],
+ zoom: zoom,
+ ...mapOptions
+ });
+ // Add default controls
+ getControls().forEach(control => {
+ newMap.addControl(control);
+ });
+
+ setMap(newMap);
};
initMap();
}, []);
- // Add controls to the map
- useEffect(() => {
- if (map) {
- map.addControl(new maplibregl.NavigationControl({}));
- // Add the inspect control to the map.
- map.addControl(
- new MaplibreInspect({
- showMapPopup: true,
- showMapPopupOnHover: false,
- showInspectMapPopupOnHover: false,
- popup: new maplibregl.Popup({
- closeButton: true,
- closeOnClick: true
- })
- })
- );
- // Add the tile boundaries control to the map.
- map.addControl(
- new MaplibreTileBoundaries({
- showBoundaries: false
- })
- );
- }
- }, [map]);
-
return (
<div className={styles.wrap}>
- <GeocoderSearch url="https://demo.baremaps.com/api/geocoder" map={map} />
+ {geocoder && (
+ <GeocoderSearch
+ url="https://demo.baremaps.com/api/geocoder"
+ map={map}
+ />
+ )}
<div ref={mapContainer} className={styles.map} />
</div>
);
diff --git a/src/pages/_meta.json b/src/pages/_meta.json
index 4cd1a72..c6b3571 100644
--- a/src/pages/_meta.json
+++ b/src/pages/_meta.json
@@ -14,5 +14,10 @@
"documentation": {
"title": "Documentation",
"type": "page"
+ },
+ "experiments": {
+ "title": "Experiments",
+ "type": "page",
+ "display": "hidden"
}
}
diff --git a/src/pages/experiments/_meta.json b/src/pages/experiments/_meta.json
new file mode 100644
index 0000000..8e5b8f3
--- /dev/null
+++ b/src/pages/experiments/_meta.json
@@ -0,0 +1,5 @@
+{
+ "raster-dem": "Raster DEM",
+ "raster-hillshade": "Raster Hillshade",
+ "basemap-raster-hillshade": "Basemap Raster Hillshade"
+}
diff --git a/src/pages/experiments/basemap-raster-hillshade.mdx b/src/pages/experiments/basemap-raster-hillshade.mdx
new file mode 100644
index 0000000..d8223e1
--- /dev/null
+++ b/src/pages/experiments/basemap-raster-hillshade.mdx
@@ -0,0 +1,53 @@
+import Map, { getDefaultControls } from '@/components/map';
+import maplibregl from 'maplibre-gl';
+
+# Basemap Raster Hillshade
+
+The following example injects a terrain source and a hillshade layer into the basemap style.
+
+<div style={{ marginTop: 20, height: 550 }}>
+ <Map
+ zoom={4}
+ mapOptions={{
+ maxZoom: 14
+ }}
+ getMapStyle={async () => {
+ const res = await fetch('https://demo.baremaps.com/style.json');
+ const style = await res.json();
+ // Inject the terrain source and hillshade layer
+ style.sources['terrainSource'] = {
+ type: 'raster-dem',
+ tiles: [
+ 'https://s3.amazonaws.com/elevation-tiles-prod/geotiff/{z}/{x}/{y}.tif'
+ ],
+ tileSize: 512,
+ maxzoom: 14,
+ minzoom: 0
+ };
+ style.layers.splice(15, 0, {
+ id: 'hills',
+ type: 'hillshade',
+ source: 'terrainSource',
+ layout: {
+ visibility: 'visible'
+ },
+ // We adjust the hillshade layer to overlay the vector layers
+ paint: {
+ 'hillshade-accent-color': 'rgba(0,0,0,0)',
+ 'hillshade-highlight-color': 'rgba(255,255,255,0.1)',
+ 'hillshade-illumination-anchor': 'viewport',
+ 'hillshade-illumination-direction': 45,
+ 'hillshade-shadow-color': 'rgba(0,0,0,0.05)'
+ }
+ });
+ return style;
+ }}
+ getControls={() => [
+ ...getDefaultControls(),
+ new maplibregl.TerrainControl({
+ source: 'terrainSource',
+ exaggeration: 0.05
+ })
+ ]}
+ />
+</div>
diff --git a/src/pages/experiments/raster-dem.mdx b/src/pages/experiments/raster-dem.mdx
new file mode 100644
index 0000000..df42549
--- /dev/null
+++ b/src/pages/experiments/raster-dem.mdx
@@ -0,0 +1,52 @@
+import Map, { getDefaultControls } from '@/components/map';
+import maplibregl from 'maplibre-gl';
+
+# Raster DEM
+
+The following raster DEM dataset is from [AWS Terrain Tiles](https://registry.opendata.aws/terrain-tiles/).
+
+<div style={{ marginTop: 20, height: 550 }}>
+ <Map
+ zoom={4}
+ mapOptions={{
+ maxZoom: 14
+ }}
+ mapStyle={{
+ version: 8,
+ sources: {
+ rasterSource: {
+ type: 'raster',
+ tiles: [
+ 'https://s3.amazonaws.com/elevation-tiles-prod/geotiff/{z}/{x}/{y}.tif'
+ ],
+ tileSize: 512,
+ maxzoom: 14,
+ minzoom: 0
+ },
+ terrainSource: {
+ type: 'raster-dem',
+ tiles: [
+ 'https://s3.amazonaws.com/elevation-tiles-prod/geotiff/{z}/{x}/{y}.tif'
+ ],
+ tileSize: 512,
+ maxzoom: 14,
+ minzoom: 0
+ }
+ },
+ layers: [
+ {
+ id: 'raster-layer',
+ type: 'raster',
+ source: 'rasterSource'
+ }
+ ]
+ }}
+ getControls={() => [
+ ...getDefaultControls(),
+ new maplibregl.TerrainControl({
+ source: 'terrainSource',
+ exaggeration: 0.05
+ })
+ ]}
+ />
+</div>
diff --git a/src/pages/experiments/raster-hillshade.mdx b/src/pages/experiments/raster-hillshade.mdx
new file mode 100644
index 0000000..f1ab7b0
--- /dev/null
+++ b/src/pages/experiments/raster-hillshade.mdx
@@ -0,0 +1,71 @@
+import Map, { getDefaultControls } from '@/components/map';
+import maplibregl from 'maplibre-gl';
+
+# Raster Hillshade
+
+This example shows the use of the `hillshade` layer type in `maplibre-gl` to render a hillshade layer on top of a raster DEM layer.
+
+<div style={{ marginTop: 20, height: 550 }}>
+ <Map
+ zoom={4}
+ mapOptions={{
+ maxZoom: 14
+ }}
+ mapStyle={{
+ version: 8,
+ sources: {
+ rasterSource: {
+ type: 'raster',
+ tiles: [
+ 'https://s3.amazonaws.com/elevation-tiles-prod/geotiff/{z}/{x}/{y}.tif'
+ ],
+ tileSize: 512,
+ maxzoom: 14,
+ minzoom: 0
+ },
+ terrainSource: {
+ type: 'raster-dem',
+ tiles: [
+ 'https://s3.amazonaws.com/elevation-tiles-prod/geotiff/{z}/{x}/{y}.tif'
+ ],
+ tileSize: 512,
+ maxzoom: 14,
+ minzoom: 0
+ }
+ },
+ layers: [
+ {
+ id: 'hills',
+ type: 'hillshade',
+ source: 'terrainSource',
+ layout: {
+ visibility: 'visible'
+ },
+ paint: {
+ 'hillshade-accent-color': '#0ac1ff',
+ 'hillshade-highlight-color': '#ffffff',
+ 'hillshade-illumination-anchor': 'map',
+ 'hillshade-illumination-direction': 45,
+ 'hillshade-shadow-color': '#000000'
+ }
+ },
+ {
+ id: 'raster-layer',
+ type: 'raster',
+ source: 'rasterSource',
+ // Reduce opacity of raster layer to increase visibility of hillshade layer
+ paint: {
+ 'raster-opacity': 0.6
+ }
+ }
+ ]
+ }}
+ getControls={() => [
+ ...getDefaultControls(),
+ new maplibregl.TerrainControl({
+ source: 'terrainSource',
+ exaggeration: 0.05
+ })
+ ]}
+ />
+</div>